Fast websites feel nice. Even a site that doesn’t look great can be forgiven if interactions are snappy and pages load in the blink of an eye. By contrast, it doesn’t matter how splashy and vibrant a homepage is if navigating to the online shop gives you time to wonder if something is broken. This feeling is not just anecdotal but borne out by research showing that site speed correlates to conversion rates and plays a role in search engine ranking algorithms. This is especially important in a time when most visitors are using mobile devices which may or may not have fast connections. This article kicks off a three-part series on how to make websites faster. In this first installment, we’ll focus on how the server—the system that hosts your site—plays a role in speeding things up.
On The Server
A web server is just the computer a website lives on. However, instead of running everything your laptop does—like video games, browsers, and music apps—a web server is pared down to do one thing and do it well: give you the web pages and associated files you ask for when you ask for them. When you ask a server for a web page, the server first sends an HTML document to your browser, then parses that document from top to bottom, gathering and rendering any additional files that HTML document asks for. Rendered HTML documents look pretty gnarly in the browser by default (black Times New Roman text w/ blue links), so they need CSS files to make them pretty (like background colors, fonts, and formatting), images to illustrate points, and JavaScript files to make them interactive (opening hamburger menus, sending forms, etc). Here are some tasks we can ask the server to do to help streamline the process.
Serve Next Generation Image Formats
Most people navigating the web are familiar with old school image file formats like JPG and PNG. You may also be aware of how massive these files can be if the images are large and highly detailed. Downloading huge files takes time and one of the best things you can do to make a website faster is to make those files smaller. Combined with using images that are properly sized to begin with (don’t use an image the size of a wall poster inside of a tiny icon), new file formats like WebP and AVIF reduce the size of image files by as much as 50% while retaining every bit of the quality. Servers aren’t capable of serving these new formats by default, however, and must be configured to do so.
File Compression
As mentioned in the intro to this section, the server first gives us an HTML document and then gathers any other files that document calls for to assemble the page. Servers can be set up to deliver compressed versions of these files that take much less time to download, resulting in faster load times. The most common compression type that gets employed is GZIP which is compatible with the broadest number of systems but newer compression types like Brotli developed by Google offer superior compression and is supported by most web browsers.
Server Caching
The first time you visit a web page, it tends to load slower than the second time. This is because the files that the server delivers to the browser have to be found and assembled from scratch on that first page load but the browser stores those files for a while so the server doesn’t have to fetch them all again the next time you visit that page. This is called browser caching and your browser is probably doing it right now unless you’ve specifically told it not to. Server caching allows the server to pre-gather all the files a given page needs instead of running around, finding every file a page calls for. This goes a long way in making sure that first visit is just as fast as the second.
Optimizing server performance is a foundational step toward building a fast, reliable website. From serving next-generation image formats to enabling compression and caching, the choices made at the server level can dramatically influence how quickly a page loads. But the server is only part of the equation. In the next installment of this three-part series, we’ll shift our focus to the code itself and explore how smart development practices can keep your site running smoothly and efficiently.