Every website owner is keen on improving page load time, which has been shown in many studies to affect user engagement, conversion, and revenue. In this article I’ll explain the basic definition of page speed, and provide quick tips that can help you improve page performance and make users happier.
What is Page Speed?
Page speed is often referred to as “page load time”. This is defined as the amount of time that passes from the time a user clicks through to a page, to the time all the page’s content is fully displayed. Technically, this is known as DOM Content Loaded, or just Content Loaded (CL).
Other measures of page speed are: the time between click and the moment the first byte is received from a server, known as time to first byte (TTFB), and first content paint (FCP), the first visible content shown rendered on the user’s browser. A separate metric is site speed, which incorporates the page speed for several sample pages belonging to a site, to create an overall measurement of the website’s performance.
Google PageSpeed Insights and GTMetrix are two excellent free tools that can help you evaluate page speed. Both Chrome User Experience Reports (CrUX) data, and provide overall page load time (CL), TTFB, and FCP, as well as valuable insights about what is causing pages to load slow and how you can fix them.
Why is Page Speed Important?
When it comes to page loading speed, every second matters. According to data from Google, as load time increases, the probability of bounce dramatically grows:
- Increasing page load time from 1 to 3 seconds increases bounce by 32%
- Increasing page load time from 1 to 6 seconds increases bounce by 106%
- Increasing page load time from 1 to 10 seconds increases bounce by 123%
If your page does not load within a few seconds, the chances a visitor will exit the page grow exponentially. In addition, slow web pages reduce engagement and your ability to convert and generate revenue from your website. Poor performance can also create a bad impression of your website or brand.
Page speed also plays an important role in search engine optimization (SEO). Google has announced on multiple occasions that page speed is a ranking factor for both desktop and mobile searches.
11 Ways to Improve Page Load Time
1. Lazy Loading
Lazy loading is an excellent way to improve page performance, by ensuring page elements load only when the user actually needs them.
Lazy loading is commonly used for images displayed below the fold – initially, placeholder images are shown, and when the user scrolls down to view the image, the full image is loaded. It can also be used to delay loading of videos, scripts, or entire application components (this is natively supported in some web development frameworks, like Angular).
The Intersection Observer API, supported by all modern browsers, can be used to identify when an element enters the user’s viewport, and load it on demand.
Lazy loading has several advantages. It improves initial page load time, and metrics like First Contentful Paint (FCP) which are part of Google’s new Core Web Vitals metric, which will become part of the Google search algorithm in May 2021. In addition, lazy loading conserves bandwidth, because it is not necessary to download all page contents for all users.
2. Enable Gzip Compression
Compression of static assets is one of the easiest and fastest ways to reduce page load time. It can reduce the size of files like HTML, CSS and JavaScript, enabling browsers to download the page much more quickly. Gzip is the most common compression standard, and is able to reduce the size of website code by up to 70%.
Do you need help with your website?
Services We Offer:- Medical Website Design
- Health WordPress Development
- Website Maintenance
- Medial SEO & Digital Marketing
Most WordPress performance plugins have an option to automatically enable Gzip compression. If your content management system (CMS) does not support compression, you can manually enable compression via an Apache web server by adding code to the website’s .htaccess file.
3. Minimize HTTP Requests
A major part of any web page’s loading time is the time spent downloading its images, stylesheets, scripts, and so on. Each element entails its own HTTP request, and so the more requests there are, the longer the process takes.
In order to decrease your page load time, you may want to decrease the number elements. But first, create a benchmark by seeing how many requests there are. Google Chrome’s developer tools are an excellent tool for doing so.
In a Chrome browser, right-click the analyzed page, select Inspect, and then click the Network tab. Expand the left border if you don’t see it. The table that appears includes the Name for each requested file, its Size, and the amount of Time that item takes to download. The total number of file requests appears on the bottom left.
Source: Chrome Devtools
Go through the list and see what’s redundant. Remove or optimize elements to reduce the number of files, requests, and consequently, page load time.
4. Optimize Images and Video
Another time waster in the page load process is images and videos. These sometimes require the user to download megabytes of data—especially if they are unduly large. Although the higher the resolution of an image is, the better its appearance on the page, pixels equal time.
Instead of reverting to low-quality images, you can retain quality and optimize images. For example, common optimizations involve changing to a more efficiently compressed file format, switching to more appropriate compression options (lossy or lossless) within the same file format, and resizing or cropping images to the size actually displayed. These optimizations and more can be performed by a host of image optimization plugins.
Reducing image size is an almost guaranteed way to reduce page “weight” and improve page load times.
5. Optimize Delivery of Cascading Style Sheets (CSS)
You can significantly reduce the size of CSS and JavaScript files using a process called minification. This speeds up load times, and also reduces the bandwidth consumed by your site visitors. Minification removes code or other content that is not required for code to run, such as code comments and spaces.
A related technique is uglification—automatically rewiring code to use short variable and function names. For example, a function named process() might be renamed to p7(). This makes code difficult to read, but much faster to process and download.
6. Utilize Content Delivery Networks (CDN) and Cloud Storage
CDNs maintain cached versions of content in multiple locations known as Point of Presence (PoP). Each location has cache servers serving content to visitors in that area. This means content is stored closer to the user, resulting in a shorter response time and faster page load. Today CDNs are widely available and easy to deploy using third party services.
Another way to speed up page load time is to use cloud storage for frequently accessed files. Cloud storage services like Amazon S3, Azure Blob Storage and Google Cloud Storage are based on a globally distributed, scalable infrastructure, and provide much better response times compared to a local server. You can also combine cloud storage with CDN to improve performance.
7. Reduce Your Redirects
Too many site redirects can lead to slow page load times. Whenever the page is redirected to another location, the HTTP request and response process is lengthened. In some cases, redirects may be unavoidable. However, removing unnecessary redirects from your site can significantly reduce page load times.
There are several ways to reduce redirects. One is to avoid moving content or creating internal links (which are automatically redirected in many CMSs). Another is to ensure that the top-level domain (TLD) is accessible with no more than one redirect.
Another best practice is to periodically audit your redirect table and ensure that no page is redirected more than once—if you have a chained redirection from page A to B to C, redirect A directly to C.
8. Use Asynchronous Loading for JavaScript Files
There are two ways to load script files such JavaScript and CSS:
- Synchronously—meaning scripts are loaded one by one according to their order in the page code
- Asynchronously—loaded in parallel to other content
Web pages are usually loaded from top to bottom. If script files are synchronously loaded, the page load waits until that specific file is fully loaded. However, with asynchronous loading, other parts of the page can continue to render while that script files are loading. Use asynchronous loading for all but the most important script files that are essential for rendering page layout.
9. Avoid Excessive DOM Size
The document object model (DOM) tree represents all the objects on a web page and their interrelations. When a web server passes a large DOM tree to the server, it sends a lot of unnecessary bytes. The browser needs to parse many nodes that may be initially invisible to the user, or may not be actually used in the current display mode. This slows down page load times.
It is ideal to keep your DOM to less than 1500 nodes, up to 32 nodes deep, with parent nodes having fewer than 60 child nodes. To keep to these numbers, create DOM nodes only when needed and discard them when you no longer need them to display content on the page.
10. Reduce the Size of Content Above the Fold
Aim to load all the content initially visible to the user without additional network round trips. The “congestion window”, the amount of compressed data the browser can download at one time, is roughly 14 KB. If content above the fold is larger than this size, the page will not load instantly.
To cram as much useful content as possible within this congestion window, change the loading order so that content visible to the user is first. For example, if your HTML loads widgets, plugins or navigation elements at the top of the code, change the code to load the body content is located at the top and loads first. The other tips I provided earlier in this article can also be used to reduce the amount of content initially loaded by the browser.
11. Optimize Web Caching
Web caching means that the web browser caches files for later use. Some of the content browsers can cache includes CSS files, JavaScript files, and images.
The first step to optimizing client side web caching is to put CSS and JavaScript code in external files, not inline as part of your HTML code. This helps the browser cache these files separately from the body text (because the same scripts typically repeat on many pages).
One more thing you can do is set HTTP response headers like Expires and Last-Modified—these reduce the need to re-download certain files when users return to your site.
Conclusion
In this article we covered a few strategies to improve page load speed, including:
- Using Gzip compression to deliver a smaller file size to users
- Optimizing images and video which are typically the heaviest resources on a web page
- Using CDN to deliver static assets from a server near to your user’s physical location
- Reducing redirects to avoid needless server-side delays
- Optimizing web caching to ensure visitors cache pages effectively on the client side
I hope you’ll be able to implement at least a few of these tips to boost page performance and improve your website’s results.
Image Source: Pixabay
