Advanced caching methods using W3 cache plugin

These are just my personal notes on how I optimize WordPress sites.  Feel free to comment if you have something to correct and add:

  1. Always do any optimization/changes on a staging site so a live site wont be ruined, if you don’t have it, better to it now.
  2. Backup your site, If you don’t have any backup, better do it now.
  3. Take note of the existing pages so you will know that something got messed up on the process.
  4. Make sure there are no JS errors in console
  5. Check if there is existing plugin that does does caching disable them, we will be utilizing W3 cache plugin in this process.
  6. Benchmark site without caching using pagespeed insight or gtmetrix without caching
    • Take note of the render blocking order because the order and dependency is important when combining fill
    • Take note of the overall score, page size, page load time and number of connection as this will be determining on how we improve the site’s performance.
    • Download optimized assets, CSS, JS images as you will need it later
  7. Make sure the code in the theme is using WP’s best practices. Fontawesome, bootstrap, etc sometimes are loaded multiple times on plugins and premium themes, try to dequeue and unregister it.
  8. Do not enable YET the caching options in W3 cache plugin. Sometimes if there are WordPress sites that have used a premium theme with a lot of features, it contains a lot of unneeded JS and CSS so we will be starting with minification. Enable it and choose manual an leave everything in default.
  9. Make sure CSS styles is not loaded redundantly.
    • Google fonts is using best practice. Load as light as possible and single line.
    • Child theming if utilized should be correctly implemented.
  10. Optimize assets
    • Identify CSS and JS that are not needed on homepage and exclude it or dequeue it
    • Replace with minified version, some of plugin authors use cdn and unminified versions of their JS/CSS, this might not be a clean solution at the moment coz if you update your plugin, you will have the unminified version of those files
    • Combine using the order in render blocking order, some js
    • Identify JS that is not needed in the homepage and dequeue it
    • Replace with minified version for the JS files
    • Identify what JS to put i head, body and footer, normally jquery is not being combined as it is one of the major dependencies
    • Replace images with optimized
  11.  You can now enable the usual caching of W3 cache like Page cache, Database cache, Object cache and Browser cache.
  12. Will be posting another topic on how to utilize CDN.
Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.