We've all seen a really slow website. We've been there. We've done that. Clients complain I paid you to make me a website but not something that needs ages to load. Frustrating! We lose hope in our development skills and maybe even over time turn over to page builders that will kill our development skills but won't speed up a website as much.

Website performance gets separated into a couple of segments. We'll go over each segment so you can better understand how to improve each of them.

Things you need to know about: First Contentful Paint

FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white canvas elements and SVGs on your page are considered DOM content; anything inside an iframe isn't included.

Common Problem I: External fonts loading time

One issue that's particularly important for FCP is font load time. Check out the Ensure text remains visible during Webfont load post for ways to speed up your font loads. Fonts being fetched from external resources might take a bit before they actually load on the website, therefore it's important to replace those fonts with a system one till they are fully fetched and shown publicly.

How?

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:

@font-face {
  font-family: 'StefanStax';
  font-style: normal;
  font-weight: 400;
  src: local('StefanStax Regular'), local('StefanStax-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font.

Tricks

Google Fonts:

Add the &display=swap parameter to the end of your Google Fonts URL:

<link href="https://fonts.googleapis.com/css?family=StefanStax:400,700&display=swap" rel="stylesheet">

Fonts are only a fragment of problems you may be experiencing. The second most common problem will be called...

Common Problem II: Eliminate render-blocking resources

Render-blocking resources are exactly as their sound, elements that block your page from being rendered. First, we have to understand why are some resources being flagged as render-blocking resources.

Which Scripts and Styles get flagged?

Scripts that are located in your <head> and that do not have defer nor async attribute will get flagged by most website crawlers. Styling sheets that do not have disabled nor media attribute that matches the user's device.

How to identify critical resources?

The first step to reducing the impact of render-blocking resources is to identify what's critical and what's not. You can see each script's evaluation in the developer's tools on chrome. Once you explore a script you'll see a line that is both green and red in color will speculate something obvious.

The green-colored part is the code that is being actually shown on the page you've visited, meaning that code is necessary in order to display desired functionality on the viewed page.

The red-colored part is the code that is not being shown on the current page or that is not currently needed.

How to eliminate render-blocking scripts

When you figure out which part of the script is needed straight up on the load, move that part into an inline script tag on your HTML page. When the page loads it'll have what it needs to handle the page's core functionality.

If there's code in render-blocking URL that's not critical, you can keep it in the URL and then mark the URL with async or defer attributes.

How to eliminate render-blocking stylesheets

Alike inline code in a <script tag, inline critical styles required for the first paint inside a <style> block at the head of the HTML page. Then load the rest of the styles asynchronously using the preload link.

Stylingsheets file split up

The approach to eliminate render-blocking styles is to split up those styles into different files, organized by a media query. Add media attribute to each stylesheet link. When loading a page browser will only block the first paint to retrieve the stylesheets that match the user's device.

Minify CSS

Use online editors to minify CSS on the go and minify the total fine size sent to the user

Common Problem III: Properly Size Images

All your images that aren't properly sized will flag this warning. Resize images to save data and improve page load time

The main strategy for serving appropriately-sized images is called "responsive images". With responsive images, you generate multiple versions of each image and then specify which version to use in your HTML, CSS using media queries, viewport dimensions.

It's frequent to use Image CDNs as another strategy for serving appropriately-sized images, which is pretty much a web service for transforming images. We'll pinpoint this in another blog.

People also tend to use the SVG format. The good thing about SVG that it can be scaled to any size.

Common Problem IV: Images elements do not have explicit width and height

Images without dimensions

Always include width and height size attributes on your images and video elements. Reserve space required with CSS ratio boxes. Taking an approach like this one ensures that the browser can allocate the correct amount of space in the document while the image is loading.

Adding set width and height right on will save time for your browser to do reflow and re-layout as it knows how much space to reserve for your images before they are even fetched.

For example:

<img src="stefanstax.jpg" width="400" height="200" alt="Stefan Stax person holding a blue book" />

We haven't added px on the width and height above. This way image would stretch to fit this space, regardless of whether the true dimensions matched or not.

When we got introduced to Responsive Design we started to omit width and height and started using CSS to resize images instead.

img {
 width: 100%;
 height: auto;
}

The downside to this approach is that space could be only allocated for an image once it began to download and the browser could determine its dimensions. As images loaded in, the page would reflow as each image appeared on the screen. It became common for text to suddenly pop down the screen. No bueno for UX.

This is exactly where the aspect ratio comes in. The aspect ratio of an image is the ratio of its width to its height.

If stefanstax.png has a 360px height, width is 360 x (16/9) = 640px if stefanstax.png has a 640px width, height is 640 x (9 / 16 ) 360px

Modern best practice

Modern browsers now set the default aspect ratio of images based on an image's width and height attributes so it's valuable to set them to prevent layout shifts. Thanks to the CSS Working Group, so we need to set width and height as normal

<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
<img src="stefanstax.png" width="640" height="360" alt="Person holding a blue book" />

and the UA stylesheets of all browsers add a default aspect ratio based on the element's existing width and height attributes:

img {
  aspect-ratio: attr(width) / attr(height);
}

What about responsive images?

When working with responsive images, srcset defines the images you allow the browser to select between and what size each image is. Ton ensure <img> width and height attributes can be set, each image should be the same aspect ratio.

<img
  width="1000"
  height="1000"
  src="stefanstax-1000.jpg"
  srcset="stax-1000.jpg 1000w, stax-2000.jpg 2000w, stax-3000.jpg 3000w"
  alt="Person with a blue book"
/>

Website optimization Part I ends here

Programming & Motivation with Stax

Programming & Motivation with Stax

Optimize your React website like a pro

How to properly optimize React website works for other website platforms as well