Have you ever started reading an exciting news article but then lose your line because all the text shifted downwards? This happens to me a lot, mostly because of ads loading around the content I’m reading.
This kind of user experience can be frustrating, but until now we’ve had trouble measuring it quantitatively. Cumulative Layout Shift addresses this challenge.
Category Archives: Web best Practices
How to Optimize Third-Party Services Performance
Embedding an existing library or service as a third party can increase productivity, but often has a cost on perceived performance. Once you embed external code, how can you ensure that this code will not affect the performance and interactivity of your site? Here are some ideas for a more efficient third party code.
Continue reading How to Optimize Third-Party Services PerformancePreload, Prefetch and Preconnect: Speed Up your Website with Resource Hints
Loading a web page requires fetching a whole set of resources which collectively allow the page to be displayed and interacted with. To increase the user’s perception of speed, you may need to influence the order in which these resources are fetched and executed. And that’s where preload
and Resource Hints come in.
First Contentful Paint (FCP), Start Render, First Paint. How to properly measure the beginning of page rendering?
How to properly measure how fast a web page starts to display its content? Several Web performance metrics exist to answer this question, including First Paint, Start Render and one of the newest: First Contentful Paint (FCP). How does FCP stand out, what are its limitations? Let’s dive into the metrics that measure the browser’s early rendering of web pages.
Continue reading First Contentful Paint (FCP), Start Render, First Paint. How to properly measure the beginning of page rendering?TTI: Time To (consistently) Interactive, how to measure web page interactivity
When we talk about web performance measurement, what we’re actually trying to determine is the moment when a user can effectively achieve his or her goal. Meaning the users can consult the content they are looking for and/or interact with the page in a satisfactory way. Some metrics endorse rendering actions by the browser, others measure the progress of the display through the recording of a video. However, a great mystery remains: how to properly measure interactivity.
For a few years now, Google has been pushing an ambiguous metric: Time To Interactive. What does it mean? Let’s define it and explain how and when to use it (or not).
Continue reading TTI: Time To (consistently) Interactive, how to measure web page interactivityLazy Loading, faster webpages, SEO friendly
Images are a key content on your website? If you’re serious about your website performance, you have probably optimized them. But have you considered to lazy load your images? Lazy loading images improves the user experience by saving bandwidth for important content first.
Some reject the technique for SEO considerations. But properly lazy loading your images does not prevent them from being indexed. Let’s find out why you should implement lazy load, and how to make sure you build it in a SEO friendly way.
Secure your Cookies (Secure and HttpOnly flags)
Cookies are widely used throughout the Web because they allow publishers to store data directly on the user’s Web browser. They’re particularly used to identify the user’s session, allowing the web server to recognize the user as they navigate through the site, and generally contain sensitive data. You have to properly protect them.
Continue reading Secure your Cookies (Secure and HttpOnly flags)
Content Encoding: why and how to use the meta charset tag and the Content-Type header
Improving the speed at which a web page is displayed often means making the browser’s life as easy as possible. When the browser receives an HTTP response, it actually receives text encoded in bytes, where each byte or sequence of bytes represents a given character. If the browser does not have a clear information about the used encoding, it will waste time trying to guess and may fail in some cases.
Performance Budgets – We Love Speed 2018
This article is a transcript of my conference about Performance Budgets, held during the We Love Speed event (Bordeaux, October 9, 2018). Continue reading Performance Budgets – We Love Speed 2018
Tag Manager & Web Performance Part 2: a question of discipline and collaboration
Using a tag manager does come with consequences on your web pages loading speed. In a previous post, we’ve pointed out that this impact can’t be limited to the asynchronous loading of the embedded tags, and that your tag manager can become a serious problem for your website performance. So now it’s time to explore a few best practices about tag management so that this tool could meet its marketing goals without compromising your webpages’ speed. With the help of L’Oréal’s Digital Ad Tech Manager and several experts. Continue reading Tag Manager & Web Performance Part 2: a question of discipline and collaboration
Web Pages Optimization: 2018 Dareboost Top of Tips
Among the many tips delivered by our analysis reports, which are the most appealing to those who have tested their web pages on Dareboost? We have reviewed the results of over 270,000 audits conducted via Dareboost and how the reports generated by our tool were browsed. Let’s focus on the most “clicked” best practices of the moment. Continue reading Web Pages Optimization: 2018 Dareboost Top of Tips
[Dogfooding] How Dareboost has benefited from Custom Timings monitoring
We may be Web Performance experts, we still don’t have superpowers . We also need tools to analyze our sites and applications. So when we released our new Custom Timings feature, we naturally jumped at the chance to test it on Dareboost.com… and immediately saw the benefit. Continue reading [Dogfooding] How Dareboost has benefited from Custom Timings monitoring
How Tag Managers impact web performance
Using a Tag Management System – like Google Tag Manager or TagCommander – to deal with scripts and third-party content populating your web pages presents obvious advantages for marketers. From a Web Performance point of view, the impact of such tools deserves your attention… Continue reading How Tag Managers impact web performance
Deploying CSP: a 5-step approach
You may have seen recommendations from Dareboost to put in place a security policy regarding the origin of your resources. In case you haven’t dived in yet, I’d like to offer some advice on its implementation, from my experience. Continue reading Deploying CSP: a 5-step approach
User Timing API (Custom Timing): the most relevant performance measure ever
You may already have dreamed of it: being able to measure exactly when one image of your web page is rendered or a particular script is executed, and track this moment through your favorite tools. The User Timing API made it possible, allowing you to place marks wherever you need within your pages! That feature is now supported by all the most recent browsers. And Dareboost is about to let you benefit from it at a larger scale! Continue reading User Timing API (Custom Timing): the most relevant performance measure ever
Back to static with JAMStack: a paradigm shift for better UX and web performance
For several years now, a new range of solutions have emerged in the web technologies landscape. Static site generators, headless CMS, content infrastructure… these solutions contribute to a global trend. “Static trend”, “JAMStack”, several names exist but none really covers what is an overall new proposal for web application architecture, and somehow a comeback to the roots of the Web.
Continue reading Back to static with JAMStack: a paradigm shift for better UX and web performance
Speed Index: what is it and how to properly use this performance metric?
At Dareboost, we have a motto: you can’t assess your overall website performance with one single metric! Nevertheless, some are more synthetical and relevant than others. We consider Speed Index as one of the most important indicators to analyze. Let’s discover why: what does the Speed Index indicate? How is it measured? How to interpret and use it properly? Continue reading Speed Index: what is it and how to properly use this performance metric?
Optimize your MP4 video for better performance
Representing more than 75% of the videos served on the Internet, MP4 is the most commonly used format today. However, MP4 is often used improperly, which can have an unfortunate impact on the User Experience. Let’s see how we can improve this. Continue reading Optimize your MP4 video for better performance
Defer scripts to speed up rendering
Artists are not the only ones who suffer from a blank page, so are your users. Their frustration can lead them to abandon your page prematurely. Several techniques can help you to speed up rendering and avoid that problem. One of them is to defer parsing of JavaScript files. Continue reading Defer scripts to speed up rendering
Webmarketing & website speed: How to Take the Control Back (2/2)
A great perceptual performance is an essential condition for any website overall success. As every people working for a website has to be concerned by speed issue, it should definitely matter for you as a webmarketing manager. Within this 2nd episode, let’s discover 3 more arguments illustrating how Dareboost can help you take control back on your web performance. Continue reading Webmarketing & website speed: How to Take the Control Back (2/2)
Load time is out!
Web agencies and their customers, managers and technical teams, are discussing and debating about load time without always understanding each others.
Whereas websites loading speed is an undeniable and strategic matter that every person involved within a web project should consider, relevant and consistent indicators for web performance have to be selected first. You can only improve what you measure and this measurement has to be reliable. Continue reading Load time is out!
Optimize Images to Reduce Page Weight: File Formats, Tools and RWD
“Reduce the page weight”: here is one of the most usual tips in Dareboost reports.
According to HTTP Archive trends, images represent 53% of the average pages weight, whether viewed on desktop or mobile devices. When you want to reduce the weight of your web pages, optimizing images should be at the top of your priorities.
Continue reading Optimize Images to Reduce Page Weight: File Formats, Tools and RWD
Webmarketing: How to Take Control (back) on your Website Speed with Dareboost
Loading speed is an essential condition for any website overall success. As every people working for a website has to be concerned by speed issue, it should definitely matter for you as a webmarketing manager. Let’s see how Dareboost can help you take control back on your web performance, even if you’re not a tech expert. Part 1/2 Continue reading Webmarketing: How to Take Control (back) on your Website Speed with Dareboost
Ensure secured connections with HSTS (HTTP Strict Transport Security)
Our regular readers already know that HTTPS is now a requirement for any websites. The urge to get rid of unsecured navigation has never been stronger: each release of Google Chrome or Mozilla Firefox comes with a new warning sign for users sharing private data. Soon, all forms will be concerned.
But offering an HTTPS version of your website is not enough to automatically redirect all your HTTP traffic to this secured version. Continue reading Ensure secured connections with HSTS (HTTP Strict Transport Security)
Secure your cookies to the next level with SameSite attribute
After reading our last article about how to secure your cookies, you may (should?) already be using Secure and HttpOnly flags. As a reminder, ‘Secure’ allows to prevent a cookie to be sent on a non-secure web page, whereas ‘HttpOnly’ prevents any client-side usage of a given cookie.
It is now time to take your website security to the next level with one more attribute for your cookies! Let’s talk about SameSite instruction, allowing to prevent Cross-Site Request Forgery (CSRF) attacks and Cross-Site Script Inclusion (XSSI). Continue reading Secure your cookies to the next level with SameSite attribute