critical VS lighthouse

If the link element is placed inside of the shadow DOM, then it's not render blocking and you will experience a flash of unstyled content. That's what the lit docs are referring to.

If you place the link element inside the head of your document, then it is render blocking, which means the browser has to make two round trips to the server if the CSS file isn't in the cache before it render (one to download the HTML file, and then another after it discovers your link element, and has to download the corresponding CSS file).

> The best from both worlds is to embed a lightweight basic CSS stylesheet inline and the rest in cache-able external CSS files.

This is the absolute optimal way of doing it. You would have to analyze your styles to see which styles are applied to elements above the fold, then extract them and put them in an inline style tag. The rest of the styles would have to be downloaded via a link tag, but you'd have to place the link tag at the very end of the HTML body tag to prevent the browser from blocking as soon as it encounters the link element or alternatively use JavaScript to add the link element after the page has been rendered. There are tools to automate this for static sites [1], but doing this for dynamically generated HTML is kind of a pain, and I've found that browsers parse CSS so quickly that the overhead of just inlining it all is very low in many cases.

[1] https://github.com/addyosmani/critical

CLS is a pain in the arse. Extract your critical CSS and inline it https://github.com/addyosmani/critical although doing critical CSS badly makes things worse.

There is a tool that allows generating critical CSS and determining which CSS is critical and which is not. It helps to separate it into files, and there is also an npm package for that.

I am a fan of CSSWizardry and yet I find this post misleading. The examples shown are ways NOT to do frontend performance engineering.

The current best performant way to load JS is asynchronously as documented at https://web.dev/efficiently-load-third-party-javascript/.

And the best way to load CSS is with Critical Path CSS + Async CSS as documented at https://web.dev/defer-non-critical-css/.

The easiest way to generate Critical CSS is https://github.com/addyosmani/critical where you may suggest multiple resolutions.

I have found https://github.com/addyosmani/critical-path-css-tools to be a great resource to master critical path CSS which improves page render speeds. It helps build fast rendering sites, sometimes even sub-second renders given you have a low latency backend.

CSSOM tree has to be built before start rendering the page. To build it, the browser has to parse the CSS first. I said parse and not load because your CSS can be inlined (in a tag).

CSS is render-blocking, which means you can't start rendering the page until it's parsed. But it's not parser-blocking, which means the browser can continue parsing the HTML while the CSS is being downloaded (if it was linked externally).

The main takeaway here is that the larger your CSS file is the longer it will take to start rendering the page because it's a render-blocking resource.

Loading JavaScript

JavaScript is a parser-blocking resource. This means once the browser finds any JavaScript code, it will stop parsing immediately to download and execute the JavaScript. After the JavaScript is executed, the parser can continue parsing the document.

So JavaScript can delay rendering because the browser can't complete building the DOM until it has parsed the HTML.

JavaScript has to wait for CSSOM

To make things even worse, your JavaScript code can't start executing if there's CSS being downloaded. In other words, if you have Optimizing your page load time

Now we get to the fun part; making our pages load faster.

Getting into the details of each technique is beyond the scope of this article, but I will give you a quick overview of each one. After that, it should be easier to learn more about each one on your own.

Only load the used/critical CSS

Most of the time we load CSS that we don't need in the current page. So, we can split the CSS file into smaller ones and use each one based on what the current page needs.

A common case we can apply this to is loading some third party CSS code only in the pages that need them. For example, only use the code syntax highlighter CSS library on the pages that display code.

There's also a well-known technique called critical CSS. It's used to load only the CSS code that you see above the fold (the visible part of the browser on the initial load), and then lazy-load the rest asynchronously. And you can make this even better by inlining the critical CSS and lazy-load the rest externally.

Loading JavaScript asynchronously

Two popular attributes to achieve this: defer and async. Using either will not cause the browser to wait until they are downloaded to continue parsing.

The main difference between them is the time and order of execution.

Defer scripts start executing after the whole DOM is constructed but before DOMContentLoaded event is fired. This also means you should see the page rendered before executing the script.

Defer scripts execute in the order they were defined. So if script1 is above script2, script1 will always start executing before script2 even if script2 is loaded before.

Async scripts will start execute as soon as they are fetched. Async scripts don't wait for the DOM to be constructed, which means they can block the parser if an async script is fetched before the DOM is built.

Async scripts execute in the order they were fetched. The one that loads first executes first.

The rule of thumb is to use defer scripts when they depend on the content (DOM) of the page, and use async scripts for things that don't need the DOM such as analytics, etc.

Minify and compress resources

There are many build tools that help you minify your CSS and JavaScript. Minification is the process of removing any unnecessary characters for execution like spaces, comments, etc.

Compressing your resources is done by the server. gzip and brotli and the most popular compression types nowadays.

Minifying and compressing your resources will make them much smaller, which will improve your loading time.

Preloading important resources

The browser fetches the resources as it finds them while parsing the HTML. Sometimes it would be useful if we request these resource as soon as possible even before the parser finds them.

An example would be having two synchronous external JavaScript files below each other. If we don't use preload, then we have to wait for the first script to load and execute before loading the second one. But with preload we can tell the browser to fetch that second script even while it's parsing the HTML.

Preloading is also used for fetching other resources like CSS, images, fonts, etc.

Preloading can be done with . Example:

 rel="preload" href="style.css" as="style">
 rel="preload" href="main.js" as="script">

Enter fullscreen mode Exit fullscreen mode

Reduce your server response time

No matter how many optimization you do to your client code, it will not make your page load faster if your server takes a long time to send the requested HTML code.

Usually this is the least we can control especially if we don't maintain the backend code. But if we do, we can do things like optimizing the database queries (how fast we pull data from our database), using caching, compressing and minifying responses, upgrading the server hardware, etc.

Now you can learn more

In this article we barely scratched the surface of loading performance optimizations. But it should be easier now to dive deeper into each one as you should have a full understanding of how the browser loads pages.

An important part we didn't touch in this article is the tools we can use to measure the performance of the page and the impact of the optimizations we do. Google Chrome provides us with two good tools for this: the performance tab in the devtools and Lighthouse. So I encourage you to check them on your own.

A while ago I'd noticed that the version (or configuration) of the Critical packaged used by my Netlify build plugin was missing that fallback, so I manually added it to my Eleventy template, no big deal.

Defer or async css/js files — Don’t make leads wait for unnecessary files to download before showing something. In the case of CSS, there are a few tools for in-lining only what’s above-the-fold into your html.

Consider automating the process of extracting and inlining "Above the Fold" CSS using the Critical tool.

Critical CSS build by Addy Osmani is a useful library that extracts and inlines critical-path CSS in HTML pages.

Google Core Vitals now represent the most important metrics to focus on when it comes to technical SEO. Google Core Vitals are a set of standardized metrics that Google uses to evaluate the user experience offered by a web page and assign it a technical SEO grade. Several tools exist to measure and report technical SEO performance, but the most reliable is Google Lighthouse.

- referred to https://github.com/GoogleChrome/lighthouse/issues/6512 but didnt see network.disable error - added staticdistdir as per https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md,

There has been discussion about adding a visual indicator to make the mode more obvious, but it has not made it into Chrome devtools!

I haven't tried it, but you might be able to control throttling by using lighthouse to get performance data: https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md

When we implemented the MVP of the fintech app, we had a quite complicated form. At that time, I was still young and inexperienced. And eventually, we realized that our project was slowing down. We had to spend additional hours figuring out the reason. We had many unnecessary re-renders because we ignored basic rules related to props in React. I wanted to do everything possible to avoid such situations in the future. So, I added to the project linters like this and an additional starting configuration to package.json to run why-did-you-render. In short, this plugin issues a warning if something is re-rendered unnecessarily and suggests how to avoid it. Also, we included running Lighthouse in headless mode. Some people say that premature optimizations are bad, but for me, it's a principle: do it right from the start.

You can run a Lighthouse audit in two ways: either on the command line or in a browser. If you want to run audits on the command line, you will first need to install the Lighthouse command:

i wanted to run the lighthouse(lh) docker container on multiple EC2 instances in different regions. I'm thinking of triggering the EC2 instance with the lambda function once the lh container has audited the URL the results will be sent "SUB rest API" which will further update the UI

There's a link to what they mean by mobile network there (https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md) and it says:

Here's the non-psuedo code equivalent that can leverage CompressionStream rather than using a browserified-gzip-library: https://github.com/GoogleChrome/lighthouse/blob/437eb4d757c5...

We use it in Lighthouse for the exact same purpose, a URL #hash full of state. We found that modern browsers support 10mb of data in the hash. https://github.com/GoogleChrome/lighthouse/pull/12509#discus...

Lighthouse: This is an open-source tool developed by Google that allows you to audit the performance of your website. You can use Lighthouse to get a detailed report on your website's Core Web Vitals, as well as other performance metrics. You can run Lighthouse in Chrome DevTools or as a command-line tool.