Website Optimization - 8 Speed Up Tips

By Gary Witt
Updated on April 25, 2016
Website Optimization - 8 Speed Up Tips

Web performance is an integral part to the success of your web projects. There are good reasons to focus on page load time. The first impression is what counts - never make users wait for your content.

Speed matters - Imagine visiting a slow loading website, which renders line by line. Would you be excited what is next on this site? Probably not.

There are 2 main factors why you should care about website optimization:

  1. Exceptional user experience - Your customers expect that your website is loading super fast. In fact, a slow web application affects your bottom line and 47% of the users expect a website to load in 2 seconds or even less.
  2. Search Engine Optimization (SEO) - Website speed impacts how Goolge's ranking algorithm will classify you. Your website might load fast in the country where your origin server is but what about the speed on the other half of the globe? Having globally a fast website is important to get everywhere a high ranking signal and not being penalized in some regions where your web application might load slowly.

1. Reduce HTTP requests

Combine CSS and JavaScript files by concatenating them. This will reduce the amount of requests required to download your assets. Either use automated build systems or do it “manually” (e.g. cat bootstrap.css fontawesome.css custom.css > all.css).

Concat plugins for the automated task systems

2. Minify CSS and JavaScript

The next logic step after you concatenated your JavaScript and CSS files is to minimize them. The automated task systems differentiate here between the JS and CSS file. Therefore you need separate plugins for each task.

Minify plugins for the automated task systems

JavaScript

CSS

3. CSS in the head section and scripts at the bottom

This approach might be a bit generalized but a good rule of thumb. You can go even further and include the CSS required for the initial rendering, typically styles for the above-the-fold content, directly in the HEAD section in <style></style> elements and move the rest of your CSS to the bottom before the </body> element as well. This will prevent render blocking. However you need to check if this optimization effort is worth the improvement as it might make your setup complex.

For your JavaScript consider using the async directive to avoid render blocking.

<script async src="foobar.js"></script>

Learn more about render blocking in this great article: Analyzing Critical Rendering Path Performance

4. Compress images

Images hold the biggest portion of the payload of a website. The benefits of optimizing images can have an enormous positive impact in the overall page load time. The average image size increased in 2014 by more than 21%. Compressing images is a must on the way to fast websites.

Whenever possible use PNG images as they offer a lossless compression. Keep in mind that JPEG will cause a loss on compression. However it is recommended to use JPG for photos. Further, define the image width and height in the <img> element to enable faster rendering.

Image minify plugins for the automated task systems

Online Tools

 Local Tools

5. Use a content delivery network

Getting your assets closer to your users will reduce latency and increases the throughput. KeyCDN has highly optimized edge servers, which are strategically positioned to accelerate your content. This optimization task will lead to the best improvement results if you have a global audience. It is important to have features such as Origin Shield, SPDY, Gzip compression that can further optimize the download speed of your assets. OCSP stapling also improves the initial SSL handshake between your users and the edge server if you are using HTTPS.

6. Properly set the expires value to leverage caching

Leveraging the browser cache is crucial for assets that are rarely changing. It is recommended to have a max-age of 7 days in such cases. Learn more about different control mechanisms in this article: A Guide to HTTP Cache Headers

7. Avoid redirects

Redirects are performance killers. Avoid them whenever possible. A redirect will generate additional round trip times (RTT) and therefore quickly doubles the time that is required to load the initial HTML document before the browser even starts to load other assets.

8. Prefetch domain names and increase the TTL of your DNS records

Domain name prefetching is a good solution to already resolve domain names before a user actually follows a link. Here an example how to implement it in the HEAD section of your HTML:

<link rel="dns-prefetch" href="//www.example.com">

The double slashes indicate that the URL begins with a host name (this is specified in the RFC1808).

Another important aspect is to increase the TTL for your URL and also for you aliases (e.g. where your assets are loaded from). Resolvers will cache the DNS responses and therefore respond much faster to DNS queries, as they do not need to make additional lookups if the record is still in the DNS cache. We recommend setting the TTL to at least 3600 seconds if not a day (86400 seconds). Here an example in case you take advantage of CNAMEs when you are using a CDN:

cdn.keycdn.com. 3600 IN CNAME website-7.kxcdn.com

Leave a comment