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 tool we frequently use to monitor our clients' websites at PageSpeed.ONE.

The conference mainly focuses on frontend development, CSS, and web design rather than web performance, yet several talks and presentations were quite beneficial for my work at PageSpeed.ONE.

WarmUp with INP Metric

Immediately upon arrival on Sunday, we headed to a small workshop led by Andy Davies. Andy is a Performance Consultant at SpeedCurve, and it's worth following him on X (Twitter), where he shares valuable tips on performance (website speed).

At the workshop, Andy introduced us to the new INP metric, which will replace the current FID metric in the Core Web Vitals collection in March 2024. After a quick introduction, we learned how to measure INP, find the weakest points on a website, and a few tips on how to improve the INP metric.

Here are a few basic tips and tricks:

• The INP metric is closely linked to the Total Blocking Time metric.
• Fewer DOM elements lead to a better Total Blocking Time.
• If you have real user monitoring (RUM) set up on your website, you can find INP issues using the SpeedCurve tool.
• You can also find INP on individual pages via Google Search Console.

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

The procedure goes somewhat like this:

• Open an incognito window in your browser. Enabled plugins could affect the measurements.
• Open DevTools.
• In the Performance tab, enable Timeline recording and try navigating through the site, scrolling, and performing other interactions.
• On the Timeline, you can then see individual interactions and important information related to them.
• We are particularly interested in Long Tasks that occur after interactions.
• These Long Tasks need to be analyzed, split, or postponed.

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, demonstrations of new CSS features, and updates in Chrome's DevTools.

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

You can activate the tab by pressing Cmd+Shift+P and typing “Quick source”.

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

Jecelyn demonstrates how such recording can be conducted in her YouTube video.

Second Day of the Conference

The second day featured more technical talks. For instance, Christine Vallaure in her talk “Design Beyond Breakpoints” showcased many new features from the graphic tool Figma. Miriam Suzanne demonstrated what is possible in CSS using Container Queries and which features are still in development.

During lunchtime, there was an opportunity to sign up for another mini workshop with Andy Davies. This time, Andy, in a one-hour session, showed the most common mistakes that harm Core Web Vitals. He selected 3 websites from the audience and demonstrated the shortcomings directly on them. 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 downloaded as soon as possible.
• Utilize priority hints. Add the fetchpriority=”high” parameter to the image you want to prioritize, thus increasing its download priority.
• Postpone the downloading and processing of unnecessary JavaScript files.
• Ensure all images have specified dimensions width and height.

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

The conference was held in the beautiful historical 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.

Tags:INPCore Web Vitals