Measuring and Improving WordPress Website Speed and Performance

Faster WordPress Websites

We all know that website speed matters. No one likes a slow website. Even the most causal of all web users will prefer a faster websites over slower websites. It's become so important that Google uses website loading speed as a ranking factor, so don't hesitate! Get your website loading time as low as possible.

Today I'm going to show you how to improve the speed of your WordPress website. You will also learn how to check the speed of your website along with tips on reading the test results.

By following this information, you'll learn how to keep your WordPress website fast!

The speed optimization process is pretty standard for most websites. It involves a database & script optimization, image resizing and compression, and a few other adjustments.

Every WordPress website can load fast if it's optimized properly.

Our website, Bocain Designs, usually loads in one to two seconds. We even using a theme that some developers would call "bloated" (Betheme, at the time of writing this).

I like to compare a fine tuned website to a fuel efficient car.

If you insist on towing a 10,000 pound trailer with your fuel efficient car, you can expect the efficiency to take a major hit.

What tools should I be using to measure my WordPress website speed?

There are many ways to figure out how fast your website loads. The easiest way to do this is to visit your own website after clearing your browser cache of course.

Important: When checking your website speed or loading, do so with a clean cache. This gives you a better idea how the website loads for a real visitor.

When we optimize WordPress websites, we rely on a a few industry website testing tools to get the job done.

Pingdom Tools

Pingdom Tools lets you select from a list of test locations. When assessing a client's website, I'll run tests from a few locations. When I do this, I take into consideration the client server location and where their target demographic lives.

Check out Pingdom Tools

Pingdom Tools PageSpeed Proxy List

When you run a test on Pingdom Tools, you get a summary card with a score, total size, loading time, and number of requests. Your primary focus should be on the load time and page size.

Load time impacts the user experience. Total page size impacts the amount of server resources necessary to load the page, along with the data transfer to the visitor's device.

With more and more people using mobile devices, it's important to keep the total size as low as possible to ensure a fast loading web page.

Pingdom Tools PageSpeed Results

After you scan your website on Pingdom Tools, scroll down the page for more details. Scroll to the section seen below, and use the filter to sort the contents by largest file size . This lets you spot the problem files quickly.

It's not uncommon to find large images or a few oversized scripts after doing this and from there, you can come up with a solution.

Pingdom Tools PageSpeed Waterfall

GTmetrix

To get the most out of GTmetrix, sign up for a free account. By doing this, you're given more tools and access to finer data points. This includes being able to select your test location, browser type, and a few other settings.

Check out GTmetrix

GTmetrix Proxy List

When you reach the results card, focus on a few key metrics: Fully Loaded Time and Total Page Size.

GTmetrix Site Size

GTmetrix gives you scores for different factors. This website is already well optimized but has some problems relating to the images.

GTmetrix Visual Breakdown

You can expand the results to learn more about it. For the image results, we can actually see what their exact recommendations are.

A word of caution - Use your own eyes when optimizing images.

It's common for these websites to recommend over-compressing your images, because they can't actually see the image. Don't over compress your images just to receive a higher "score" on a speed test.

GTmetrix Visual Breakdown

If you're logged into an account on GTmetrix, you can click on the Timings tab for a much better loading time explanation. It's also recommended to take notice of the Contentful Paint time. This closely represents the user experience loading time.

GTmetrix Visual Breakdown

Like Pingdom Tools, GTmetrix offers a waterfall chart which details your files in the order they loaded, and how long it takes to load them.

You can spot 404s and other errors here that may be slowing your site down.

GTmetrix Visual Breakdown

imgix Page Weight Tool

This one is a bit less known but very helpful! As the name suggests, it's for image optimization. When we want to visually assess how well I can scale image sizes down, this tool is priceless!

Google, GTmetrix, and Pingdom tools do let you find large images, but they don't go as far as imgix Page Weight Tool.

Check out imgix Page Weight

Here's an example of how imgix works. After scanning a website you receive a summary of your page's total image size, and what the size could be with compression. Imgix gives you a detailed view, image by image, showing you before and after file sizes.

How much extra bloat are you requiring your users to download for the same user experience?

Image Weight Tool

It also provides a detailed view, going image by image, detailing how big your image files are compared to how small they could be, if saved in an optimized format.

Breakdown of Images by Total Size

Google PageSpeed

Google's Pagespeed tool recommends best practices, but doesn't provide a breakdown of details like the other test sites do.

This is our least favorite website speed testing tool out of the four listed in this post. We've mentioned it out of respect, but we rarely use this tool for assessing site speed.

We've found that using GTmetrix and Pingdom Tools for resolving website loading issues is sufficient.
Check out Google PageSpeed

Google Pagespeed Tool

What is a WordPress website's speed based off of?

Your website's speed will vary based on a few factors, many of which change on a daily, or hourly basis. It's important to be mindful of your location, your server's location, and any website speed testing tool locations. Many website speed testing tools allow you to select a test location. Select a location closest to your target website's demographic to see how it might load for them.

An easy way to test your website speed, without the use of a testing tool, is to visit your website from a browser that hasn't cached your pages yet.

What does this mean? If you use Google Chrome to browse the web, install Firefox, and visit your website. This gives the same user experience as someone who visited your website or the first time.

A few things to watch for while doing a fresh browser test:

  • How fast is the initial page load?
  • During that initial page load, did your website
  • Visit another page on your site, how fast was that page load? Faster? It should be.

What WordPress speed plugins can I use to improve my website loading time?

We currently use a plugin called WP Rocket for optimizing WordPress websites.

We started using WP Rocket in 2016. Before using WP Rocket, we had been using W3 Total Cache or WP-SuperCache for optimizing loading times on WordPress websites. These are still good options, but if you don't mind spending a few dollars, WP Rocket is superior in many ways.

It's simple to use and still offers optimization methods like:

  • Minification of HTML/JS/CSS
  • Combining of JS and CSS files
  • Automated database optimization
  • Google Analytics script caching
  • Built in CDN support
  • Lazyloading of images and iframes
  • Improved YouTube and Vimeo loading techniques
  • Deferring JS files
  • DNS pre-fetching
  • Blacklists for files you don't want it optimizing

Depending on your website's size, content, and web host, you might be able to get by without a caching plugin at all.

If your web host happens to be SiteGround, their server-side caching tool (SuperCacher) does a fantastic job by itself. It's compatible with WP Rocket, but you may find it unnecessary.

If you're not afraid to tinker around with some code, you can add the following to your server's .htaccess file to improve how fast your website loads.

A Warning: If you are not comfortable with editing your .htaccess file, do NOT do it. Breaking this file can make your website unreachable.

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
<IfModule mod_mime.c>
    AddType text/css .css
    AddType text/x-component .htc
    AddType application/x-javascript .js
    AddType application/javascript .js2
    AddType text/javascript .js3
    AddType text/x-js .js4
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg .svgz
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType application/json .json
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.ms-opentype .otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType application/vnd.ms-opentype .ttf .ttc
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/font-woff .woff
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType text/html A31536000
    ExpiresByType text/richtext A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType text/plain A31536000
    ExpiresByType text/xsd A31536000
    ExpiresByType text/xsl A31536000
    ExpiresByType text/xml A31536000
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/json A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/font-woff A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
    <IfModule mod_mime.c>
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|WOFF|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
<IfModule mod_headers.c>
  Header unset ETag
  FileETag None
</IfModule>

 

Optimizing Your Website Images

If you're on a computer with a photo editing software like Photoshop, Photopea, or Paint, you already have the tools to get the job done!

It's important to resize your images based on how you plan to use the image. If it's going to be a full width background on your website, you may want the image to be 2000 pixels wide. If the picture is a head shot for an about page, you don't need it to be larger than 1000 pixels in width.

Resizing your images before adding them to your server will cut down on unnecessary page load sizes, and cut down on the need for lots of storage space.

Once your images have been scaled down to the appropriate size, you want to save it in a compressed format. When saving the image for your website, make sure you're saving in RGB mode, and not CMYK mode. CMYK file sizes will be much larger than RGB.

Dynamic Drive Image Optimizer

Our favorite online tool for compressing images is Dynamic Drive's Image Optimizer. It only lets you compress a single image at a time, but it gives you upwards of ten different copies of that same image. This lets you pick the one that "smallest, best looking" version of your image.

If you have many images to optimize, Dynamic Drive's tool is not the way to go. For bulk online image compression, you can use a tool like Compress JPEG to optimize up to 20 images at once. You can use their auto-optimization setting, or specific exact amounts by going through each image, one by one.

Online Image Optimizer- GIF, JPG, and PNG

After Optimizing Your Website

Test! Make sure you haven't broken any features on your website, or broken how it looks. Visit your website in a browser (clear your cache!), and pay attention to how fast the page loads, and how it looks. Is anything off? Missing? Non-functioning? 

When optimizing your WordPress website with a plugin, you sometimes have to do a bit of trial and error to learn which configuration delivers the best results.

If everything is still working fine, re-visit the test websites from earlier, and run new tests. It's important to make sure your test location (for Pingdom and GTmetrix) is the same as the initial test, to get a more accurate set of data.

If you followed the advice in this post, you should have seen a significant improvement to your website loading speed, while seeing a reduction in total website size.  Your scores most likely improved too, but in some cases, scores may actually go down, when speed is improved, and that is OK! This is one of the few times you can say "test scores don't matter" - website speed does.

Nearly 50% Of Website Users Expect a Website to Load in Under 2 Seconds

Leave a Reply

Your email address will not be published. Required fields are marked *

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