We Seek Page Load Speed and You Should Also
We do find that utilizing page metrics reports from both GTMetrix and Google PageSpeed Insights (GPSI) is essential to understanding fully how to approach page speed solutions for a given page on a web site. Each reporting tool emphasizes different metrics. To put that another way, the valuation and impact on scores for each metric is slightly different per reporting tool. An example of this would be the apparent high price paid, according to GTMetrix, for not using a CDN.
The current iteration of GPSI, since September, 2021, has changed up it’s testing methods established in November, 2018 – adding Core Web Vitals as important highlight to a good user experience.
The net result of those changes have scores obtained previous to the change dates now reporting significantly less regarding Mobile scores. This for a number of reasons, not all of which will make immediate sense.
The most important aspect, that which should be tackled first in our opinion, is to provide site-wide cache control using header expires, GZip compression, keep-alive connections, and Vary: Accept encoding directives in the server’s htaccess file for all local resources. Then, and only then, do we begin tackling render blocking issues — those items responsible for causing the browser’s render engine to pause it’s activity while waiting for additional resources to be available to it — items such as deferred delivery of Javascript; removing cache-busting query strings from static resources; minifying on-page code (HTML plus inline CSS/inline JS blocks). These aspects are provided for using PHP-based scripted functions added to the active theme’s functions file. We also optimize the order of styles and scripts, and provide inlining of selected CSS to prioritize content for Above-The-Fold content rendering.
Optimizing images is a very big deal, impacting directly the total page size – here we suggest using the utility plugin, EWWW Image Optimizer, to provide lossless compression of JPG/PNG resources. It is also important to note that many contemporary themes do not specify image dimensions in HTML as part of a responsive layout strategy. Therefore, it is imperative to select images no larger (width/height) than the largest size actually used in layout. Optimizing images should also include the use of lazy-loading for inline images, which we recommend using the A3 lazy load plugin for that functionality.
To be sure, you only have control over those resources within the immediate scope of the site. Third-party code can be excessive, particularly when it comes to ad services.
NOTE: The advisory to reduce server response time is triggered for all websites when the server takes longer than 400 milliseconds to respond providing individual page resources. The degree to which the server response time is above that ideal mark can represent a significant hit to scores. You can see the metrics for individual resources using the GTMetrix “Waterfall” tab, an important view regarding individual page resource size and loading time along with Core Web Vitals such as Time to First Byte and First Contentful Paint.
No matter which page speed measuring tool you use, we do recommend both, not every recommendation will apply to your specific page.
As one final note to consider: your database tables should be as lean as possible. To that end we highly recommend utilizing WP-Sweep as a utility plugin to periodically remove stale or unneeded revisions, unused or orphaned term meta and transient options. For mature sites there can be a huge amount of unnecessary revisions and related now useless data within relevant tables.
We have covered everything from the server htaccess file, the active theme-based functionality, image optimization and the MySQL database tables as primary topics. That’s it. That is all that is required as focus to optimize your site, it’s pages and page resources, to be as fast loading as possible. Well, there is one more thing – we make use of the plugin Autoptimize. It’s primary purpose here is to minify, concatenate and aggregate CSS and JS files into one, two or three files, thereby reducing total http-requests significantly. The reason you do not see any flash of unstyled content (FUOC) on page load is because we took the time to provide sufficient, appropriate prioritized CSS delivered by Autoptimize for above-the-fold content rendering.
One final note: the server performance can be a significant variable particularly when a shared server setup. Here, server resources are spread over the number of domains residing there. For this reason you may experience server response times and page load times as highly variable. Additionally, all themes are not created equal when it comes to managing local resources — some themes are structured in such a way as to thwart efficient optimization. Because of this, it is the theme structure that sets effective limits upon what can be accomplished when attempting page speed optimization as theme resources are scattered or delivery of these resources are re-written as proprietry functionality without concern for page load optimization by the theme author.
In many cases, the optimization plugin, Nitropack, is a vital addition for the best speed performance of mobile and handheld devices.