On October 27th and 28th, MeasureWorks attended the ‘performance.now() 2022’ conference in Amsterdam. This was the first time, since the pandemic, that this conference could be held in-person again. This event is a great way for performance experts from all-over the world to come together, discuss techniques and learn from each other.
Fourteen expert guest speakers were invited to this event and delivered great insightful talks on how to review, optimize and monitor website performance, based on the best practices and the latest developments.
The guest speakers and the topics they presented were:
| Speaker | Topic | Speaker | Topic |
| Sharell Bryant | Continuous Learning | Ivan Akulov | React Concurrency |
| Katie Hempenius | What’s new in Performance? | Katie Sylor-Miller | Performance Detective |
| Sia Karamalegos | Early Hints | Léonie Watson | Accessibility = Performance |
| Stoyan Stefanov | Micro Benchmarks | Alex Russell | The Global Baseline |
| Tammy Everts | Performance Budgets | Dora Militaru | Performance Culture |
| Nic Jansma | Modern Metrics | Nolan Lawson | CSS Runtime Performance |
| Andy Davies | Third-Party Scripts | Harry Roberts | Optimising LCP |
Lessons
As participant and co-sponsor of this event, MeasureWorks attended to catch up on the latest techniques, trends, and modern metrics. The lessons from this conference will be used to further improve and stabilize the web performance of our customers.
Our top 10 take aways of this event are:
1. New tool to perform CPU Instruction Counting
Stoyan Stefanov, engineer on the WebPageTest.org team, has co-created a tool to perform CPU instruction counting. The tool is called ‘TICR’, which stands for: Thread Instruction Counter Tool. TICR can be a very helpful tool when you want to compare the amount of required CPU instructions between e.g., two different Javascript files that perform the same function to find out which one requires less instructions and is therefore the better option to improve on performance.
Find out more about TICR and visit Stoyan’s microbenchmark slidedeck.
2. New opensource Framework for finding Javascript memory Leaks
In the same talk, Stoyan Stefanov introduced another new tool he helped create and that is the memory leaks detection tool, called ‘MemLab’. Trying to detect memory leaks in your applications currently requires quite some manual work. With this new command line tool, all these manual actions are performed automatically, and a clear overview of the results is presented and shows if there are memory leaks and where they are.
Find out more about MemLab and visit Stoyan’s microbenchmark slidedeck.
3. Using Blink Debugging to find the most expensive CSS rules
Nolan Lawson, web developer at Salesforce, presented a great talk on ‘CSS Runtime Performance’, where he deep dived into performance issues around CSS, specifically around style and layout calculations.
Complex CSS selectors can be rough on performance. During this talk, Nolan showed an easy way to analyze the most difficult, and therefore longest running, CSS selectors used on a website.
By going to ‘chrome://tracing’ and enabling ‘blink.debug’, a block is added to the results called ‘SelectorStats’. If you click on that block, an overview displays the longest running CSS selectors. This can indicate where improvements should be made.
Visit Nolan Lawson’s presentation about CSS runtime performance.
4. Choose the best image import technique to make use of the preload scanner
Harry Roberts, Consultant web performance engineer at CSSWizardry, talked about one of the Google Web Core Vitals: Largest Contentful Paint (LCP). The LCP element, the largest element loaded on the page, can be a text block, but is most of the time image based. Text is always faster than loading an image, so if an image is used as an LCP element it is critical that you think about the way the image is loaded on your page.
There are several ways of importing an image. You can use an <img>-tag, image elements inside <svg> elements, video elements with a ‘poster image’ and loading background images via the ’url()’ function. However, some of these methods will improve your LCP score whereas the others will have a negative effect. During his talk, Harry presented the results of his own investigation of which method would be best to use. This led to the following conclusions:
- Using <img> tags for the LCP element is preferred, as they are fast and available to the ‘preload scanner’.
- Images in <svg> elements are bad for the LCP score, because the <image> element is not counted, and the image is hidden from the ‘preload scanner’.
- Currently, video elements are not counted as LCP. However, by adding a ‘poster’ image, the browser will identify it as the LCP element. Because the ‘poster’ behaves like an image, it is also available to the ‘preload scanner’.
- Loading background images through the ‘url()’ function is also bad, due to the fact that these images are usually ‘late discovered’ and they are hidden from the ‘preload scanner’. This will tank your LCP score.
You can visit Harry Robert’s presentation about Optimizing Largest Contentful Paint.
5. Resource Hint ‘Preconnect’ reveals visitor IP address to third parties without permission
Andy Davies, Web Performance Consultant at SpeedCurve, gave a great talk about third-party scripts and their impact on Performance. Third party scripts are an important factor in performance. As Andy stated “Speed matters… the longer our pages take to load the lower our visitor’s engagement is… lower page views, lower conversions, and lower revenue”.
Many sites load several third-party scripts. To improve performance, the resource hint ‘preconnect’ is used to establish early connections to the domains of those third-party scripts. However, ‘preconnect’ discloses a visitor’s IP address to the third party, but did the end user consent to this? It turns out that the use of the resource hint ‘preconnect’ can have extensive consequences. In Germany, one case even resulted in a lawsuit, so using this to improve performance of third parties should not be done lightly. Instead, think which third-party scripts are actually needed and if they need to be loaded immediately or if they can be loaded in after a user already agreed to the cookie consent
You can visit Andy Davies’ presentation about Third-Party Scripts.
6. Availability of a new online archive set: RUM Archive
Nic Jansma, Software Developer at Akamai, talked about Web Performance (modern) Metrics, Real User Monitoring (RUM) data and how it affects user happiness and business goals.
At the end of his talk, he zoomed in on a way to research metrics and RUM data with the use of a new developed tool sponsored by Akamai called: rumarchive.com.
Rumarchive is a publicly available and queryable dataset of anonymized RUM page loads and resource fetches. This tool is free to use and available for everyone to contribute to.
You can find out more at RUM Archive and visit Nic Jansma’s presentation about Modern Metrics.
7. Using Early Hints to improve performance
Sia Karamalegos, Web Performance Engineer at Shopify, delivered an interesting talk on the topic of ‘Early Hints’. She showed how ‘Early Hints’ will send hints and let the browser decide what’s received earlier while ‘HTTP2 Server Push’ proactively sends resources to the client. In addition, the resource hints ‘preconnect’ and ‘preload’ can be used with ‘Early Hints’.
However, ‘Early Hints’ should only be considered if the server has work to do before sending the HTML. Some examples are when the server is further away from the user than the edge/CDN server and if it’s for resources that don’t change too often.
Sia’s conclusion about ‘Early Hints’ is that it’s more promising than ‘HTTP2 Server Push’. The first results for ‘preconnect’ are also great, but more testing needs to be done before using it with ‘preload’.
You can visit Sia Karamalegos’ presentation about Early Hints.
8. Using the right approach to find your performance problem
Katie Sylor-Miller, Frontend Architect at Etsy, talked about what to do when you see a regression in your performance and how to analyze it. In this talk, she showed some real-world examples where performance changed for the worse and explained how she found out what went wrong. Analyzing these regressions basically came down to asking a specific set of questions per metric. For LCP, some of these questions were about changes in elements, characteristics and different loading orders. By answering them one-by-one, she could eliminate root causes and eventually zoom in on the root cause of the regression.
You should look at her slides about being a Performance Detective, as they show a very interesting method of finding out what went wrong with specific metrics.
9. Featured flags
Dora Militaru, Developer Relations Engineer at Fastly, revealed the power of programmable cell debt and how this could help in the continuous fight against performance degradation. For example, we learned that there is a downside of using feature flags that can easily be solved. Feature flags are being used to release new features in a controlled manner, but the feature flags often keep existing for a long time. This causes the old and new code to be part of the codebase. Ideally all feature flags should have an expiry date to force removing legacy code and avoiding technical debt.
You can visit Dora Militaru’s presentation about Performance Culture through the looking-glass.
10. These events rock!
The last take away of this event is not presentation-related, but simply about the event itself. Having these physical, in-person events is a great way to talk to other performance experts, exchange ideas and to try and create more awareness about ‘Performance’.
This was a great conference with world-class speakers that presented lots of valuable information and we look forward to the event next year!
Are you looking for a way to give your website a performance boost? Get started at MeasureWorks. Get 24/7 observability & alerting, performance reports, load/performance testing and more!
