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.
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.
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
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.
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
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.
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…