Does your website belong to the 89% that use Google Fonts? Did you know that as soon as you start using externalised fonts such as Google Fonts, you run the risk of performance problems linked to Third Parties? Google Fonts are, in fact, part of the critical page rendering path: they are a required resource for text display.
With images taking up ever more space on our webpages, it is ever more crucial to keep their weight to a minimum, especially on mobile. According to HTTP Archive, the average webpage displays approximately 1 MB of images (median), and the images on a page account for almost half of the total weight of the page.
Once you have inevitably compressed it, how do you serve an image in the right dimensions for different screen sizes? In the wake of our predictions in favour of srcset, we decided to set ourselves a new webperf challenge: resizing images!
Following a healthier, lighter diet also applies to CSS, and the latter will become heavy if it has to put up with base64-encoded fonts. Fasterize helps you optimize your loading times by outsourcing fonts instead of embedding them in CSS, a critical resource that the browser needs to load as quickly as possible. The result? Pages are displayed faster thanks to a better Start Render.
The faster a site is (that’s our core business) the better web user engagement it gets. And there are plenty of solutions to accelerate a website! Reducing page size as far as possible is one of the most effective ways – and the most obvious. Essentially, the fewer bytes that the browser has to download, the faster the site is. And so, one sensible solution involves optimizing the raw size of the JavaScript and CSS code by minifying them, as well as using a more effective compression algorithm.
Maybe you’ve already heard people talking about Early Hint? Or perhaps the HTTP 103 code? This feature, which is currently being standardized by the W3C, can be used to preload page resources even before receiving the first byte of content. Unfortunately, currently, HTTP 103 is very rarely used by browsers, despite the benefits it offers in terms of loading speed. To address this, our technical team has developed an optimization that allows our customers to preload a non-cacheable page’s resources – we’d like to introduce you to Early Hint!
When you’re holding Sales promotions or on Black Friday/Cyber Monday, or any trafic peak or laod peak period, an overflow page – or traffic easing system – allows you to define a maximum number of active sessions to keep your servers up and running, thus minimizing the loss of potential customers. This feature, which we call Traffic Limiter on our platform, is available for all our users, and is easy to enable from the dashboard.
It is often difficult to get the right trade-off between image quality and loading speed.
The ideal solution would be for each image to be adapted on a user-by-user basis: be that clipping it perfectly to the user's device screen, stripping metadata of any unnecessary information or, of course, ensuring that it is displayed with optimum image quality. But achieving this soon becomes something of a black art.
What are the techniques, best practices, best libraries and best algorithms for image compression? An overview of the image optimizations you can take advantage of with our engine, for light and fast pages, and a better user experience regardless of the browser and screen size.
