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.
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 (mobile) connections. You also want these users to have a good user experience. Every ms counts. Users 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 Grunt, Gulp or an online compression tool like Kraken.io
- 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.
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.
- CSS blocks the rendering of your page
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:
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.
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.
Tools we use:
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.