If you've been reading about JAMstack, you've probably heard about the PRPL pattern.
What is it, and why does it speed up websites? Let's find out.
Websites that implement PRPL have the following properties:
<link> tags with
rel="preload" (which tells the browser to load a resource as soon as possible), and HTTP/2.
async on non-critical assets.
Rendering websites server-side also helps tremendously with the time to first paint.
Inlining JS and CSS has other drawbacks, such as increasing your HTML size, delaying "Time to Interactive", and being harder to maintain from a development perspective. Only use it when you see no other way to optimize the first pain time.
Google lowers your ranking when your performance is bad. Good website speed is an extremely relevant SEO parameter.
Update: Google recently (May 2020) even added Core Web Vitals as official ranking factors to their algorithm. These are performance measures that influence the user experience (loading speed, interactivity, and visual stability). This makes your site performance even more important than before.
Want to learn about a web-development framework with perfect Lighthouse scores out-of-the-box? Head over to my Gridsome series, where we build a blog from scratch!