16 december 2015

4 ways to optimise next project's front-end performance

Front-end developers have a lot of influence on a website's performance. They decide how styles, images and scripts are loaded. Doing it correctly is mandatory and may have a huge impact on your perceived front-end performance. In this article, I will be covering some techniques that will help you optimise your next project.

Joeri Claes, frontend-developer bij digital agency Intracto
Joeri Claes

Why you should care

Fact is that you do not know who will be visiting your website. Most users have a stable internet connection and up-to-date devices. However, many of them visit your website on slower (mobileconnections. You also want these users to have a good user experience. Every ms countsUsers these days expect your website to be snappy.

Mobile also plays a big role in e-commerce. 34% of all e-commerce sales worldwide are done on mobile devices. That's why you should care. Ignoring performance issues will result in less sales and higher bounce-rates. 

1) Optimise image loading

Images on your website make up a big part of your website's HTTP-requests. On many websites, it is even the biggest chunk of data to parse. That's why this step should not be neglected. The example below shows that on a regular e-commerce website, images take up 62% of all HTTP-requests


ur techniques to optimise image loading:

  • Lazy load images (We use jQuery Unveil to do this). By doing this, browsers only load images that are visible for the user. You can dramatically decrease initial HTTP-requests by implementing this technique. It also gives us the opportunity to load bigger-resolutionimages on retina-devices.

  • Compress images with GruntGulp or an online compression tool like
  • Choose which images to load depending on the device-type with HTML5 picture element (using picturefill).

2) Asynchronous font loading

You want your content to be visible as fast as possible for a regular visitor. On many websites, visitors will not see any text until fonts are loaded. You want to avoid this at any cost. On first visit, we use so called web-safe fonts (Arial, Georgia,...). These fonts are available for all visitors. By doing so, text renders way quicker since a visitor does not have to download these fonts. 


Off course we still use exotic fonts, but we load these asynchronously. We use the font-loading technique created by Filament Group. In the example below, you can see how fonts are being loaded. Using Typekit? In that case, font loading is already optimised.


Single video

3) Avoid render-blocking resources

Modern websites should limit or eliminate the amount of render-blocking resources. You do not want users to wait until all of your scripts / resources are loaded. 


But why is JavaScript / CSS render blocking?
- CSS blocks the rendering of your page
- JavaScript blocks other downloads

So, we should be optimising the way we load style sheets / scripts. This can be tricky though, since it requires a change in our workflow. Below you can find some quick tips to limit or eliminate render-blocking issues:

Avoiding CSS render-blocking issues:

Loading external CSS files blocks the rendering of your page. You should consider calculating your critical CSS and load these styles on first page load. 


We use Grunt-penthouse to calculate critical CSS. The above-the-fold styles are included between the <head></head> tags. Our main style sheetis loaded asynchronously using loadCSS. Doing so, we do not have to wait for our main style sheet to be downloaded. This results in faster paints and a better overall experience. 

On first page visit, we set a cookie called "visited". So next time a visitor visits the website, we can serve the cached style sheet.

An example is shown in the code snippet below:

Avoiding javascript render-blocking issues:

Before a browser can render your website, it has to parse your HTML line-by-line. If a browser encounters a script tag, it will stop parsing your website and execute the script. That's why most web applications are moving script tags below the fold.

4) Serving specific content to different device types

Serving a web application to multiple device types is definitely a challenge. You have to rethink your strategy, enhance your UX and limit your copy. 


Many times you want blocks of text, slideshows and other parts of your website to be hidden on mobile devices. All of this can be achieved by hiding / showing things with CSS. However, this is not always the best approach. 


For example: you want to hide your slideshow on mobile devices. Hiding it with CSS is one step, but you can go much further. Almost all slideshows or other UX-rich components require some JavaScript to be loaded.


You do not want certain JavaScript libraries to be loaded on some device types. That's why we use a PHP class for detecting mobile devices by User-Agent string. So we can enable / disable certain libraries / scripts depending on the device type. 


You can install this PHP class with Composer using following command:

After configuring the mobile-detect class, you can add some checks in your favourite templating engine (Twig for example). In the example below, we use the class to switch between templates in a shop's checkout.


Measuring front-end performance

At Intracto, we use several tools to measure front-end performance.Most of these tools contain a waterfall view feature of your web page's performance. This is extremely useful.

It allows use to take a look at the number of HTTP requests, load times, file sizes,...

Also make sure to test your website on different types of connections / devices. Mobile devices have fewer resources available than desktop devices. This can result in good performance on desktop but terrible performance on mobile devices.


After reading this article, I hope you will not ignore performance issues in your next project. If you have any recommendations or questions, you can always contact me on Twitter.