Improving my blog website’s page speed is crucial for enhancing user experience and search
What is page speed?
Page speed measures how quickly the content on your webpage loads.
Page speed is often mistaken for “site speed,” which actually refers to the page speed averaged across multiple page views on a website. Page speed can be defined by either “page load time,” which is the duration it takes for a specific page’s content to fully appear, or “time to first byte,” indicating how long it takes for your browser to receive the initial byte of data from the webserver.
Google’s PageSpeed Insights offers a tool to assess your page speed. It calculates a Speed Score by analyzing data from CrUX (Chrome User Experience Report) and provides insights into two crucial speed metrics: First Contentful Paint (FCP) and DOMContentLoaded (DCL).
How do I test my website’s page speed?
You can assess your site’s server speed using a third-party application. These tools provide insights into the site’s speed and performance. Some popular server speed checking tools include Pingdom, GTmetrix, WebPageTest, and DareBoost.
One popular option is Google’s PageSpeed Insights, which furnishes detailed reports on various aspects of your website’s speed, along with suggestions for improvement. Moreover, tools such as GTmetrix, Pingdom, and WebPageTest offer thorough analyses of your website’s loading times, server response times, and overall performance. Utilizing these tools allows you to pinpoint areas where your website may be experiencing slowdowns and optimize its speed to enhance user experience.
Why is website’s page important?
In essence, website’s page speed pertains to the swiftness with which your content loads when a visitor accesses a page on your website. It’s important not to conflate page speed with website speed; rather, page speed specifically denotes the loading time of an individual page.
Several factors can impact page speed significantly. Among the most crucial are:
- The quantity of images, videos, and other media files present on the page.
- The themes and plugins installed on your website.
- The coding and server-side scripts utilized by your site, including those specific to the page.
These elements collectively influence the loading speed of your pages, directly impacting your website’s user experience (UX). Slow-loading pages tend to deter visitors, increasing the likelihood of them navigating away from your site.
How to improve website performance
- Optimize your images by compressing them without compromising quality.
- Reduce the number of HTTP requests by combining files, such as CSS and JavaScript, wherever possible.
- Enable browser caching to store website data on visitors’ devices, reducing the need to download resources repeatedly.
- Eliminate unnecessary render-blocking JavaScript that delays page rendering.
- Minimize the use of external scripts, which can increase load times.
- Avoid excessive redirects, as each one adds time to the page loading process.
- Compress and minimize CSS and JavaScript files to reduce file sizes and improve load times.
- Utilize reliable third-party services for critical website functions, ensuring they don’t introduce unnecessary delays.
Optimize your images by compressing them without compromising quality for website’s page speed.
Image loading times can be prolonged on websites because image files are usually larger than HTML and CSS files. However, optimizing images can help alleviate this issue by reducing their resolution, dimensions, and compressing the file size.
In some cases, websites utilize images with higher resolutions, like 2x or 3x, to ensure quality display on high-density screens like retina displays. However, if your users aren’t using such screens, it could result in unnecessary bandwidth consumption and longer load times, particularly on slower mobile data connections.
Based on data from the HTTP Archive, the median weight of images on a desktop web page exceeds 1,000 KB.
Before adding images to your site, compressing them can significantly reduce weight and loading times. Many photo-editing programs offer “save for web” options for optimizing images, and there are free online tools like TinyPNG for compressing common file types such as .JPG, .PNG, and .TIFF.
Consider using the WebP format instead of traditional image formats like PNG or JPEG. WebP offers superior lossless and lossy compression, with Google reporting that WebP lossless images are 26% smaller in size compared to PNGs.
Reduce the number of HTTP requests by combining files, such as CSS and JavaScript, wherever possible
Every time a page redirects to another, your visitor experiences extra wait time for the HTTP request-response cycle to finish. For instance, in a mobile redirect pattern like:
example.com -> www.example.com -> m.example.com -> m.example.com/home
…each additional redirect slows down your page load.
Web browsers utilize HTTP requests to fetch various components of a webpage such as images, stylesheets, and scripts from a web server. Each request, particularly under HTTP/1.1, incurs overhead in establishing the connection between the browser and the remote server.
website’s page speed
Additionally, browsers typically impose limits on the number of simultaneous network requests. Consequently, if numerous requests are queued, some may be blocked due to an excessively long queue.
Your initial action should involve eliminating unnecessary requests. Determine the minimum render time needed for your website, and solely load essential external resources to meet that requirement.
Each HTTP request, whether for images, stylesheets, scripts, or fonts, contributes to your site’s total load time. As your site expands, these HTTP requests accumulate, resulting in a noticeable delay between user click-throughs and the actual loading of pages.
Enable browser caching to store website data on visitors’ devices, reducing the need to download resources repeatedly
Caching enables browsers to preload certain content, enhancing the speed of webpage delivery. Many content management systems (CMS) automatically cache the latest versions of your site, but you can also prolong this caching duration through CMS settings. This is particularly advantageous for static content on your site, such as logos, static images, downloadable files, JavaScript files, and stylesheets. If your CMS lacks this functionality, consider installing a caching plugin. The SiteGround Optimizer plugin is an excellent choice, offering comprehensive optimization features including caching, image compression, frontend optimizations, and more for WordPress websites. It’s user-friendly, free, and includes premium features like CSS, JavaScript, and HTML minification, GZIP compression, and various caching options.
Eliminate unnecessary render-blocking JavaScript that delays page rendering.
Before browsers can render a page, they need to construct a DOM tree by parsing HTML. If a browser encounters a script during this process, it must pause and execute it before proceeding. Google recommends minimizing the use of blocking JavaScript for optimal performance.
Webpages often contain extraneous code that loads before essential page content, resulting in slower overall load times. This issue is particularly prevalent on large websites where multiple contributors independently add code and content. Web page owners can utilize web performance tools to pinpoint unnecessary code on underperforming pages.
Minimize the use of external scripts, which can increase load times.
Scripted webpage elements sourced externally, like external commenting systems, CTA buttons, CMS plugins, or lead-generation popups, must load each time a page is loaded. Depending on the script’s size, these elements can slow down webpage loading or lead to partial loading (known as ‘content jumping’ or ‘layout shifting’), which can be particularly irksome for mobile users who may need to scroll to view the entire webpage.
Avoid excessive redirects, as each one adds time to the website’s page speed loading process.
Redirects direct users from the page they initially clicked on to another page. Often, they serve as an effective method to connect high-ranking, high-traffic pages to newly created content. However, the downside is that increased redirects can strain the server, leading to longer loading times. While it’s beneficial to utilize redirects initially to maintain content views, it’s essential to promptly replace old redirects with new content to ensure shorter load times.
Compress and minimize CSS and JavaScript files to reduce file sizes and improve load times for website’s page speed.
Reducing the size of JavaScript, CSS, and HTML can enhance your page speed. According to Google’s John Mueller, minification is a worthwhile strategy as it can decrease file size. Begin by eliminating line breaks, white space, or other non-essential elements in the code that don’t affect user experience. Here’s an example of standard CSS code:
body {
font: 36px Arial, sans-serif;
}
/* Main container */
#container {
color: white;
background: #ffbd17;
width: 630px;
height: 160px;
display: flex;
justify-content: center;
align-items: center;
}
/* Content */
#content {
background: #333;
flex: 0 0 10px;
}And this is what it looks like after minification: website’s page speed
body{font:36px
Arial,sansserif}#container{color:#fff;background:#ffbd17;width:630px;
height:160px;display:flex;justify-content:center;align-items:center}
#content{background:#333;flex:0 0 10px}The original version of code is designed for human readability, while the minified version simplifies it for easier processing by computers, thereby enhancing page speed. You can employ online minifier tools to minify your files, or use plugins like WP Rocket for WordPress websites.
It’s worth noting that some tools consolidate CSS and JavaScript files to boost performance, though it’s unnecessary if your site operates on HTTP/2 or HTTP/3 protocols. Combining CSS and JavaScript files only contributes to page speed improvement for sites using HTTP/1.
To determine your site’s HTTP protocol, open Google Chrome, right-click anywhere on the page, and select “Inspect.” Then, navigate to the “Network” tab and check the “Protocol” column to see which protocol each internal resource uses.
If the resources utilize “h2” or “h3” protocols (HTTP/2 and HTTP/3), combining CSS and JavaScript files is unnecessary.
Note: If the “Protocol” column is not visible, right-click the chart label panel, and select “Protocol” to display it.
Utilize reliable third-party services for critical website functions, ensuring they don’t introduce unnecessary delays
Hosting plays a crucial role in website’s page speed. Even a well-designed website can suffer from slow loading times if its origin server responds sluggishly to requests. To ensure optimal performance, website owners should opt for a server with an average response time of under 200 ms and a reliable track record.
