WordPress.NewCitizen.io

Speed Optimization Guide

Your Attention Please !

After selecting your desired 'Optimization' section from the table, please scroll again to the very bottom of the page to view the material.

A complete and Comprehensive Guide On Making WordPress websites faster.

Don’t be overwhelmed by the table below; most optimizations can be easily achieved with an optimization plugin. I personally use the free Speed Optimization plugin that comes bundled with SiteGround’s Hosting plan. However, there are several other options, including W3 Total Cache (W3TC), WP Rocket, and FlyingPress.

Steps to optimizing your WordPress website :

1. Visit GTmetrix: Enter your website’s URL to begin the test. GTmetrix offers this tool for free and allows multiple tests to be performed every hour, at no charge.

2. Review the Report: GTmetrix will quickly generate a performance report, pinpointing each area that requires improvement.

3. Consult our table below to address the specific areas highlighted by GTmetrix. While GTmetrix often uses complex terminology, overcomplicates its instructions, and provides guidance for a broad spectrum of websites, we’ve streamlined and tailored their recommendations specifically for WordPress sites. With our clear and straightforward guidelines, you’ll find it much easier to understand and implement the necessary changes.

4. Re-test After Implementing Changes: After making a change, clear your website’s cache if it’s enabled. Re-test on GTmetrix to assess the impact of your adjustments. Using the new results, move on to the next suggested improvement and continue the process.

wdt_ID	Topic	Difficulty Level	Topic2	Difficulty Level2
1	Avoid an excessive DOM size	Plugin	Minify CSS	Plugin
2	Avoid chaining critical requests	Plugin	Minify JavaScript	Plugin
3	Avoid CSS @import	Plugin	Minimize main-thread work	Plugin
4	Avoid document.write()	Plugin	Preconnect to required origins	Medium
5	Avoid enormous network payloads	Plugin	Preload key requests	Plugin
6	Avoid large layout shifts	Difficult	Preload Largest Contentful Paint image	Medium
7	Avoid long main-thread tasks	Plugin	Properly size images	Easy
8	Avoid multiple page redirects	Easy	Reduce JavaScript execution time	Plugin
9	Avoid Non-Composited Animations	Difficult	Reduce the impact of third-party code	Plugin
10	Deferring Offscreen Images	Plugin	Reduce unused CSS	Plugin
11	Don't lazy load Largest Contentful Paint image	Plugin	Serve images in next-gen formats	Plugin
12	Eliminate render-blocking resources	Plugin	Serve static assets with an efficient cache policy	Plugin
13	Enable text compression	Plugin	Use a tag with width or initial-scale	Medium
14	Ensure text remains visible during webfont load	Plugin	Use a Content Delivery Network (CDN)	Easy
15	Lazy load third-party resources with facades	Plugin	Use video formats for animated content	Medium
16	Use explicit width and height on image elements	Easy

Implementing this feature can be achieved by using an Optimization Plugin:

Serve Static Assets with an Efficient Cache Policy

Using an efficient cache policy to serve static assets can enhance page load speed during subsequent visits by saving these files in the user’s browser locally.
Every time a page is loaded by a browser, it has to fetch all the resources for the page such as HTML, CSS, JavaScript, and images.
Browser caching saves static elements like CSS, JavaScript, images allowing the browser to pull them from its local cache, which is quicker than re-downloading them from the server hosting the page.
With browser caching enabled, the first time a user visits your page may not be faster; however, any future visits will benefit from the cached content, making them faster.

How does an efficient cache policy affect page performance?

When a browser stores your page’s static resources in its cache, it’s essentially creating a local copy of those resources.

The file’s server dictates how long the browser should hold onto the file – this is what’s known as a caching policy.

A longer caching policy instructs the browser to store these files for an extended period (for instance, a year). This is particularly crucial for resources that aren’t likely to change often, like your page’s fonts or logo image.

Shorter caching policies, such as a month, are handy for resources that are updated regularly, like CSS and JavaScript files. Depending on the cache policy of the specific resource, if a user revisits your page, the browser may serve the resource from its local cache instead of re-downloading it from the server.

Resources with short cache policies are likely to be downloaded from the server again during repeat visits. Caching makes your webpage load quickly for repeat users. Serving static resources from a browser cache significantly boosts your webpage’s speed for returning visitors.

On the other hand, if you set long cache policies for content that changes often, the browser might serve the outdated, cached content to your visitors, even if the actual content has been recently updated.

What is Considered an Efficient Cache Policy?

If your static files don’t change (or if you have a suitable cache-busting strategy), it’s advisable to set your cache policy to 6 months or 1 year.

For finished websites, elements like global CSS/JS files, logos, images, and so on, typically don’t change significantly, making 6 months or 1 year a practical cache expiry to use.

If you frequently modify the above static files, you can choose a shorter cache expiry, provided it’s longer than three months.

How to serve static assets with an efficient cache policy?

To set up an efficient cache policy, follow the instructions below, depending on the web server used to serve your static assets:

1. For Apache servers

Copy and paste the below code into your .htaccess file.

<IfModule mod_expires.c>
  ExpiresActive On
 # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  # Others
  ExpiresByType application/pdf "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

2. For other servers

Read the following guides to learn how to setup browser caching on other server types:

3. For WordPress (or other CMS) Users

If you’re using a CMS (e.g., WordPress), you can use am optimization plugin to cache and set a cache policy for your website.