Hey friends 👋

I'm currently reading the book Jump Start Web Performance, and hope to share some knowledge on how you can perhaps make your website more performant. ⚡

I want to start off by saying that we should measure before we even optimize. On many occasions, optimizing our site to be more performant would rather be more costly than beneficial.

Measure before and after, if you don't notice a difference, then it is better to not optimize, surely every optimization comes with a cost, but not always a benefit.

In my previous article, I covered ways to measure how performant your site is: Measure Web Performance.

Never forget the classic statement:

Premature optimization is the root of all evil.

Hoisting 🏡

Dedicated Server Hosting

When it comes to hosting, an option to have a more performant website, is to have a dedicated server hosting.

This means that your website is hosted on a physical server (or servers) which you own and is only used by you, hence it can be configured to your exact requirements.

Pros:

• You get fast performance, with a minimum risk of other sites affecting your speed (because your server is exclusively used by your site).

• You have access to further resources such as RAM, disks, CPUs, and other servers can be added.

Cons:

• Unless the server is fully managed, skilled technical staff will be required to maintain server updates, backups, security, and so on.

• Hardware failures can still happen.

• They’re expensive, usually a few hundred dollars per month, if not more.

Scale Resources

Most hosting services provide scaling options to increase the capacity of the processor, memory, disk space, or bandwidth.

It will usually come with an additional monthly fee, though if you have a dedicated server, it can be a one-off charge.

Switch Hosts

Switching hosts can have a great impact on the performance, if your new host has a faster infrastructure or is based in a location closer to your users.

These are some performance-related features to look for in a new host:

• a global infrastructure, or data centers geographically close to your main users

• specialist support for applications you’re using, such as WordPress

• HTTP/2 and simple SSL certificate installation

• domain nameserver and DNS configuration

• gzip and Brotli compression enabled

• options for automatic minification, caching, and image optimization

• attack detection and prevention

• usage and speed reports

• automated issue alerts

• good, independent reviews

• a knowledgeable and fast support service

Use a Content Delivery Network 🧰

A content delivery network can enhance the website's performance by distributing the load and serving assets from locations geographically closer to users.

CDN services exist that automatically proxy requests to your site. This typically requires your domain to point at the CDN’s name servers or set exact DNS records.

The benefits of this include:

• a faster, high-capacity infrastructure with more efficient delivery from many locations around the globe

• high availability: a CDN can continue to deliver cached files even when a host’s server fails

• improved SEO: Google rewards sites with faster response times cheaper costs: adopting a CDN is likely to cost less than scaling server resources

CDNs in some instances provide additional services, despite your host’s server facilities and limitations, such as:

• SSL certificates for HTTPS encryption

• load balancing, data compression, and the HTTP/2 protocol for faster transmission

• automatic file minification, image optimization, video transcoding, and email obfuscation

• attack detection and distributed denial of service (DDoS) prevention

• access blocking to specific IP addresses, countries, etc.

• server-based visitor analytics that doesn’t rely on client-side JavaScript

• custom error pages, redirects, authentication, AMP site generation, serverless APIs, and more

Use Image and Video CDNs 💾

Special CDNs dedicated to images and videos can be used in addition to or instead of a standard CDN.

The main benefits of using such a CDN:

• Asset Management: Original images can be uploaded, perhaps directly from users, where they can be stored, optimized, and managed via a user interface or API.

• Optimal Formatting and Compression: Regardless of the media uploaded, whether image or file, an image CDN or a video CDN can serve the file in the most optimal format.

• Art Direction, Sizing, and Effects: Some image CDNs offer an API that allows you to crop, resize, transform, or apply filters without affecting the original image.

Activate Server Compression 🪁

Assets can be compressed on a web server before being transmitted, then uncompressed on the browser. For text-based files such as HTML, SVG, CSS, and JavaScript, this can often lower the bandwidth by 60% or more.

According to W3Techs 2019 reports, compression was not activated on one in five websites.

Most solid web hosts enable compression by default, or do the work for you. Gzip compression can be activated on all popular web servers including Apache, NGINX, IIS, and Express.js compression middleware.

A CDN can apply asset compression even if it’s not enabled on your primary server.

Activate HTTP/2 🪄

HTTP/2 improves upon the HTTP transmission protocol.

HTTP/2 reduces latency by:

• sending data in a binary rather than text format

• compressing HTTP headers

• sending more than one file on the same TCP connection

• implementing Server Push, which can send a file before it has been requested

All popular servers and CDNs support HTTP/2 but fall back to HTTP/1.1 for older browsers.

Leverage Browser Caching 💎

When a browser downloads an asset from a URL, it stores that file locally so it can be used again. Files that don't change often, such as images, CSS and JavaScript, can therefore be downloaded once and used across multiple pages on a site.

The server should set appropriate Expires headers, Last-Modified dates, and/or adopt ETag hashes in the HTTP header.

Enable CMS Page Caching 🧶

By default, content management systems like WordPress build and return a page on every user visit, and caching is not enabled.

Caching plugins do exist though for many content management systems, they store the generated HTML after the first visit so all subsequent visitor requests receive the same page. The cached page is then invalidated when content is changed or after a specific time has passed.

Check Your Primary Images 📷

Images typically are responsible for a large part of page weight and perceived performance.

Take into account, using an image CDN can do some of the hard work for you.

Resizing / Responsive Images

Resizing has a great effect on image files, since halving the dimensions reduces the size by 75%.

Modern browsers support Responsive Images:

• Art Direction: Allows cropped images to be served for different layouts using the element.

• Resolution switching: Allows the browser to choose an appropriate resolution image by using srcset with x-descriptors.

Imagine if you were to serve the very same image file for mobile as the one on the desktop, the size is definitely unnecessary and can be reduced, resized, which would make the site more performant for mobile users.

Format

Choosing the correct format will greatly lessen image file sizes.

• The JPG/JPEG format is best for images with a lot of complex details.

• The PNG format is best for logos, diagrams, and charts with solid blocks of color.

SVGs, Scalable Vector Graphics, should be considered before you choose to display something as an image.

• Google indexes SVGs, the same way it does PNGs and JPGs, so you don’t have to worry about SEO.

• SVGs are usually much smaller in file size than PNGs or JPGs, which can even result in faster load times.

• Unlike bitmaps (images), SVGs can be scaled to any dimensions without increasing the file size or losing quality.

Genki wrote a wonderful article where he compares images with SVGs.

Compression

Image tools can lessen file sizes by stripping metadata, simplifying details, and increasing compression factors.

A few popular ones out there:

• ShrinkMe: Online, all

• Squoosh: Online, all

• SVGOMG: Online, SVGs

• TinyPNG / TinyJPG: Online, bitmaps

Load JavaScript at the End of the Page 🎀

When the browser encounters a <script> tag in the HTML, it stops all other actions while it downloads and parses the code. This is known as a render-blocking process.

It’s normally more effective to place <script> tags at the bottom of the page before the closing <\body> tag. This makes the site more performant because the content is viewable before it tries to process JavaScript.

Two attributes can be added to a <script> tag to ensure JavaScript is loaded in the background without blocking the render process:

• Defer: The script is executed when the DOM is ready and shortly before the DOMContentLoaded event. All deferred scripts are run in the order they’re referenced on the page.

• Async: The script is executed once it has downloaded. This could happen at any point during or after the page has loaded, so it can’t have other script dependencies.

Preload Assets 🛍️

The HTML <link> tag has a preload attribute. This specifies the resources the page requires so downloading can start right away instead of having to wait for its reference in the HTML.

You will also have to set another two attributes:

• href: The path to the resource.

• as: The type of resource.

The following example is taken from MDN:

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

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

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>

Lazy loading images and iframes 📹

Load times, bandwidth, and device requirements can be reduced by lazy loading images and iframes when they’re scrolled into the viewport, and not loading all the images just because the site has loaded, despite them not being visible yet.

<img src="picture.jpg" alt="..." loading="lazy">
<iframe src="video.html" title="..." loading="lazy"></iframe>

The following excerpt is taken from MDN regards to the values that can be set:

• eager: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).

• lazy: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.

I highly recommend reading Native image lazy-loading for the web!, where Addy also shows how to deal with browsers that don't support the native way of lazy loading.

Reduce client-side code 🧹

Finally, the last point.

By shipping less code, there is less for the browser to parse, process, download and so on.

By reducing the number of HTML DOM nodes the rendering and reflows are performed more effectively. Modern ways of styling the page's structure such as Flexbox and Grid allow you to remove wrapper elements that may have been necessary for float-based designs.

Use JavaScript sparingly. If the browsers you support can do something in HTML and/or CSS alone, that should be your preferred option.

Modern browsers have implemented many commonly used features that previously required scripting, such as form validation, field auto-complete, animations, video, expanding text, modal dialogs, and more.

Conclusion ⚡

There are ways we can make our site performant, the best, obvious and most simple way is just by shipping less code.

I didn't go in-depth of the various ways I mentioned, rather touched the surface, but I hope to have enlightened you on ways we can improve our site's performance.

I will surely refer back to this article when trying to look for ways on making a site more performant, and likely dig deeper if I notice a way that can be applied in my situation and would be beneficial.