When it comes to testing pages using Lighthouse, WebPageTest or other similar tools, cookie and similar consent banners are a pain! They can cause layout shifts, on mobile the banner is sometimes the element for Largest Contentful Paint (LCP), they visually obscure other parts of the page, and if implemented correctly only some of the page's resources will be fetched. When analysing sites one of…
I still remember the first time I came across an anti-flicker snippet… A client had asked me to look at the speed of their sites for countries in South East Asia, and South America. The sites weren’t as fast as I thought they should be but then they weren’t horrendously slow either but, something that troubled me was how long they took to start displaying content. I was puzzled… When I examined…
Improving site speed comes with a cost, it might be the opportunity cost of switching from developing features to working on performance improvements, the cost of buying or deploying performance tools, engaging consultants or the direct cost of work itself — especially when a site relies on an external development partner. As performance advocates we’d champion the idea that improving performance…
At BrightonSEO I talked about Third-Party tags, their impact on site-speed, and some of the approaches I encourage my clients to use to reduce this impact. As it’s hard to fit everything into a twenty minute talk, this post expands on the talk and includes some of the points I didn’t have time to cover. From Analytics to Advertising, Reviews to Recommendations, and more, it’s common for sites to…
One of the common questions I'm often asked by clients is "What difference will the changes you're recommending make to our site's speed"? And too often that can be a hard question to answer… I can be pretty sure of the 'direction of travel' – shrinking resources should make them download faster, delaying 3rd-parties should make content appear sooner – but page load can be non-deterministic and…
Many performance techniques focus on improving the performance of the current page, but there are some that help with the performance of the next page – caching, prefetching, and prerendering for example. The Prefetch Resource Hint allows us to tell the browser about resources we expect to be used in the near future, so they can be fetched ready for the next navigation. Several of my clients have…
I often want to examine the web traffic generated by browsers, and other apps. Sometimes I can use the tools built into browsers, other times proxies, but when I want to take a deeper look and particularly if I’m looking at how a browser is using HTTP/2, I rely on packet captures. One challenge with analysing HTTP/2 traffic is that it’s encrypted and while Chrome and Firefox support logging TLS…
The preconnect Resource Hint is a great way to speed up content that comes from third-party origins – it’s got relatively low overhead (though it’s not completely free) and is generally easy to implement. Sometimes it produces small improvements, and sometimes more dramatic ones ! Browsers typically only make a connection to an origin just before they request a resource from it, so when resources…
After explaining the preconnect Resource Hint to clients or workshop attendees, I often get asked “How can I check it’s working?” Here's a few ways of checking: Safari Inspector Safari’s Inspector displays a console message when it successfully preconnects to another origin. I find this the fastest and simplest way of checking whether preconnects are working: Navigate to a page that uses…
Sometimes a small change can have a huge effect… Recently, a client switched from serving their product images through AWS S3 and Cloudfront to Cloudinary. Although Cloudinary was delivering optimally sized and better compressed images, there was a noticeable delay before the images arrived, and some of this delay was due to the overhead of creating a connection to another origin (the delay…
"Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load" is the seemingly simple advice Lighthouse gives. Preload is a trade-off – when we explicitly increase the priority of one resource we implicitly decrease the priority of others – and so to work effectively preload requires authors to identify the optimal resources to preload,…
"Note that WebKit already partitions caches and HTML5 storage for all third-party domains." - Intelligent Tracking Prevention Seems a pretty innocuous note but… What this means is Safari caches content from third-party origins separately for each document origin, so for example if two sites, say a.com and b.com both use a common library, third-party.com/script.js , then script.js will be cached…
There's been an explosion in 3rd-Party Tags… And as Tim Kadlec once said "Everything should have a value, because everything has a cost". So how do we measure the performance cost of all the 3rd-party tags we keep adding to our sites? Although Chrome supports blocking individual requests, my favourite approach still uses WebPageTest. If you're interested in the Chrome approach Umar covered how to…
If you’ve got your own Private WebPageTest instance, and you want to add extra locations without setting up the test agents yourself then you can add agents from another instance. Once configured your local WebPageTest instance submits tests and retrieves results via the API of the remote WebPageTest instance (aka Relay Server), and the pages are tested on the remote instance’s agents. Using a…
So Google, a group of publishers and others have launched Accelerated Mobile Pages (AMP) AMP promotes the goal of a faster mobile web which is something I think we’d all like to see. If you visit g.co/ampdemo on a mobile, and search for ‘Obama’ there’s no doubt the stories in the carousel come up fast, and moving between them is slick too. The demo isn’t available in all regions yet so Addy Osmani…
The pre-loader (also known as the speculative or look-ahead pre-parser) may be the single biggest improvement ever made to browser performance. During their implementation Mozilla reported a 19% improvement in load times , and in a test against the Alexa top 2,000 sites Google found around a 20% improvement . It’s not a new browser feature but some seem to believe it’s Chrome only and yet others…
With our current tools it’s relatively easy to examine the performance of a single page, or the performance of a journey a visitor takes through a series of pages but when I examine a client’s site for the first time I often want to get a broad view of performance across the whole site. There are a few tools that can crawl a site and produce performance reports, SiteSpeed.io from Peter Hedenskog…
Like most people involved in web performance I spend hours looking at page load waterfalls, each one tells it's own story and the patterns hint at where the issues are. With tools like Mobitest, WebPageTest, remote debugging in Chrome and Safari I can get a good level of detail for modern mobile browsers but I often want to test on older devices where the dev tools support isn't as good or more…
I've been helping a client identify some performance issues with a new hosting platform they're in the process of commissioning. The new platform has New Relic running but unfortunately it only provides an average for response times. Averages can hide all manner of sins so I prefer to look at the distribution of response times, I also wanted a way to compare against the existing platform which has…
Back in September I explained how to create a private instance of Web Page Test running IE, Firefox and Chrome on Windows 7. Recently I needed to add some iOS agents, after a bit of trial and error this is the approach I used. I've added the mobile agents to my existing 'all-in-one' WebPageTest instance so if you've not read the original post it's worth having a quick scan first: Configuring an…