Page speed is a crucial factor in SEO ranking. A website that takes longer to load ranks lower than one with low page loading time. The shorter the first click on your site, the more likely someone will stay and browse through your content because they’ll have finished what you’re trying to show them faster (no matter how good it may be).
Websites must be quick to stay competitive and deliver a positive user experience in order to retain high pageviews per visitor, lower bounce rates, and enhance search engine rankings.
You’ve probably read a lot of articles on how to make a website quicker, which WordPress plugins will assist and which won’t, and other similar advice to help your site load faster. On both mobile and desktop devices, you may have gotten a PageSpeed score of 100/100.
But, more importantly, is a PageSpeed score of 100/100 sufficient? Is this a reference to absolute maximum performance? Gary Illyes, a Google executive, recently stated:
This article will explain why a PageSpeed score of 100 may not be sufficient. If you’re a performance fanatic, there are a number of intriguing optimization approaches you may use on your websites. If you aren’t, the suggestions below may be able to assist you remain ahead of the pack in terms of website performance. First, let’s go through the basics of the PageSpeed tool.
What is Google PageSpeed, and what does it mean? How Does It Work?
Google PageSpeed Insights evaluates a webpage’s performance on mobile and desktop and gives practical recommendations on how to enhance the site’s speed. The program then assigns a score to the website for both mobile and desktop, ranging from 0 to 100, with 100 indicating that the performance requirements have been met.
The initial contentful paint, the greatest contentful paint, the speed index, the overall blocking time, the time to interactive, and the cumulative layout change are among the criteria.
There are several articles available online that will help you better understand how the PageSpeed tool works, as well as how to utilize the tool’s recommendations and apply them to your website.
However, given you’ve come this far, I’m assuming you’re interested in learning more about the next steps you can take to make your website even quicker.
Isn’t the PageSpeed feature supposed to help you get the best performance possible?
Is it still necessary for me to be concerned about my performance?
The PageSpeed tool is useful and always speeds up your site, but a perfect result does not imply there is nothing more you can do. In most circumstances, you can still save a lot of money by reducing page weight and loading time.
So, let’s have a look at the further actions that may be taken if you’ve earned a PageSpeed score of 100/100.
1. Use the Browser Cache of a Competitor
If you have a rival that ranks somewhat higher than you for your keywords, the visitor is likely to visit their site before clicking on yours, if at all. Whether the user has already visited another site, you may reuse the visitor’s browser cache by looking at the site’s source code to determine if it utilizes a public CDN and, if so, which library.
If you and your opponent both use the same library(ies), such as jQuery 3.2.1, you may load it from the same public CDN.
As you may expect, this approach only works very infrequently, and in certain circumstances, if a visitor hits your website first and then your rival’s, it may assist your competitor.
This strategy is less likely to succeed against your rivals, but it may work in general. Using the public CDN to load all open source materials allows you to reuse public resources from the browser cache of third-party websites that the user has visited in the past.
Some free WordPress plugins, such as Easy Speedup and CommonWP, assist connect to open source themes, plugins, and libraries hosted on public CDNs automatically. These plugins enable it simple and quick to reuse browser cache from other websites on a large scale.
This strategy may not work for certain visitors, but it may work for others. The advantage is that even first-time visitors will notice a reduction in page load time. Furthermore, these open-source content are provided through CDN without incurring any bandwidth expenses.
2. Use Caution When Combining Files
Overall, bundling smaller files into one or more bundles is not worth the effort since it no longer improves page loading speed — in fact, it has the opposite effect and slows down mobile devices. Because HTTP/2 multiplexing allows several requests and replies to be sent at the same time, the cost of extra requests is reduced.
So, does your website code need any restructuring in order to return to the previous manner of doing things? On WordPress sites, you may wish to disable plugins that allow this functionality. This will decrease plugin bloat and help your site load faster.
3. Switch between different image formats
Images account for a significant amount of a page’s load time. As a result, they need much more thought than the routinely utilized picture enhancement procedures.
If your website includes photos, as I’m sure it does, you’ll need to figure out which image format is best for you. Certain picture forms are better suited to vectors, while others are better suited to images.
The table above might assist you in deciding which format is best for your picture requirements. SVG is a text-based format that can be compressed on the fly and can, in most cases, reduce the file size to less than that of PNG. JPEG supports lossy compression for photographs, whereas SVG is a text-based format that can be compressed on the fly and can, in most cases, reduce the file size to less than that of PNG.
New picture formats are also a factor to consider.
“Serve photos in next-gen formats,” PageSpeed advises. WebP, the only widely accepted next-gen format, is supported by just 77 percent of browsers, with Safari being the only one that does not. As a result, WebP is only utilized by only 4% of all photos on the internet.
As a result, adopting WebP as the principal picture format remains a no-no. The WebP format, on the other hand, provides such a significant decrease in file size that it is a highly appealing alternative for speed improvement. And, in most cases, serving pictures to browsers depending on their compatibility is a solid solution.
This may seem to be difficult, but it isn’t. This on-the-fly picture conversion may be automated using software. When you’re ready to start using WebP on your site, you have a few options:
- You may use the Easy Speedup WordPress plugin, which employs a cloud-based image optimization and conversion service that works for both WordPress and non-WordPress websites and offers the best image format supported by browsers. For non-WordPress websites, a PHP package that does this automatically without raising storage consumption is also available. The library is so efficient at this that I’ve seen it convert and optimize a PNG picture to WebP and decrease its size by 95% of the original image size for one of my customers. This isn’t usually the case, but it does happen sometimes. Your results may vary.
- WebP Express transforms photos to WebP and keeps numerous copies of each image on the server for on-site optimization and conversion, ensuring that the proper image is sent to the right browser. The disadvantage is that it bloats the file system, increases backup size, and complicates migration. They also impose a strain on the hosting since converting and optimizing photographs is a time-consuming process.
Converting pictures to WebP is cost-effective. The savings are significant, and in most situations, the entire page size is cut in half or less.
Side note: During Apple’s WWDC Keynote on June 22, 2020, they announced that WebP image capability has been introduced to Safari for the first time.
There’s still more.
Another essential consideration is to keep a watch on the impending JPEG XL picture format. It is nearing completion of standardization and may soon be finalized and supported by browsers. It’s based on Cloudinary’s FUIF image formats research and Google’s PIK image formats research. JPEG XL’s format established the following two design standards, making it the web’s picture format of the future:
- Visually lossless at moderate bitrates; high quality
- Decoding speed: for big photos, multithreaded decoding should be able to achieve approximately 400 Megapixel/s.
JPEG XL is designed to decrease picture size to 1/3 of its original size while maintaining image quality. It will be a universal format that can effectively accommodate both photography and non-photography pictures. So, if you want to make your websites even quicker in the future, keep a watch on browser support for JPEG XL. Early adopters have a big benefit.
4. Distinguish between dynamic and static compression
This is probably the simplest of the ways I’ll propose for speeding up your site significantly with no effort. Allow me to explain.
Gzip or Brotli compression for all compressible resources is commonly enabled by adding a piece of code from the web to the.htaccess or NGINX config file. This works, however there is still need for improvement. Because to improved Brotli compression, web pages may save up to 50 KB more. Do you want to know how to do it? It’s straightforward. Distinguish between dynamic and static compression.
There are two forms of compressible material that your web server hosts: dynamic and static. Dynamic material is created in real time and can’t be compressed ahead of time. This may be seen in HTML pages. Static material, such as CSS and JS, remains unmodified for a long period.
You may compress these assets ahead of time and setup your server to provide the compressed files on demand. Pre-compression enables you to employ a higher compression level, such as Brotli:11, that would otherwise be too sluggish for on-the-fly compression. If pre-compressing resources is challenging for you every time a file changes, you may utilize a 3rd party service like PageCDN to handle it for you.
5. Decrease the time it takes for a DNS lookup
The time spent resolving a domain name to its IP address is referred to as DNS lookup time. This IP address is then used to determine the server’s location on the Internet.
The DNS search for the domain name is the first high-latency job that browsers execute when a user views a website. A browser cannot connect to a server and perform an HTTP request unless it receives an IP address through a DNS query.
Reduced DNS lookup time should ideally be part of the Time-to-First-Byte optimization approach, however it seems that the PageSpeed tool does not take this into account since, in many situations, webmasters are unable to improve on this front. As a result, a large number of webmasters are unconcerned about their DNS provider’s performance.
There are a few strategies to cut down on DNS lookup time for individual users:
- Using a DNS service that is quick. Several providers offer worldwide average latency of less than 30ms, which is sufficient to make the DNS lookup process undetectable, as seen in the following snapshot acquired from DNS benchmarking tool DNSPerf.com.
- Increase the TTL of DNS answers to cache them. DNS recursive resolvers may store these replies near end-users across the world, considerably reducing DNS lookup time for all customers they serve.
6. Use Font Caching in Your Browser
Because of the Google typefaces that a plugin or theme utilizes on your website, you may get a 95 or 98 score instead of a 100, and you may believe that there isn’t much you can do to increase the score; nevertheless, there are several solutions to this issue.
The Google fonts CSS is only valid for one day. This is a benefit, not a flaw, since it helps the Google Fonts team to distribute updates to end-users much more quickly. The issue is that the PageSpeed tool expects you to cache your static files for 30 days.
If you want to solve this browser cache problem, you should first read an outstanding and extensive comparison of self-hosting vs. third-party font hosting.
Using a program that downloads fonts and CSS for you is one option. All you have to do now is choose the font families and your backward compatibility preference, and the downloadable file will be ready for you to extract into a directory within your project and serve fonts using CSS in your HTML. If you use WordPress, the OMGF plugin will take care of everything for you.
Easy Fonts is a Google fonts clone with some new CSS utility classes that make utilizing fonts more simpler and encourage quick development. This CDN-hosted package, fortunately, also resolves the browser caching problem.
Use HTTP/2 Server Push as a seventh option.
Server Push is a feature of the HTTP/2 protocol that enables web servers to preemptively push files to browsers before they ever ask for them, in the hopes that browsers will require them soon.
As a result, when a server gets a file request, it will deliver that file along with one or more extra files that it has been configured to send with the file that initiates Server Push. This eliminates the round-trip time for future requests and makes the resources accessible to the browser right away.
Server Push is a powerful performance feature that you should investigate. One thing to keep in mind is that you should not aggressively push files on every request. Browsers may already have a cached copy of a resource for you, and the browser must be able to access it. Pushing too many undesirable resources too quickly might waste a user’s bandwidth, especially if they are on a metered connection.
If you want to give it a go, this post describes how to set up Server Push for NGINX in detail. This CSS-Tricks article explains how to set up a cache-aware Server Push configuration. This blog article contains several suggestions and insights on how to use Server Push. This Server Push functionality is available in the same Easy Speedup plugin for WordPress sites.
Preload Your Host using HSTS
HSTS, or HTTP Strict Transport Security, is a method of enforcing HTTPS to ensure that attackers do not have a chance to change a request or response if the user requests a website via plain old HTTP.
The Google Chrome team maintains a HSTS Preload list to construct a directory of websites that support HTTPS for the full domain and its sub-domains. Most major browser makers, including Chrome, Firefox, Opera, Safari, Edge, and Internet Explorer, utilize this list of domains. Browsers always create a secure connection to a website that is on this list of HSTS Preloaded sites. Even if a user attempts to access the site over unencrypted HTTP, the browser will seek it up in the list and modify the request to HTTPS.
As stated on the HSTS Preload page, this approach requires a number of prerequisites, however it provides increased security. However, safety isn’t the only advantage. In the case of a website with multiple outdated backlinks, having it on this list prevents visitors from being redirected from HTTP to HTTPS. If you can meet HSTS’s criteria, the security and performance benefits justify its implementation.
Use Immutable Caching whenever possible.
The HTTP header ‘Cache-Control’ instructs the browser how long the file may be cached in the browser. This header is used to instruct the browser not to cache user-specific dynamic material such as HTML pages. For static information like as photos, CSS, and JS, however, the header becomes the single most important source of considerable bandwidth savings for recurring visits from the same user.
There isn’t a single cache-control setting that works for all static content, however. Some of the static assets change often, while others do not. For example, if you have a resource called jquery-3.4.1.min.js on your site and are certain you will never update it, you’ll need a mechanism to inform the browser that this file will never change.
Thankfully, the new ‘immutable’ directive gives you a means to tell the browser the same thing. When a browser sees the ‘cache-control: immutable’ header set for an asset, it knows that the file will never change and that the browser should not attempt to check the freshness file with the conditional ‘If-Modified-Since’ request.
This reduces roundtrip time and allows you to access the cached object without having to revalidate it. However, you must not use this header with a file that is essentially unmodified but may get a few updates once or twice a year, since the edits may not reach certain users without adequate cache invalidation in this situation. Open source libraries with version numbers in the URL, user-uploaded photos with a unique id or name, and CSS and JS bundles that acquire a new URL with each modification are the ideal candidates for this header directive.
10. Make the Most of Host Consolidation
PageCDN launched Host Consolidation as a way to speed up their customers’ webpages by eliminating traditional and accidental domain sharding expense. This method is simple to apply to your own website. PageCDN uses the multiplexing features of the HTTP/2 protocol in a novel manner with this method.
Domain sharding is the polar opposite of host consolidation. It uses HTTP/2 to provide requested resources in parallel, and it proxies all external resources via a single host (or domain) to save DNS lookups and connection costs. This reduced connection and DNS search time may help mobile and desktop users access websites faster.
PageCDN automates host consolidation and outlines numerous strategies to get the most out of it. Using the same idea, we can create the same effect on any website.
- Avoid using a lot of open-source CDNs. Try loading all of your open-source libraries from a single CDN if your site currently uses several CDNs.
- Google Fonts may be downloaded and hosted on your own server. The OMGF plugin for WordPress websites can complete the job in only a few clicks.
- Instead of building shards for parallel content delivery, abandon the traditional domain sharding strategy and load all assets from a single server. Allow HTTP/2 to handle the parallelization.
- Consider proxying all static material via a single server if your website utilizes static content from many hosts.
11. Don’t Use CSS Sprites
CSS sprites are a method of combining many pictures into a single large image and using CSS to show suitable pixels from it at various locations on a website. A few years ago, this was a relatively prevalent approach.
The disadvantage is that the entire page structure becomes more sophisticated and less adaptable as a result. Also, even if just one arrow is needed from the large picture, it must be loaded, adding to the page’s total weight. Using sprites to add another icon is time-consuming since you must first alter the picture and ensure that it does not include any pixels that have already been used on the site. This may result in a number of design flaws on the website. Changing the size of one HTML element that shows an icon from the huge picture will also necessitate resizing and repositioning all icons on the image that appear after that one.
This is inconvenient and provides little advantages, especially because HTTP/2 is available to do almost the same function. HTTP/2 allows numerous requests and replies to be sent over the same connection. Another advantage of not utilizing CSS sprites is that only pictures or icons that are absolutely essential for the website will load. Browsers may even prioritize above-the-fold icons and save below-the-fold graphics for later, allowing the page to load even faster.
If you’re using ‘CSS Sprites’ for little pictures, it’s best to let them load naturally and allow the browser determine how to prioritize them and which ones to request at once.
12. Update Frequently
WordPress 5.5 will be published shortly, and it will have native image lazy loading capabilities. As a result, sites who previously relied on plugins to provide this functionality will now benefit from a native slow load solution embedded into the WordPress core.
Lazy loading is an essential speed enhancement, and in this instance, millions of websites will be able to use it by simply updating WordPress to the latest version with a single click.
The same may be said for server software such as NGINX and Apache. At the present, server developers are working on HTTP/3, the next significant improvement to HTTP. HTTP/3 claims to make internet connections more dependable, secure, and quicker. Make sure to upgrade your preferred server as soon as this functionality is available.
Early versions of software are often under-optimized in terms of performance since speed is generally not a top priority at this time. However, as the product matures, the developer may begin to focus more on making it quicker in order to accommodate more customers and better compete with competing solutions. As a result, whenever a new version of any piece of software is released, it’s a good idea to upgrade to prevent problems, get security updates, and make your stack run quicker.
While the PageSpeed tool does an excellent job of identifying potential performance issues, there is still some tweaking that can be done to make the most of the current tools and technology. I’ve attempted to include all of the optimizations that I’m aware of. I’ve also included some more information that you may find useful. All of this will help you stay ahead of the competition.
Watch This Video-
Frequently Asked Questions
What is a good PageSpeed score?
A: It was reported that a good PageSpeed score is over 90.
How do you score a perfect 100 on Google PageSpeed Insights?
A: If your server is located in the United States, you can set it up to automatically answer this question.
How accurate is Google PageSpeed Insights?
A: Google PageSpeed Insights is a tool that measures the performance of your website or web application. It provides an estimate on how much faster or slower it would be if you made certain changes to your code, such as reducing load times and improving page speed score.