How to Optimize WordPress to Speed Up your Website Part 1

Goal: Optimize your current WordPress setup and content for faster page load times.

Ideal Outcome: Your users experience faster page load times and your server resources are more efficiently used, while your website still looks exactly the same as the end­user.

Prerequisites or requirements: This exact process only applies to WordPress.org sites.

Why this is important: As page load time goes from one second to five seconds, the probability of bounce increases by 90%. Without requiring a server upgrade, you can optimize your WordPress website so that it loads faster, therefore retaining more of your users.

Where this is done: On your WordPress Admin Panel, on Pingdom.com, on Google Chrome.

When this is done: Whenever there are pages that can still be further optimized. Whenever your page load times are too high.

Who does this: The person responsible for Website Management, or a Web Developer.


Environment setup

1. Before starting this Article, backup your website. You can do so by following the “Create a manual backup” article from our Knowledgebase.

Note: While this procedure is not likely to affect your website’s behaviour and functionality there is a small chance it might be incompatible with your current server settings, current theme, or plugins and cause your website to be partially or completely unavailable.



Checking your website performance

Using an external tool:

● Note: Using an external tool like Pingdom allows you to test your website by using a third­party server on a designated part of the world, ruling out the possibility that the cause for your website’s poor performance might be due to your current poor internet connection, device, or location in the world.

1. Using Pingdom:
i. On your browser head over to
https://tools.pingdom.com/
ii. Insert the page that you would like to test on the URL field → Select the location that is closer to where your target audience is → Click “Start Test”;

Note: If you don’t know which pages to test, they should be the most important pages on your funnel. (E.g: Homepage, Sales pages, Checkout, etc)



iii. You will get a summary table with some key metrics you are looking for on the top:

  1. Performance grade: Your Google PageSpeed score. The higher the better.

  2. Page size: The total size of your page, the amount of data a user would have to download if they requested your page. The lower the better.

  3. Load time: The time (in seconds) it takes for your page to load under great network conditions. Bear in mind that depending on how your page is setup this result may appear to be slightly lower than what it really is. The lower the better.




iv. Save the URL of your test, you will use it later. You can find it on your browser navigation bar on top.



v. Repeat the procedure for each of your core pages.


Using a local tool:

1. Using Chrome’s built­in Performance Audit feature:

Note: Using a local tool, allows you to get real data of how long is taking for the website to load on your connection, as well as emulating devices or connections that might be popular among your user­base.

i. On Google Chrome, using incognito mode open the page you would like to test.

Note: You can open incognito mode by pressing Ctrl + Shift + N on Windows or + Shift + n on a Mac.

  1. Right click anywhere on the page and select “Inspect”.

  2. Click “Audits”


Note 2: If you do not see some of the features shown on this chapter, make sure you are running the most up­to­date version of Google Chrome.

4. If you want to test how your website performs on a specific device category or connection you can select it on the dropdowns:




Note: If you are not sure, select:

  • ­  Emulation: Desktop

  • ­  No throttling

  • ­  Clear storage

5. Click “Perform an audit...”
6. 
Select “Performance” and “Run Audit”



7. 
Once your audit is ready you will be able to see a performance report on how your page loaded:



Metrics:

Here you are able to see on a timeline how a visitor would see your page at each moment before it is fully loaded. Along with the following metrics:

 First meaningful paint: Represents the time in milliseconds it took for your page to display meaningful content. The lower, the better.
 First interactive: Represents the time in milliseconds it took for your page to become minimally interactive (which means, most, but not necessarily all, buttons, links, and other interactive elements were functional). The lower, the better.
 Consistently interactive: Represents the time it took for your page to be fully functional and interactive. The lower, the better.


Evaluating your website performance

Note: Once the core pages have been tested, It’s important to understand if there is a need to take any action. If you have a low­traffic website the performance gains might not be as noticeable as if you have a high­traffic one and a server that is under heavy load.

1. Open your Pingdom results page by referring back to the URL you’ve saved in the first chapter of this Article.
2. 
You will benefit the most from this Article if your Pingdom metrics for your core pages are:

  1. Load Time: > 3s

  2. Page Size: > 3MB

  3. Performance Grade: < C

3. Compare your performance against your competitors, and some major websites:



4. 
If you believe your metrics are way off compared to the ideal ones or your competitors, keep following this Article. If not, if you already have good metrics, consider whether your time or the investment in hiring someone to improve your page performance will be worth it.


Further auditing your website performance reports

Open your pingdom results page by referring back to the first part of this article you’ve saved.

Locating your largest content:

1. 
Scroll down to “Content size by content type” and look out for an entry that might be responsible for a big share of your page size. Typically these will be images or videos.



2. Now scroll down the report to the “File Requests” section, and sort by “File Size”, you will be able to see on the top the files that are impacting the page size the most.



3. Ask yourself and your team:

  1. Do we absolutely need to have this file on this page?

  2. Have we optimized this file the best that we could already?

Note: If the files are images, there will be a section on this Article to optimize images.

4. If you conclude that you can remove them, go ahead and ask your developer to do it, or edit your page and remove them.



Locating tools and scripts that you might not be using anymore:

1. Scroll down the report to the “File Requests” section and analyze the names of the files and the domains and see if you can recognize some tools or scripts that you might not be using anymore.

Example: If you find a request for http://load.sumo.com you know that it is your website loading that tool. If you are not using the tool anymore you should go ahead and remove it, for both performance and security reasons.



2. Create a list of those, and ask your developer to remove them from your website, or remove them yourself. If you are using Google Tag Manager to deploy your Tool’s scripts this task is typically much easier to perform.

Note: If you don’t have Google Tag Manager on your website already, you can follow Article - ­Adding Google Tag Manager to a WordPress website


Locating bad response codes:

1. Scroll down the report to the “Response codes” section and lookout for response codes that are not “200 OK”, If all your response codes are “200 OK” you can move to the next chapter of this Article.




2. 
If you have other response codes, locate the individual requests by scrolling down to the “File Requests” section and looking out for highlighted files, or the exclamation icon (in triangle) on the left. ( ! )


3. Make a list of those requests. And ask your developer:

  1. 301/302/307 Redirects: Assess if it is possible to link to the final destination and avoid a redirect.

  2. 404 Not Found: This resource is not being loaded most likely because the file does not exist anymore or there is a typo. If the resource is not necessary this request should be removed from the page.

Proceed to the Next Part of this ARTICLE

Did you find this article useful?