Report from SmashingConf Freiburg 2023 🥨

At the start of the new school year, I attended a conference organized by Smashing Magazine in Freiburg. One of the main sponsors was SpeedCurve, whose tools we frequently use for monitoring our clients' websites at PageSpeed.ONE.

The entire conference leans more towards frontend development, CSS, and web design rather than web performance, but several talks and presentations were quite beneficial for my work at PageSpeed.ONE.

WarmUp with the INP Metric

On Sunday, right after arrival, we headed to a smaller workshop led by Andy Davies. Andy is a Performance Consultant at SpeedCurve, and he's worth following on platform X (Twitter), where he shares valuable tips on web performance (speed).

During the workshop, Andy introduced us to the new INP metric, which will replace the current FID metric from the Core Web Vitals collection in March 2024. After a quick introduction, we learned how to measure the INP metric, identify the weakest spots on the web, and some tips to improve it.

Here are a few basic tips and tricks:

• The INP metric is closely tied to the Total Blocking Time metric.
• The fewer DOM elements you have, the better your Total Blocking Time.
• If you have real user monitoring RUM set up, you can identify INP issues using the SpeedCurve tool.
• You can also find INP issues on individual web pages via Google Search Console.

If you don't have the means to measure all users on your site, you can manually identify INP issues.

The process is roughly as follows:

• Open an incognito browser window. Enabled plugins might affect the measurements.
• Open DevTools.
• In the Performance tab, enable Timeline recording and try clicking through the site, scrolling, and performing other interactions.
• On the Timeline, you’ll see individual interactions and important information about them.
• We are particularly interested in Long Tasks that occur after interactions.
• These Long Tasks need to be analyzed, broken down, or deferred.

You can also learn how to test other Core Web Vitals metrics in our article by Zuzana Šumlanská.

First Day of the Conference

On the first day, we attended lectures on design systems, web accessibility, showcases of new CSS properties, and new features in Chrome DevTools.

In her talk “Modern Web Debugging,” Jecelyn Yeen showed numerous tips from DevTools. Personally, I was most intrigued by the Quick Source tab, which provides a quick preview of files that you can then edit directly on your local disk using the Overrides function.

You can enable the tab via the command Cmd+Shift+P and type “Quick Source”.

Another tip that caught my attention is the ability to record a sequence of commands on the web using the Recorder function. This allows you to send the sequence in JSON format to a colleague, who can then replay the commands.

Jecelyn demonstrates how such recording can proceed in her YouTube video.

Second Day of the Conference

The second day featured more technical talks. For example, in her talk “Design Beyond Breakpoints,” Christine Vallaure presented many new features from the graphic tool Figma. Miriam Suzanne demonstrated what can be achieved in CSS using Container Queries and which properties are still in the works.

During lunch, there was an opportunity to sign up for another mini workshop with Andy Davies. This time, Andy demonstrated the most common mistakes that ruin Core Web Vitals in a one-hour session. He selected three websites from the audience and directly showcased their shortcomings. These were mostly recurring issues that worsen the LCP and CLS metrics.

So, what should you avoid on your website?

• Avoid using a large number of external web fonts.
• Use only the Woff2 format for web fonts.
• Do not apply lazy loading to an image that is the LCP element and needs to be loaded as soon as possible.
• Use priority hints. Add the parameter fetchpriority=”high” to the image you want to prioritize to increase its download priority.
• Defer the download and processing of unnecessary JavaScript files.
• Ensure that all images have specified width and height dimensions.

It was a nice and practical demonstration that even small adjustments can quickly improve the Core Web Vitals LCP and CLS metrics.

The conference took place in the beautiful historic city of Freiburg in western Germany. Evenings were spent tasting local beer and German cuisine. Everything was excellent, and I am already looking forward to another joint conference.

Tagy:SmashingConfINPCore Web Vitals