Webpagetest
What is WebPageTest?
Webpagetest is an open-source, automated tool for measuring and improving the performance of Web Pages.
Click here to read more about WebPageTest: https://www.webpagetest.org
We use WebPageTest for 2 main reasons:
- Automated testing on real devices.
- Detailed performance results to understand down to the level of individual Javascript statements where the performance bottlenecks are.
Through understanding of the bottlenecks we can change the codebase and improve the Lighthouse scores and the user experience.
What is the difference between LightHouse and WebPageTest?
Lighthouse produces scores to show how well the website performs. It does provide some recommended changes and for most of the categories these are simple to make and can bring your site to a 100% score. For performance it is not so easy to improve your score. There can be some 'quick wins' which will improve the score without major changes to the site, such as:
- Optimising image compression
- Compressing resources on the server
- Preconnecting to origins
Some are not so easy to implement if you have used a framework over which you have little control
- Reducing the size of downloads may be hard if your framework and theme have included libraries automatically
- Serving the right size of image for the user device may not be possible unless your framework supports this
- Deferring low priority content also requires framework support.
How does WebPageTest help?
A key Lighthouse performance metric is the time it takes for the page to become interactive. The page is not interactive while Javascript is executing and blocking the page. During this time the site is blocked to the user - they cannot scroll and touching buttons and trying to select menu items will not work. To the use it appears that the site is frozen which is very frustrating. If this continues the use may abandon their visit.
Webpage test shows us exactly where a site is blocked by Javascript execution. We can see down to the level of individual Javascript calls where the time is being taken. Because we do not use a framework we are in control of every line of Javascript.
How does this enable performance to be optimised?
There are many potential actions we can take to improve the time to interactive metric:
- Optimize the code which is delaying the page.
- Split the code into smaller chunks and allow the use to interact with the page in between. (As long as the page is blocked for less than 50 milliseconds the user experience is not degraded.)
- Defer the blocking code until after the page has loaded or until the use scrolls down the page.
We continue to retest on real mobile devices and re-optimise the code until the desired performance is obtained.
Can you improve my site without completely rewriting it?
There are almost certainly improvements which can be made with little effort. If you are using a heavy framework it will probably not be possible to get a 100% performance score, but we can identify what is slowing your site down and find ways to minimise the impact. Please get in touch and we will be happy to take a no-obligation look at your site.
Related Tech Notes
WebPageTest
Diagnosing and fixing performance issues
Lighthouse Auditing
Measuring Website Performance