What are some effective tricks to reduce website load times?

There's definitely a connection between sustainability and performance. Have a look at some web development sustainability tips they recommend here: https://w3c.github.io/sustainableweb-wsg/#web-development.

It's all about finding the right balance with inline styles. Too much can cause shifts in layout, but not enough can lead to slow loads. Balance is key!

Here are some tricks I've found effective for cutting down load times: First, upload a simple `index.html` file and disable caching on your CDN and browser to gauge your server's response time. Ideally, it should be under 1ms. Inlining critical CSS really helps reduce render times and eliminates issues like Flash of Unstyled Content (FOUC). For images, using a tool like imgproxy with formats like webp and avif, and lazy loading them can make a big difference. Plus, serving self-hosted and subsetted fonts keeps things lightweight. The main goal is to minimize the use of JavaScript unless necessary.

In my previous job, I added a loading spinner with a minimum display time for users on slower connections. This trick helped create a perception of speed. Also, for critical features, I figured out what minimum content was necessary for users to begin interacting with the page while additional elements loaded in the background. Don't forget about minifying and compressing resources!

To effectively reduce load times, it's crucial to understand how browsers load pages. There's no silver bullet; you need to identify various factors that are slowing things down. This can involve minimizing resource sizes, lazy loading images, prioritizing essential content to load first, and optimizing caching strategies.