Improving Web Performance
Ways to make your website more performant.
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.
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.
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.
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.
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.
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.
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 🪁
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 💎
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
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.
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.
Image tools can lessen file sizes by stripping metadata, simplifying details, and increasing compression factors.
A few popular ones out there:
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
Two attributes can be added to a
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 🛍️
<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:
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.
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.
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.