Increase Website Speed: CSS and Javascript Optimization Tips

November 2014

increase website speed tips

Tips to Make Your Site Run Faster – Part 1

This post will focus on improving the client (or browser) side of a website. Read the second part for tips from the server side (Apache, mySQL, PHP).

From reducing bottlenecks to getting the most website speed out of your dedicated server, these tips will put you on track for a fast environment.

When deciding to improve the performance of a server, people most often think about hardware first. Although having better hardware will make your site run faster, this may not always be a cost-effective strategy. Tweaking services and having a well-tuned configuration can, and will, give your dedicated server a significant boost and will result in faster website speed on par with an advanced hardware setup. You don’t need too much technical expertise to optimize a server, just enough knowledge to understand what services are taking up the most resources within your deployment; and how to tweak their settings to reduce overall consumption of dedicated server resources.

Optimize Files

While tuning your server to increase website speed, also look into tuning your files. Reduce white space and comments, or take advantage of compressors to do this for you. Leverage the power of a browser tool which allows you to analyze your code to verify compression. There are many CSS and JavaScript compressors out there, or your script may have one built right in it. You should also try to reuse code. When a file is served, it’s often cached or stored in your visitors’ browsers. This will reduce requests to your dedicated server thus increasing overall performance.

CSS & JavaScript Priorities

You won’t make your website run faster when focusing on only CSS or Javascript editing, but here’s why that’s okay. The website will appear as though it’s loading faster to your viewers. If this is the only change you make to your site, you can still make a difference. The general rule here is to load your CSS first, and your JavaScript last. This is so your page elements, or the bulk of your content and links, are visually generated first, and interactive elements, such as animation, display after the core page loads. Your viewers won’t leave your page because they will be able to start reading or clicking internal links. Placing your CSS at the top of the page will prioritize your content to visitors. Since all visual aspects are loaded first, everything else will usually have enough time to load before your visitor has a chance to click away. Once the visual aspect of your website is delivered, it’s time to load up your interactive files and JavaScript. Place your JavaScript at the bottom of your website (usually within, or after the footer) and your interactive elements will load right after the rest.

Speeding Up a Dedicated Server

In a nutshell, our first tips are: 1) Optimize your files and reuse as much as possible to leverage browser storage. 2) CSS first, JavaScript last. In the second part of this series, we will cover: 1) Optimizing MySQL and indexing, 2) Unique Apache deployments; and 3) Fine tuning PHP extentions with the php.ini file.

Let ReliableSite Help You

Don’t have the time to perform these tasks or prefer to focus on what you do best and run your business? Let our level 3 techs handle these tasks for you and help your website run faster with our dedicated server management services. Our servers are ideal for high speed environments and we utilize high quality upstream providers to compliment a well optimized server.