A few years ago, Amazon reported that for every 100-millisecond increase in the speed of their website, they noticed an increase in revenue by one percent. This was followed by Google’s announcement that a website’s page load speed was a factor for a site’s ranking in Google’s search results.
The process of optimizing your website’s page load speeds can be a never-ending process, much like running on a treadmill. Page speed optimization will always have room for improvement and will, therefore, never be entirely satisfactory. That said, here are some steps to increase your load speeds.
Minimize HTTP requests
According to a release by Yahoo, 80 percent of a page’s load time is spent downloading the various parts of a webpage viz, stylesheets, images, scripts, etc.
Since an HTTP request is made for every single one of these elements, the more on-page components a page has, the longer it takes for it to render.
The initial step when attempting to minimize requests is to narrow down and benchmark on the number of requests and how many requests the site actually completes.
With Google Chrome, the browser’s developer tools allow users to view the number of HTTP requests made by a site. To see the number of HTTP requests a site makes users can:
- Right-click on the page that needs to be analyzed and select Inspect.
- Click the Network tab.
In case the Network tab is unavailable, you may need to drag the left border further to the left and expand the sidebar.
The Name column denotes the files located on the page. The size of each file is shown under the Size column and the estimated time to load each file is indicated under the Time column.
The bottom left corner of the page displaces the total number of requests that the site has made. Users will be able to speed up the load time of their website by reducing this number. The most straightforward way is to review the set of files and identify those that can be deemed unnecessary.
While it may take some time to observe a noticeable difference, a few files can easily be considered as prime candidates for consolidating.
Use scripts for asynchronous loading
Scripts such as JavaScript and CSS can be loaded in two separate ways – synchronously or asynchronously. Synchronous loading involves loading the snippets one at a time, in the same order as they are displayed on the screen. In asynchronous loading, scripts are loaded simultaneously, which helps speed up the process. Users can also prioritize the loading of specific elements without having to wait for external sources to load.
If the browser finds an asynchronous CSS file or a JavaScript, page load will pause until the relevant archive is completely loaded. However, for asynchronous data, the browser will continue loading the other page elements.
For WordPress, users can check options besides Render-blocking CSS/JS when using WP Rocket’s Static Files tab.
You can also load CSS or JS files directly using the async or defer functionality in Javascript. Below is an example of the async option:
<script async src=”script.js”></script>
Save changes will allow users to verify that everything loads as intended.
Reduce server response time
One of the significant factors in determining how quickly a web page loads is the time it takes for the Domain Name System lookup. A DNS lookup is the process of identifying a specific website name on record. It can be imagined as a computer referencing the phone book for a contact number.
The time taken for this step depends on how quick the user’s DNS provider is. If users find that this is not fast enough, it might be time to change to a faster DNS service provider. To help choose a DNS provider, you can consult a DNS speed comparison report, like this one from SolveDNS, which provides monthly updates ranking the speed of different providers.
Make use of a Content Delivery Network (CDN)
Hosting media files on a CDN is one of the best ways to increase the speed of a website. This process alone can save up to 60 percent of the bandwidth and decrease the number of requests made by the site by 50 percent.
A CDN works by hosting files over an extensive network of servers across different geographic regions. Therefore, when a site receives a visitor from a particular region in the world, it downloads files from the server that is located closest to them. Since the bandwidth is spread across an extensive network of servers, the load on a single server is considerably reduced. This also protects websites from spikes in traffic and DDoS attacks.
Caching can help, but be careful
An efficient method of speeding up a website is to make use of caching. A cache is the short-term memory of a site. When you visit a site for the first time, a copy of the requested files is saved. These “cached” files are displayed during future visits.
However, users need to be careful when considering this option. Given that caching displays a previously saved version of the site to repetitive visitors, there is a possibility that they may contain outdated information. Dynamic sites that include aspects such as a shopping cart or social media feeds, like eBay and Twitter, can be especially problematic.
Fortunately, most plugins automatically clear the cache at regular intervals; however, users may need to do this task manually now and again. If a server is using Varnish Caching, this task can be easily accomplished via the free Varnish HTTP Purge plugin.
Decrease file size for image and video optimization
Images and media files are among the biggest drains on a site’s resources. HTML5 Video players and the related media files can help you greatly compress the size of the files. While they do go a long way in making a website look appealing and can supplement textual content, they also need a larger share of bandwidth and server space. This is especially noticeable when considering sites such as online stores or portfolio that may contain a number of HD images.
Image optimization is a natural process to implement and compresses an image’s size minus any noticeable adverse effect on its quality. The method can also be completely automated. Users can try using TinyPNG for image optimization. The tool is easy and free to use.
For video compression, you can use the modern HTML5 video players that have inbuilt compression capabilities. There are tons of open-source video players that allow you to perform these actions like Plyr, Video.js, Afterglow,
Minify and compress website files
Minification is a process that makes the code of a site more efficient by removing unnecessary content. This reduces the memory required and helps speed up the execution of the code.
With the right tools, you can easily achieve minification without having to interact extensively with the code. Examples of online tools include CSS Compressor and Minify, which offer numerous features and intuitive UI.
Conclusion
While attempting to increase the page load time can be a challenging task, the outcome will be a significant improvement in the overall performance of the website.
While some of the suggestions in the list above may seem relatively minor, each small step towards decreasing page load time can make a difference in the long run. As noticed by Amazon, every second saved can lead to conversions, revenue and success.
Opinions expressed in this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.
About The Author
Gilad David Maayan is a technology writer who has worked with over 150 technology companies including SAP, Imperva, Samsung NEXT, NetApp and Ixia, producing technical and thought leadership content that elucidates technical solutions for developers and IT leadership. Today he heads Agile SEO.