“Why is my website slow? Why aremy PageSpeed Insightsscore and load times bad?”. Questions you may have already asked yourself, and for which you’re still looking for the answer. Among the many webperf optimization techniques available, there are some that can help youimprove perceived speed for a better UX. Indeed, you can optimize speed as such (in other words, your raw performance), and you can also play on the sensation of speed perceived by users when they visit a page.
So how do you improve perceived speed? A little illusion, a lot of technique… we explain the details.
1. Optimizing image display
Progressive JPEG
First, you can transform your JPG images into Progressive JPG. In this way, a large image can be displayed quickly, first in low resolution, and then with increasing detail.
This technique allows large images to be visible as quickly as possible, rather than leaving an empty space that gives the impression that the page isn’t ready or that there’s nothing there.
Lazyloading
Lazyloadingis another image optimization technique to improve loading times and ensure fast web pages . This consists in giving priority to images displayed above the waterline. Subsequent images are only loaded when the user scrolls down the page.
2. Optimize text display
When displaying text on a web page, if the associatedfont isn’t immediately available, you can tell the browser what to do by means of what’s calledthe “font-display” property . This property lets you decide how fonts are applied (or not), depending on their loading time. You’ll get 2 possible behaviors depending on the choice of the font-displayproperty :
- FOUT (Flash Of Unstyled Text): the browser displays unstyled text before applying the correct font. This contributes to the perception of speed, as the text is displayed earlier for the user, even if the font has not yet been loaded.
- FOIT (Flash Of Invisible Text): the browser doesn’t display the text until the font is loaded, so the text remains invisible until then. Some browsers wait a maximum of 3 seconds before displaying the text after all, to avoid an SPOF (Single Point Of Failure).
3. Optimize CSS processing
CSS files are critical to the display of a page, since they determine the creation of the elements required for initial rendering. To ensure that this rendering takes place as soon as possible and optimize your loading times, the browser must be able to retrieve these files as quickly as possible. To help:
- Place CSS files at the top of the HTML code in the <head> tag, before the <script> tags. This avoids having to wait for the script file to be executed before the CSS file can be analyzed.
- Replace @import instructions in CSS files with the imported file itself. This way, the CSS file can be discovered much sooner by the browser.
4. Defer JavaScript (JS)
JavaScript is everywhere on the web! Yet these scripts take time for the browser to retrieve, analyze and execute, and they can come from third parties over which the website publisher has no control. In fact, 94% of sites contain third parties, and they can have an impact on your site’s performance.
But how can you optimize them so that they have as little impact as possible on page loading speed? You need to “organize” the loading of resources in such a way that JavaScript doesn’t block page rendering.
So, depending on whether or not these scripts are critical (if they are useful for elements that are essential to users), you can tell the browser what to load before or after the page is rendered. This is known as deferring the loading of JavaScript, or DeferJS. In this way, the browser identifies the JS, downloads it, but only executes it once the priority elements have been displayed.
5. Rely on an intelligent caching system
A web page contains both static and dynamic elements, such as personalized data, shopping carts on e-commerce sites…
Static elements can easily be cached so that the browser doesn’t have to load them on each new visit; but it’s more subtle for dynamic elements, as they can evolve during browsing or from one visit to the next.
But then, how do you cache a page since it contains both? Simply distinguish between dynamic and static elements, and cache the latter. This saves time in displaying static elements, which can appear faster on the screen and load more quickly.
Dynamic elements can be loaded at a later stage, but by then the page will have already begun to fill up, reassuring the user that it’s available.
6. Preload static resources
We’ve just covered the static resources of a page, those that can be cached. It’s possible to take this a step further by preloading a page’s resources even before it receives the first byte of content!
This is because an HTML page contains links to external static resources which must be extracted before they can be used. Making these links available to the browser as early as possible helps to minimize perceived latency: that’s what we do with the “early hint“. This saves precious milliseconds, giving your visitors an even greater impression of speed.
Now that you’ve seen these techniques for improving perceived speed, you need to ask yourself how you can apply them to your website to make it fast…
How to apply webperf optimization techniques for a better user experience?
You can apply these techniques yourself, provided you have the skills and the time. That said, bear in mind that webperf best practices evolve rapidly, and that any change to your website may mean starting all over again. It’s a constant task of monitoring and updating.
A technical audit of your website can give you a head start, so that you can then entrust development work to your in-house teams or to service providers. This way, you’ll be sure to start off on the right foot and in the right direction. That’s what Uni-Médias (publisher of media sites) did, for example, when it called on our experts to improve its Page Speed score. Optimizing page speed contributed to a 6-fold increase in traffic in 2 years.
Finally, to save time, resources and budget, you can automate the application of best practices and webperf optimization techniques. All 6 of these techniques can be fully automated with our SaaS solution.
In this case, you don’t need to develop anything in-house – the engine does it for you! What’s more, performance is durably maintained on all your pages, even as your website evolves. So you can concentrate on your core business.
The Trigano Storewebsite can testify to the benefits it has derived from automating webperf optimizations: technical and business teams are relieved, the website has been able to stem the loss of sales due to slow pages, and load peaks can now be absorbed with complete peace of mind.
Would you like to find out what other
webperf optimizationtechniques we offer?