– The Definitive Approach
This is a big topic these days since Google has announced that page speed will be part of their ranking algorithm.
I use GT Metrix and Google PageSpeed Insights together to gauge the performance of your primary landing page. These tools provide a baseline reference giving me a clear view regarding a list of top priority issues, those most important items needing to be addressed to provide the required improved page load speed. The major issues fall into four distinct groups as render blocking, total page size, the number of http-requests a page must make to completely render itself and, finally, how quickly the page is fully rendered on screen. To no one’s surprise, after eliminating render blocking, there is a direct correlation between http-requests, total page size and that final page load speed.
The list is often quite typical regarding WordPress installations which, owing to the extensive use of plugins, is a CMS platform often plagued by code bloat…. For example, If you activate a plugin thinking your going to use it but do not, that active plugin is likely delivering Javascript and CSS files to your page, increasing http-requests and total page size for no good purpose. In fact, many plugins do deliver resources to pages that do not need them. This is a tactical flaw in the way some plugins have been written. I would note that a form-related plugin such as Cforms provides option for including resources only on pages that have a related form deployed via short-code or quick-tags. One wonders why all plugins do not get constructed that way.
NOTE: there are many plugin-related resources that are not part of your domain. Google Ads, Google Analytics and Google Fonts are a prime example. You will not have any capability to affect those external resources delivered. Including your Google Analytics code will get you two or three more Javascript resources in return. Such example facts make it imperative that you maximize your optimization efforts on those resources you can affect. And where you can, such as with Google Fonts, opt to bring them on-board.
The list::::
- Leveraging browser caching through headers expires and the compression of page elements through the use of GZIP. This is first on my list but should be tackled last, for doing so first creates a caching problem in tackling other items.
- Image optimization as a reduction of image file size, including the creation of sprites where appropriate to help reduce http requests, along with serving appropriately scaled images rather than using HTML or CSS to accomplish different image sizes in layout.
- Above The Fold Content: solving render blocking issues often requires inlining a subset of your CSS related to page elements displayed within the first-third of your page content, including header, main navigation and common sidebar elements. This can be overdone, so try to keep it simple.
- Providing minified versions of Javascript and CSS static resources along with deferred delivery of most of those same Javascript resources. The wp_enqueue_scripts functionality seems fairly cut and dry, but there are some not-well-documented approaches to making that work well for deferred delivery of scripts. See this recent article Defer/Async Delivery Options for WordPress for more information.
- Providing minification of the generated page HTML and inline CSS
- Disabling the WP Emoji functionality since (WP) ver 4.2 as appropriate to your individual use of such, eliminating two http-requests
- Identifying and deactivating unneeded plugins, as well as unused fonts
FYI::::
For the most part, an active theme’s functions.php file is where much of this attention is focused, but also includes your site’s htaccess file and your MySQL database tables as well, particularly when numerous plugins have been activated then deactivated, and when pages and posts have undergone many revisions.
The optimization process is lengthy and even a bit tedious, but well worth the effort. Indeed, it may well be a periodic process, certainly once a year. I should also note that not all contemporary server platforms are equal in this respect. There is a difference in what can be achieved on Engine-X (NGINX) and Apache platforms with Apache lending itself fully to the process. Also note that some hosting companies will not provide customer access to anything server-related.
Noting these possible limitations, I urge you to do what you can to increase page performance.
At some point you may also want to consider using a content delivery network as that final push to gain the absolute maximum of page load speed. Doing so will definitely be beneficial but will not replace the steps outlined above.
There are a few indispensable plugins aiding in this optimization process:::: Each of which are admin-level or back-end plugins adding nothing to page size or http-requests on front-end page load.
EWWW Image Optimizer is one such plugin optimizing images as found within the wp-content folder, also providing an option to define a path to images that may be outside of the wp-content folder; in other words, it optimizes all images within your domain, including theme image files, and does an exemplary job at it using the default settings for JPEG, PNG and non-animated GIF. It does not create a separate set of files, rewriting image paths as some image optimizers do. That last is a true NO, NO, NO!
Autoptimize uses the PHP page output buffer (where WP constructs the page before sending it to the browser). This ensures that the original asset order, as determined by WP, for all CSS and JS files is observed when Autoptimize assembles then concatenates the related files for link and script delivery.
Above The Fold Optimization is a complex plugin and not really for the inexperienced coder. It has many options, somewhat in the manner of W3 Total Cache, and thus, can be confusing, leading to great uncertainty. For you Saturday coder’s I recommend starting with Autoptimize. One major advantage when using Above-The-Fold is that it deals most effectively with gathering all CSS for a page, no matter it’s original source, concatenating assets in proper source order. It then delivers a CSS file to a folder in your theme. Here, you can use that single file on your visit to the Critical Path CSS Generator. Otherwise you will have to gather all of the page-pertinent CSS on your own. For complex themes such as Avada, that thorough gathering can be a cumbersome task.
BWP Minify is another handy addition to the toolkit, providing minification and concatenation of CSS and Javascript files, successfully maintaining source order.
Of these three plugins, you will use only one. Which one will depend on the code structure of your theme.
WP Sweep is yet one more helpful addition, allowing you to clean up unused, orphaned and duplicated data in your WordPress. It cleans up revisions, auto drafts, unapproved comments, spam comments, trashed comments, orphaned post meta, orphaned comment meta, orphaned user meta, orphaned term relationships, unused terms, duplicated post meta, duplicated comment meta, duplicated user meta and transient options. It also optimizes your database tables as a final step. A lean set of database tables is the outcome. Works only with WordPress 4.4+ because of new term meta structure.
