How to Optimize WordPress to Speed Up your Website
Disclaimer: The information provided in this post is for informational purposes only and it not meant to be used as a one-size-fits-all authoritative document for all projects. We put this here for people interested in the technical aspects that are required in some of the work we perform. The links, tools, etc., mentioned in this post are not necessarily representative of what we actually use in our day-to-day consulting but rather as a selection of tools widely available to the general public. Please, if you feel you actually need these services contact and use a professional, we suggest ourselves of course, but please understand this “if you think a professional is too expensive, wait till you see what doing it unprofessionally is going to cost you!”
On of the key rules of SEO is that you need to be optimized for speed. The single factor of speed will almost trump all other considerations so it is at the top of the list of things you must consider. When we talk about speed we are mostly talking about the load time of your site, the time it takes once someone has clicked on your link for them to be able to interact with your website.
Website visitor bounce rates (people leaving your site before they even interact with it in this case) increases by 90% once your website takes 3 or more seconds to load.
WordPress is a CMS, content management solution, that is so popular it makes up almost 40% of all websites on the internet. For this reason we are going to discuss concepts and techniques to optimize a WordPress website for speed. Now there are a ton of concepts we could discuss but we feel there is sufficient information on the web already covering so we are going to leave that for now, or at least until another post.
There is also the technical aspects of upgrading and optimizing your server (hosting) and other things that we will leave out of this post. So, without further introduction, let’s jump into it!
- 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.
- Using Pingdom:
- On your browser head over to https://tools.pingdom.com/;
- Insert the page that you would like to test on the URL field → Select the location that is closer to where you 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)
- You will get a summary table with some key metrics you are looking for on the top:
- Performance grade: Your Google PageSpeed score. The higher the better.
- 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.
- 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 set u this result may appear to be slightly lower than what it really is. The lower the better.
- Save the URL of your test, you will use it later. You can find it on your browser navigation bar on top.
- Repeat the procedure for each of your core pages.
Using a local tool:
- 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.
- 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.
- Right click anywhere on the page and select “Inspect”.
- Click “Audits”
- 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
- Click “Perform an audit…”
- Select “Performance” and “Run Audit”
- 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.
- Open your Pingdom results page by referring back to the URL you’ve saved
- You will benefit the most from this if your Pingdom metrics for your core pages are:
- Load Time: > 3s
- Page Size: > 3MB
- Performance Grade: < C
- Compare your performance against your competitors, and some major websites:
- If you believe your metrics are way off compared to the ideal ones or your competitors, keep following this. 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 URL you’ve saved.
Locating your largest content:
- Scroll down to “Content size by content type” and lookout for an entry that might be responsible for a big share of your page size. Typically those will be images or videos.
- 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.
- Ask yourself and your team:
- Do we absolutely need to have this file on this page?
- Have we optimized this file the best that we could already?
- 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:
- 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.
- 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.
Locating bad response codes:
- 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 on.
- 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 exclamation icon on the left.
- Make a list of those requests. And ask your developer:
- 301/302/307 Redirects: Assess if it is possible to link to the final destination and avoid a redirect.
- 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.
- Decrease your homepage size by showing less blog posts upfront
Note: Depending on your WordPress theme, the steps below might vary slightly. Additionally, it might be the case that you are not currently displaying blog posts on your homepage or your theme does not allow changing this setting. If that is the case there is no gain in following this procedure—just skip to the next section.
- On your browser, login to your WordPress Admin Panel.
- On the sidebar click “Settings” → “Reading”
- Locate the field “Blog pages show at most” and edit its value. The fewer blog posts you are showing on the front page the faster your page will load, but your readers will also have to use pagination, or your homepage links to find your blog posts. Taking this into consideration, lower the value to one that you feel comfortable with.
- Auditing your WordPress Plugins
Note: This step should be performed not only for performance reasons but also security reasons. Ideally you will want to perform this audit at least every 3 months.
- On your browser, login to your WordPress Admin Panel.
- On the sidebar click “Plugins”
- Filter by “Active” by clicking on the link on the top:
- Note: If you have inactive plugins that you are not using and do not expect to use in the future, you should delete them for security reasons.
- Scroll down the list and look out for plugins that you are sure you are not using anymore, or that you could remove without affecting your website core features. When you find those, tick the box on the left.
- Note: Make sure that you fully recognize the plugin and what it does before checking it. If you are not sure, ask your developer or website administrator about it.
- Once you have selected all the plugins that you are not using anymore, head over to the top, click the dropdown “Bulk Actions” → Select “Deactivate” → Click “Apply”.
- After you have deactivated the plugins that you are not using anymore, scroll down the “Active” list and lookout for outdated plugins. Those will be marked by a beige background with a prompt to update to the most recent version. Click “Update Now”.
- Note: While not always, the most recent versions usually carry performance improvements. Plugins should also always be kept up-to-date for security reasons.
- On your browser, navigate to your website and open a few pages to make sure everything is still working as intended after the plugin removals and updates. Visit your core pages (sales pages, checkout, forms) and make sure everything is still fully functional.
Note: If you are facing any issue you should first go ahead and re-enable any plugins you might have just disabled, that should fix the issue. Isolate which plugin is causing the malfunction by disabling them back one by one and checking when your issue arises again.
- Install the WordPress W3 Total Cache Plugin
Note: While installing a performance optimization plugin like W3 Total Cache can have a very significant impact on your website performance, it can also cause your website to malfunction. Before proceeding to this step make sure:
- You are working on a local development environment (e.g: a staging version of your website)
or/and
If you are not working on a local development environment, but you are fine with having a bit of downtime until you restore the data from your latest backup you can also proceed to this section.
This tries to cover the best settings that would work for most websites, but compatibility with every possible website/server setup can’t be achieved. If you are having trouble setting up your cache plugin contact your web developer or hosting company.
Note 2: Make sure you are not using any cache plugins already since that might conflict with this.
- On your browser, login to your WordPress Admin Panel.
- On the sidebar click “Plugins” → “Add New”
- On the search bar on top type “W3 Total Cache”
- On the search bar on top type “W3 Total Cache” → Click “Install Now” → “Activate”
- On the sidebar click “Performance” → “Dashboard”
- Click “Compatibility check” on top:
- On the list lookout for incompatibilities of your server settings with the “enhanced page and browser cache”:
Note: If you have an incompatibility with the enhanced page cache feature, inquire your web hosting company about it and ask if they can provide you with a solution.
- On the sidebar click “General Settings”.
- Select the following settings:
- Page Cache: Enable
- Page Cache Method: Disk: Enhanced.
- Note: If on the previous step you’ve detected that your server settings are not compatible with the “Enhanced” option and your current web hosting provider can not offer you a solution, select “Disk: Basic”. Also note that there is a small chance that the W3 Total Cache’s “compatibility check” tool’s alert is a false flag and your server actually supports the enhanced mode.
- Minify: Enable → “I understand the risks”
- Note: While this option will work for most websites, it might cause your website to malfunction.
- Note: If you are already using a minification plugin or service do not enable this feature.
- Database Cache: Enable
- Click “Save Settings and Purge Caches”
Note: If afterwards you still see a notification on top prompting to empty the cache, go ahead and do so:
- Open your website, navigate through your core pages and make sure everything is still functional.
- Note: If parts of your website are no longer working, you can revert the changes you made by either disabling individual features or disabling the whole plugin.
Note: Since you’re now displaying a cached version of your website to your users everytime you make a change to your website (e.g: editing a page) you will want to purge that page’s cache so that your website refreshes the content that your users are seeing. You can do that by either hovering the WordPress Admin header’s “Performance” icon and clicking “Purge All Caches”. Or purge only specific caches (more efficient) by clicking the “Purge from cache” next to your WordPress posts and pages.
- Installing the Shortpixel Image optimizer plugin
- On your browser, login to your WordPress Admin Panel.
- On the sidebar click “Plugins” → “Add New”
- On the search bar on top type “ShortPixel”
- Click “Install Now” → “Activate”
- On the sidebar, hover “Settings” → Click “ShortPixel”
- You will be prompted to add an API key or request one. If you don’t have one yet, enter your email address, tick the box to accept the TOS and the PP, and click “Request Key”.
- You should see a “Your API key is valid” message and be redirected to the Plugin Settings page.
- Select the compression setting that you would rather see on your website:
- Note: You can test the three different settings live on ShortPixel’s website.
- Note 2: If you are not sure, select “Lossy”. This will offer you the best results while still making sure your images look good.
- Click “Save and Go to Bulk Process”
- Click “Start Optimizing”
- Note: The free plan allows users to optimize up to 100 images per month. If you already have more than 100 images when you’re starting out, you may want to purchase a “One-Time” plan that suits your needs, afterwards, if you don’t plan on adding more than 100 images per month, the free plan will be enough.
- Note 2: If by including thumbnails you go over your allowed monthly quota, you may choose to disable that option.
- Leave the tab open while the plugin optimizes your images. Depending on the amount of images you are optimizing it may take several minutes.
- That’s it! Your images are now optimized and your pages and posts should now be lighter and faster to load. To the right of the success notification, you should see a percentage indicating the average image reduction.
Note: If you are using a cache plugin you might need to purge all caches before your newly optimized images are live.
- Re-Test your pages:
After you have applied all, or some of the optimizations of this, retake the tests that you have performed on your pages and compare the results to see how much your page performance metrics improved.
Note: Make sure you select exactly the same server locations when performing the new tests.