10 Tips to Make Your Web Site Blazingly Fast

| Posted on |

This post has been transferred from my old blog and was originally published on Wednesday 14th March 2018.

Research suggests that page loads of over 3 seconds drastically increases user bounce rate, retain your traffic with these top ten tips to speed up your web site.

Please note these tips are assuming a pre-existing web site without any development time to optimise web apps or databases if you are building a new site you should consider page load times at each stage of the development life cycle for best results. These tips are purely for enhancing the server/client relationship and can be easily configured by your system’s administrator.

1 – Optimize Images

As web sites are so graphically rich these days typically the largest payload a user is likely to download from a site is usually images. There are a few steps you can perform to reduce the overall size of images for your site, not only will this help speed up your user’s experience it’ll save you bandwidth too!

  • Remove white space around images, instead if you’d like to pad your image use CSS.
  • Use suitable file formats for your image type, e.g. use compressed JPEGs for photos and GIFs for buttons or icons with few colours.
  • Scale images appropriately for your page rather than using HTML / CSS to resize.
  • Remember to keep originals incase your intended use for an image changes.

2 – Defer JavaScript Parsing

Websites have grown to be more and more AJAXy and the use of JavaScript has exploded, unfortunately parsing JS in-line during the page load can make your web site feel sluggish, you can avoid this by delaying parsing the JS until after the page has loaded. You can achieve this by adding the async attribute to your script tags such as this:

<script async>

Or alternatively, you may simply move all your script tags to the end of your page, however, this isn’t as elegant as using the async attribute as the scripts are still loaded synchronously using this method albeit after the rest of the content.

3 – Enable gzip Compression

Almost all modern web servers and browsers support gzip compression, enabling gzip compression can reduce the transmitted data size of a CSS and HTML heavy web site by up to 70% which ensures quick loading times for your users and reduces your bandwidth costs as well. You can easily enable gzip compression for text-based file formats by including the following in your .htaccess file.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Once enabled you can use a tool such as Check GZIP Compression to discover how effective enabling gzip compression is at reducing your site’s payload.

4 – Add Expires Headers for Static Content

Static content such as images, CSS and JavaScript files are often included on multiple pages throughout your site, or are downloaded multiple times by returning visitors, by adding expires headers you can tell visitor’s browsers to cache such content locally for a defined period of time so subsequent visits are loaded from their browser cache rather than from your web server, this not only increases page load speeds but also helps save you bandwidth and reduce server load as your web server handles fewer requests.

To enable expires headers you’ll need to enable Apache’s mod_expires module, in most Linux distributions this can be achieved with the a2enmod command.

a2enmod expires
service apache2 restart                 # Debian Variants
systemctl restart httpd.service         # RedHat Variants

You then need to specify which MIME types you’d like to cache, and for which length of time in your .htaccess file. You should only enable this for static files, enabling expiration headers for dynamic content will result in the user refreshing out of date content.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

5 – Minify CSS

CSS forms a large component of a modern web site as designers become more reliant on its features to offer a slick user experience, however, human-readable CSS is by nature a lot larger than it needs to be, use a CSS minifier such as UglifyCSS to compress CSS to the bare minimum to function, however, remember minified CSS is not the easiest to edit so keep the original and re-minify before deploy. You can install UglifyCSS via NPM and use it as per the below.

npm install uglifycss
node_modules/uglifycss/uglifycss css/mycss.css > css/mycss.min.css

If we compare the human-readable/editable main CSS file and the minified version from Bootstrap we can realise a saving of 19% reducing page load time and bandwidth consumption.

6 – Minify JS

Just like minifying CSS JavaScript can be minified from its human-friendly version and this can be achieved using UglifyJS, it’s usage is almost identical to UglifyCSS.

npm install uglify-js
node_modules/uglify-js/bin/uglifyjs js/myscript.js > js/myscript.min.js

Comparing the development version of JQuery vs the deployable minified version reveals a saving of 78%, remember to keep your originals in case you need to update your JS and re-minify at the time of deploy.

7 – Minify HTML

HTML can also be minified like CSS and JS. Again remember to keep your originals as minified versions of resources are not human editable without a lot of pain.

npm install html-minifier
node_modules/html-minifier/cli.js index.src.html > index.html

8 – Utilise a Content Delivery Network

You can increase page speed dramatically by using a Content Delivery Network (CDN) to serve your static files. CDNs cache and distribute your static content on edge nodes around the globe and end users are directed to their nearest edge node to download static content greatly increasing download speed, reducing request latency and load on your server.

There are primarily 2 types of CDN, caching proxy CDNs and object store seeded CDNs. Caching proxy CDNs such as Cloudflare proxy all your site’s traffic and automatically cache static content within their CDN forwarding any dynamic requests on to your server. Object store seeded CDNs require you to upload your static content to an Object Store like AWS S3 or Rackspace CloudFiles, these can then be fronted with a service like AWS CloudFront or Rackspace CDN. Object store seeded CDNs are typically cheaper as you are only uploading and serving your static files via the CDN reducing overall bandwidth usage, however they come at the complexity of updating all the links to your static content. Proxying CDNs, on the other hand, have to proxy all your sites traffic costing more in bandwidth however simplifying deployment as no code needs to be modified, you are only required to update DNS records and configure your SSL Certificate on the CDN.

You can read more about the services mentioned above at the links below…

9 – Avoid Using Redirects

Redirects are mega painful for end-users especially if their browser is on a latent connection, imagine if you are in Europe and you are visiting a website served out of the USA, just crossing the giant pond incurs 120ms of round trip time. Now imagine you hit a redirect to another page, that’s 240ms of round trip time just to send the request for both pages without even considering any other processing time. When you only have 3 seconds to get your page loaded before your end-user gets bored and bounces wasting up to 10% of your time just on the round trip latency of a redirect is a very heavy price to pay.

10 – Reduce DNS Lookups

Another latency inducing problem is having too many DNS lookups, avoid loading resources from other hostnames or even cross-domain, each DNS lookup required on your site typically takes around 20 to 100ms depending on the end user’s DNS configuration and can slow down your web site considerably.

Measuring Success

There are a few tools available to help you gauge how successful implementing some of the tips above have been in increasing your web site loading times. You should test your site a few times prior to applying any of the changes to make a good original benchmark for comparison. Tools to check out include the following…

  • YSlow – Compares your site against Yahoo!’s best practice rules for web site performance.
  • PageSpeed Insights – Part of Google’s web performance toolkit

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *