How can developers get their websites to load faster?
Website speed has a huge impact on user experience, SEO, and conversion rates. Improving website performance is essential for drawing traffic to a website and keeping site visitors engaged. Here we review steps developers can take in order to make a website faster:
Test website performance
Website speed tests assess how a website is performing. Testing a website regularly can help developers track performance downgrades or improvements. A speed test should also help developers identify some or all of the areas slowing website performance, and where the areas for improvement are.
There are plenty of high-quality site speed tests for measuring performance, many of them free. WebPageTest.org (which partners with Cloudflare) has several free tests and produces detailed breakdowns of how quickly individual elements of a page load. WebPageTest.org also allows developers to test websites for different devices and network connection speeds.
Google also offers PageSpeed Insights for detailed performance testing. Google Chrome DevTools can also help developers in assessing their site's performance; the Network tab shows all HTTP requests, how large the requested assets are, and how long requests take before they're fulfilled.
Use a CDN (content delivery network)
CDNs boost the speed of websites by caching content in multiple locations around the world. CDN caching servers are typically located closer to end users than the host, or origin server. Requests for content go to a CDN server instead of all the way to the hosting server, which may be thousands of miles and across multiple autonomous networks from the user. Using a CDN can result in a massive decrease in page load times.
Images comprise a large percentage of Internet traffic, and they often take the longest to load on a website since image files tend to be larger in size than HTML and CSS files. Luckily, image load time can be reduced via image optimization. Optimizing images typically involves reducing the resolution, compressing the files, and reducing their dimensions, and many image optimizers and image compressors are available for free online.
Reduce the number of HTTP requests if possible
Most webpages will require browsers to make multiple HTTP requests for various assets on the page, including images, scripts, and CSS files. In fact many webpages will require dozens of these requests. Each request results in a round trip to and from the server hosting the resource, which can add to the overall load time for a webpage. Additionally, with resources loaded from several different providers, a problem with one of the hosts could impact the webpage's ability to load quickly, or at all.
Because of these potential issues, the total number of assets each page needs to load should be kept to a minimum. Also, a speed test should help identify which HTTP requests are taking the most time. For instance, if images are causing a page to load slowly, developers can look for a faster image hosting solution (such as a CDN).
Use browser HTTP caching
The browser cache is a temporary storage location where browsers save copies of static files so that they can load recently visited webpages much more quickly, instead of needing to request the same content over and over. Developers can instruct browsers to cache elements of a webpage that will not change often. Instructions for browser caching go in the headers of HTTP responses from the hosting server. This greatly reduces the amount of data that the server needs to transfer to the browser, shortening load times for users who frequently visit certain pages.
Minimize the inclusion of external scripts
Any scripted webpage elements that are loaded from somewhere else, such as external commenting systems, CTA buttons, or lead-generation popups, need to be loaded each time a page loads. Depending on the size of the script, these can slow a webpage down, or cause the webpage to not load all at once (this is called 'content jumping' or 'layout shifting' and can be especially frustrating for mobile users).
Don't use redirects, if possible
A redirect is when visitors to one webpage get forwarded to a different page instead. Redirects add a few fractions of a second, or sometimes even whole seconds, to page load time. When building a performance-optimized website, every second counts. Redirects are sometimes unavoidable, but they shouldn't be used if not necessary.