Today's podcast discusses front end performance, common issues, and ways to test and fix them. Topics include web vitals, client side performance problems like flickering and slow loading, the impact of tracking scripts, and tools to improve Drupal front end performance. They also introduce the WebP converter module, discuss optimizing images, render blocking resources, and strategies for enhancing front end performance in Drupal.
Optimizing image sizes and compression can significantly improve page load times and overall performance.
Using preload or prerender techniques for render-blocking resources can reduce delays in page rendering.
Managing layout changes, animations, and transitions can minimize screen jitters and provide a smooth user experience.
To improve First Input Delay, developers should optimize code execution, minimize main thread blocking, and prioritize responsiveness to user input.
Deep dives
Image Optimization
One common client-side performance problem is large image sizes. It is important to optimize images by resizing them to the appropriate dimensions and compressing them to reduce file size. This helps improve page load times and overall performance.
Render Blocking Resources
Another issue is render blocking resources, such as CSS and JavaScript files that delay page rendering. To address this, developers can use preload or prerender techniques to fetch these resources ahead of time, ensuring they are ready when needed and reducing delays in page rendering.
Screen Jitters
Screen jitters refer to the issue of elements shifting or moving on the screen, usually due to layout changes or animations. This can create a jarring experience for users. To mitigate screen jitters, developers need to carefully manage layout changes, animations, and transitions, ensuring smooth and seamless movements on the screen.
First Input Delay
First Input Delay (FID) measures the time between when a user interacts with a page and when the browser is ready to respond. Slow FID can occur due to long tasks or JavaScript code that blocks the main thread. To improve FID, developers should optimize code execution, minimize main thread blocking, and prioritize responsiveness to user input.
Identifying Performance Issues
The podcast episode discusses various performance issues related to front-end development. One important aspect mentioned is screen jitters, which occur when the main thread is blocked during rapid interactions such as scrolling or resizing. Another issue discussed is the flickering and jumping caused by hover effects when the hover space changes rapidly. Additionally, memory leaks and memory bloat are highlighted as common problems that can lead to out-of-memory errors and slow down a browser's performance.
Overcoming Tracking Script Conundrum
The podcast also addresses the challenges posed by tracking scripts and offers tips to overcome them. It suggests tracking only essential metrics and being mindful of the number of tracking scripts used. The importance of critically evaluating the necessity of each script and considering partial implementation, such as tracking a percentage of users, is emphasized. The use of tools like Google Tag Manager is suggested for better control and management of tracking scripts.
Additional Tools for Performance Optimization
In terms of tools, the podcast highlights several options for identifying and resolving performance issues. Web Page Test is recommended for running synthetic user testing and gaining an overview of performance metrics. The browser development tools in Chrome and Firefox are praised for their functionality, including network analysis, performance profiling, memory monitoring, and source code analysis. Lighthouse is also mentioned as a useful tool for evaluating overall site performance and identifying areas of improvement. The Drupal context is briefly touched upon, with suggestions to employ strategies like file minification, resource aggregation, and asynchronous/deferred loading of JavaScript to enhance front-end performance.
Today we are talking about Front End Performance, Common Front End Issues, and Ways to test and fix said issues with guest Andy Blum. We’ll also cover Webp Fallback Image as our module of the week.
Do you want your Drupal site to generate WebP images in the most optimal way? There are a number of modules for that, today we’re going to talk about…
Brief history
How old: created in Jun 2022 by pedrop
Versions available: 1.0.0 and 1.1.0 versions available, both of which support Drupal 8, 9, and 10
Maintainership
Actively maintained
Number of open issues
3, 2 of which are bugs
Has test coverage
Usage stats:
Almost 252 sites
Maintainer(s):
Most recent release is by dj1999
Module features and usage
Anyone using testing tools like Lighthouse will have seen suggestions to use modern image formats like WebP, and with good reason. They allow for much smaller image files at the same quality, which means a better user experience and less bandwidth used by both the server and the visitor. WebP is a natural choice because it enjoys over 95% browser support, but many sites still care about that other 5%
Drupal core added its own support for webp in 9.2, but without a fallback image, so browsers that don’t have WebP support have been out of luck
Contrib modules have allowed for generating a webp image and a jpeg fallback, to allow for universal support. Typically they have worked by creating the WebP variant from the output of a core image style, so after an image has been saved as something like a jpeg. That means the resulting WebP can’t compress as well, and can show compression artifacts
WebP Fallback Image is different because it allows Drupal core to generate the WebP image from the source file, and then creates the jpeg fallback.
Also worth noting that this module only creates the jpeg fallback when it’s requested, so it doesn’t add to the storage of your website unless it’s needed
Remember Everything You Learn from Podcasts
Save insights instantly, chat with episodes, and build lasting knowledge - all powered by AI.
