PHP UG Darmstadt, 13. April 2022

This article covers CSS-related techniques for optimizing Web Vitals.

Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy's new book (also, check a free PDF preview).

Learn about how cookie notices affect performance, performance measurement, and UX.

How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out.

Let’s make 2021… fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques.

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

We can add more features to our websites and have more tools and technologies at our disposal than ever before. The downside, however, is that our choices can significantly slow down our sites, much to the frustration of customers.

<blockquote>Maria Antonietta Perna highlights the benefits of lazy loading images on websites and shows five approaches to implement lazy loading for your website.</blockquote>

<blockquote>How much does page load time actually affect your conversion rates? </blockquote>

<blockquote>https://www.npmjs.com/package/subfont</blockquote>

<blockquote>CodeSandbox is an online editor tailored for web applications.</blockquote>

<blockquote>WPO Stats: A collection of case studies and experiments demonstrating the impact of web performance.
</blockquote>

<blockquote>TYPO3 Fluid Template Compiling / Analysis tool. Contribute to NamelessCoder/typo3-cms-fluid-precompiler development by creating an account on GitHub.</blockquote>

<blockquote>Addy Osmani is an engineering manager at Google working on Chrome. He is author of open-source projects like Yeoman, TodoMVC and Material Design Lite. He has also written books like Learning JavaScript Design Patterns with O'Reilly.</blockquote>

<blockquote>webhint, a linting tool for the web focused on best practices and flexibility for the end user</blockquote>

<blockquote>You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport.</blockquote>

<blockquote>Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance. In this article, we will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code.
</blockquote>