Loading resources

Browsers limit the number of simultaneous connections to the same domain. For example, most modern browsers allow 6-8 concurrent connections per domain. This means you can have up to 6 active requests to the same server at the same time. This limit helps manage network resources efficiently

If the number of requests exceeds the browser's limit for concurrent connections, additional requests are queued until one of the existing requests completes. This means that your requests will still be sent, but there might be a delay if you're hitting the concurrent connection limit

Our goal is to prioritize lazy prefetching for our more important resources

What are prioirites in browsers ?

We have to change our resource priority from highest/high to low as much as we can

Tools

Resource Hints are a set of HTML techniques that allow web developers to guide browsers on how to optimize resource loading. By providing hints, developers can ensure that critical resources are prioritized or prepared in advance, leading to faster page loads and a smoother user experience.

Preload

<link rel="preload"> is an HTML tag used to prioritize the loading of critical resources needed for rendering a page. By preloading these resources, you can speed up page rendering, improve performance metrics, and provide a better user experience.

<link rel="preload" href="tablet.css" as="style" media="screen and (min-width: 768px) />

<link rel="preload" href="font.woff2" as="font" crossorigin="anonymous" />

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

<link rel="preload" href="script.js" as="script" />
<link rel="modulepreload" href="main.js" />        

Apply these rules ONLY to critical resources to improve loading performance. While the browser parses your HTML, it will simultaneously fetch these resources.

Prefetch

<link rel="prefetch"> is an HTML tag used to prefetch resources that may be needed in the near future, such as for the next page a user might visit. Unlike <link rel="preload">, which is meant for critical resources required for the current page, prefetch is designed for resources that aren't immediately needed but can improve user experience when the anticipated interaction occurs.

<link rel="prefetch" href="/next-page.html" as="document" />
<link rel="prefetch" href="style.css" as="style" />
<link rel="prefetch" href="script.js" as="script" />
<link rel="prefetch" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
...        

See the difference between preload and prefetch, preload - > critical, prefetch - > deferred

Preconnect

Preconnect is a resource hint that allows browsers to establish early connections to a server, even before a request for a resource is made. This includes tasks like DNS resolution, TCP handshake, and, if applicable, TLS/SSL negotiation. By using preconnect, you can reduce the time needed to fetch resources from external servers, ultimately improving page load speed and user experience.

use cases: knowing Where From, but not What You're Fetching, streaming Media

Speculation Rules

The Speculation Rules API is a web technology designed to enhance navigation performance by prefetching or prerendering future pages. It allows developers to specify rules for which pages should be loaded in advance, improving the user experience by reducing load times when navigating to those pages. This is particularly useful for multi-page applications (MPAs) rather than single-page applications (SPAs).

Rules can be specified using both an inline script and the HTTP response header simultaneously — all rules applied to a document are parsed and added to the document's speculation rules list.

NOTE: speculation Rules do not work in Safari and Firefox, so implement a fallback for these browsers

Early Hints (103 status code)

Early Hints (HTTP status code 103) is a mechanism to improve webpage load times by sending hints to the browser about critical resources before the final response is ready. This is especially useful for web pages that rely on various external resources like stylesheets, scripts, and images.

How to use ? Here is few options

1) you can do it with your NGINX, for example, with Early Hints Module

2) you can serve hints with a nodejs 18+

Priority Hints

The fetchpriority attribute is a web development tool that helps optimize resource loading by allowing developers to specify the priority of certain resources, such as images, scripts, or iframes. This attribute is particularly useful for improving performance metrics like the Largest Contentful Paint (LCP), which measures how quickly the largest visible content on a page is rendered.

<img src="lcp-image.jpg" fetchpriority="high">

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});        

CSS is render blocking resource, and you should purge all of unused CSS to minimize size

render blocking CSS, you will see the result in 5 seconds (simultaneously delayed)

* https://slowfil.es/ used in a background to emulate big CSS file

How to serve?

First of all i should say "Mobile First" is a silver bullet kinda sense

How does it look in code

This solution helps us avoid executing certain styles, but how does it help speed up the load time? The answer is splitting code by media rules. Stylesheets that will not fit will be deferred

So look at the Network Panel when i emulate phone (less than 768 px)

As you can see, priorities are changed by media requests, and the remaining styles will be loaded at the end of the queue

Of cource, you can hear something about CRP (Critical Rendering Path) and it's part Inline Critical CSS

Inlining critical CSS involves embedding the CSS necessary for the initial rendering of a web page directly into the HTML document. This practice can significantly improve the time to first render by reducing the number of HTTP requests and ensuring that essential styles are applied immediately.

I would say it is a good solution but have some restrictions, for example

• cannot be cached (each page/route will have own stylesheets)
• hard to support
• 'Content-Security-Policy' header can block inline-style
• to achieve really fast loading , you need to fit into 14 kilobytes (TCP "slow-start" restrictions. It can be partially solved with BBR. Network will be covered next time)

How to serve scripts?

Script without any attributes will block your page rendering until it’s done

I want to advise you to follow the list

• <script src async></script>
• <script src defer></script>to
• <script src type=module></script>
• <script type=module>...</script>

No need to transpile anymore

Move on to ESM only

How to debug?

WebPageTest is a tool designed to analyze and optimize website performance. It allows you to test your site's speed, identify bottlenecks, and get detailed recommendations for improvement. You can run tests from various locations, devices, and connection speeds to simulate real-world scenarios. It also includes features like Core Web Vitals analysis and Lighthouse audits for deeper insights.

Here you can see what blocks your rendering, what can be deferred, etc.

Best tool ever for debugging.

Now we have basic knowledge of how to load css, js, use hints, change priorities.

I wanted to include a section for Server Push here but here is the problem

Hope u're well!

Feel free to contact