How to render your main content faster.
Updated
I can't see any useful content! Why does it take so long to load? 😖
One factor contributing to a poor user experience is how long it takes a user to see any content
rendered to the screen. First Contentful Paint (FCP) measures how long it
takes for initial DOM content to render, but it does not capture how long it took the largest
(usually more meaningful) content on the page to render.
Largest Contentful Paint (LCP) is a Core Web
Vitals metric and measures when the largest content element in the
viewport becomes visible. It can be used to determine when the main content of the page has finished
rendering on the screen.
The most common causes of a poor LCP are:
Slow server response times
The longer it takes a browser to receive content from the server, the longer it takes to render
anything on the screen. A faster server response time directly improves every single page-load
metric, including LCP.
Before anything else, improve how and where your server handles your content. Use Time to First
Byte (TTFB) to measure your server response times. You can
improve your TTFB in a number of different ways:
- Optimize your server
- Route users to a nearby CDN
- Cache assets
- Serve HTML pages cache-first
- Establish third-party connections early
Optimize your server
Are you running expensive queries that take your server a significant amount of time to complete? Or
are there other complex operations happening server-side that delay the process to return page
content? Analyzing and improving the efficiency of your server-side code will directly improve the
time it takes for the browser to receive the data.
Instead of just immediately serving a static page on a browser request, many server-side web
frameworks need to create the web page dynamically. In other words, rather than just sending a
complete HTML file that's already ready when the browser requests it, the frameworks need to run
logic to construct the page. This could be due to pending results from a database query or even
because components need to be generated into markup by a UI framework (such as
React). Many web frameworks that run on the server
have performance guidance that you can use to speed up this process.
Route users to a nearby CDN
A Content Delivery Network (CDN) is a network of servers distributed in many different locations. If
the content on your web page is being hosted on a single server, your website will load slower for
users that are geographically farther away because their browser requests literally have to travel
around the world. Consider using a CDN to ensure that your users never have to wait for network
requests to faraway servers.
Cache assets
If your HTML is static and doesn't need to change on every request, caching can prevent it from
being recreated unnecessarily. By storing a copy of the generated HTML on disk, server-side caching
can reduce TTFB and minimize resource usage.
Depending on your toolchain, there are many different ways to apply server caching:
- Configure reverse proxies (Varnish,
nginx) to serve cached content or act as a cache server when
installed in front of an application server - Configure and manage your cloud provider's
(Firebase,
AWS,
Azure) cache behavior - Use a CDN that provides edge servers so that your content is cached and stored closer to
your users
Serve HTML pages cache-first
When installed, a service
worker runs in the browser
background and can intercept requests from the server. This level of programmatic cache control
makes it possible to cache some or all of the HTML page's content and only update the cache when the
content has changed.
The following chart shows how LCP distributions have been reduced on a site using this pattern:
The chart shows the distribution for LCP from a single site over the last 28 days, segmented by
service worker state. Notice how far more page loads have a faster LCP value after cache-first HTML
page serving was introduced in the service worker (blue portion of chart).
Establish third-party connections early
Server requests to third-party origins can also impact LCP, especially if they're needed to display
critical content on the page. Use rel = "preconnect" to inform the browser that your page intends to
establish a connection as soon as possible.
< link rel = " preconnect " href = " https://example.com " >You can also use dns-prefetch to resolve DNS lookups faster.
< link rel = " dns-prefetch " href = " https://example.com " >Although both hints work differently, consider using dns-prefetch as a fallback for browsers that
do not support preconnect.
< head >
...
< link rel = " preconnect " href = " https://example.com " >
< link rel = " dns-prefetch " href = " https://example.com " >
head >Render blocking JavaScript and CSS
Before a browser can render any content, it needs to parse HTML markup into a DOM tree. The HTML
parser will pause if it encounters any external stylesheets () or synchronous
JavaScript tags (
