No one could argue that we’re living in the golden age of user experience (UX). Today, digital products are all about providing users with the best possible experience, a truly challenging goal to achieve—especially in web development. People have gotten used to engaging with companies digitally in straightforward and frictionless ways, so all web products aim to achieve a complicated balance between functionality, usability, and speed.
In other words, modern web development projects have the implicit goal of achieving web products that offer sophisticated features, are easy to use, and work at lightning speed. That objective is truly a tall order, even for the most experienced web engineers out there. Fortunately, there are little tricks that can help web development teams get there more easily.
That’s precisely what I’m bringing to you today: a list of little tricks that can help you and your development team work on one of the pillars of that trifecta. I’m talking about speed and, more precisely, about page loading times. People now expect web services to respond quickly to whatever they are looking for, so you need to be sure that you’re providing that dynamic experience.
There are a lot of ways of doing that. Here are 5 of them.
1. Favor Web-Safe Fonts
It’s easy to get lost in the details when it comes to web development—especially if those details bring a certain flair to the project’s looks. However, adding too much flair can certainly hurt your page loading times. That’s because there may be too many requests, too many elements to load, or too big files that impact the final loading time. There are many actions to take to prevent that from happening, but one that not many web developers pay attention to involves fonts.
When working on web development projects, many engineers don’t think twice about adding fonts from services like Google Fonts or Adobe Fonts. But using custom fonts can increase a page’s loading time, especially for users with slower connections. What’s more, a custom font can end up freezing the entire page, which might stop being responsive.
The solution? To use web-safe fonts, which are fonts that are installed in many operating systems. That way, users don’t have to download new fonts, as you’ll be using one that they already have installed. And while there might be some differences between fonts in different systems, you can always resort to a web-safe font stack to pick several fonts that look similar, so all users end up having the same experience when using your web products.
2. Minimize Time to First Byte
Most people obsess over how much time a page takes to fully load, but not many worry about how much time it takes to start loading. That time is known as “time to first byte” (TTFB) and it measures the amount of time a browser has to wait before it gets the first byte coming from the server. The longer it takes, the poorer the experience. That’s why Google recommends that the TTFB should be less than 200 ms.
As a server-side matter, you can work on your pages’ TTFB by focusing on the factors that influence it. Those include network issues, traffic, dynamic content creation, and web server configuration. You can’t do anything about the first 2, as they depend on third parties. But you can definitely do something about dynamic content creation and web server configuration.
When you work with dynamic content, the server you use needs to create a dynamic file before responding to the request. In other words, the server needs to engage with a database to build the content with PHP before it’s delivered to the browser. Naturally, that process can take a certain amount of time, which can hurt your loading times.
That’s why you need to enable caching, which can shave off precious time for returning visitors while boosting user experience. True, caching won’t affect first-time visitors, but it can significantly improve their experience the more they navigate through your web platform.
3. Use Lazy Loading for Images
Lazy loading refers to the process that prevents elements on a page from loading when they aren’t needed. Thus, the page doesn’t load all the resources it has but only the one the user needs at any given moment. This is a great practice to prevent hidden or unnecessary elements from loading, as it only focuses on loading essential resources upfront.
Applying this selective loading of elements has a significant impact on performance while also improving the use of the device resources and reducing the overall time it takes for a web product to load. In general terms, you can apply lazy loading to any element on your page, but I highly encourage you to at least use it with your images.
The best part about using lazy loading for images is that doing it is very simple. You just need to add loading=”lazy” to an image tag in the code. Doing that will indicate to the browser that that image only has to load when the user requests it, not sooner or later. Lazy loading is supported in most modern browsers, which means you won’t be impacting the experience for different users.
Aside from the code mentioned above, you can also introduce lazy loading through the polyfill attribute, the Intersection Observer API, or through event handlers. These 3 techniques are the best way to go if you want to bring browser compatibility up a notch. In other words, you should use them if you suspect your users are employing older or currently incompatible browsers.
4. Use a Content Delivery Network
Using a single server to host your site isn’t your only option. You can also use a network of servers to guarantee uptime, performance, and small loading times for all your visitors. Doing that prevents a server from clogging with requests, as it divides the request load between multiple servers. Besides, using such a network can improve loading times for users who are connecting to your web product from more distant locations.
That network of servers is called Content Delivery Network (CDN), which caches a site or web app on a global network of servers. Whenever a new user request comes up, the CDN responds by processing that request through the server that’s closest to the user who’s sending the request. The content that’s being served doesn’t change—what changes is that the server is closer, so the loading times are faster.
Using a CDN is a great way to eliminate loading lags and latency issues that might affect users that are far from hosting servers. Some of the most well-known CDNs include Cloudflare and StackPath (formerly MaxCDN). The former is a more comprehensive hosting solution that combines CDN services with security features, while the latter is more focused on CDN services. Both of them are very easy to use and set up and can help you rein in your pages’ loading times.
Both tools support CSS preprocessors and even work with TypeScript. But the most important thing is that they are very efficient at minimizing the size of diverse files—and they do so blazingly fast. Using those tools can help you dramatically reduce your loading times and provide a more satisfying user experience.
The Beginning of a Long Journey
Though the 5 suggestions above will help you decrease your loading times, the reality is that they are just a few examples of the many things you can do to optimize your web products. Optimizing the CSS delivery, prioritizing above-the-fold content through lazy loading, reducing redirects, and cutting down on the use of plugins are other easy-to-apply tricks that can help you with your loading times.
What I’m trying to say is simple: While you should definitely use the tricks I explained above, you should see them as the starting point of a longer journey. In that journey, you’ll need to dive deep into the world of web development to uncover the many ways in which you can handle loading times, a crucial part of providing a superior experience on the web.