White Hat Blogging is a participant in the Amazon Services LLC Associates Program, in addition, I am an independent Jasper Affiliate, not an employee. I receive referral payments from Jasper and possibly other affiliates.
One thing that always comes up in conversation after conversation when I am online, be it Facebook, Discord, Discourse, or other platform.
Since more and more people run WordPress learning how to properly look at Page Speed and how Google scores it can give you a leg up.
WordPress is an amazing platform that can do almost anything you need. To ensure the best speeds you MUST have good hosting, fast and minimal theme, high quality caching plugin, and a lazy loading scheme for video and images. The last thing to control is image size and to use perfect image sizing.
While these are the core needs for an incredibly fast loading website there are a vast amount of sub optimization that can be necessary with your database and more.
Lets start by getting a better grasp on what Page Speed Insights is and how it is slowly becoming more and more important for bloggers to build to the requirements set by Google.
Page Speed Fundamentals
Many are fully mystified by the speed issues they face, the online guides can typically be overly technical due to the fact that it is almost entirely server and configuration issues.
My aim is to take this topic and demystify it so that you can at least make the changes required to build a faster WordPress blog and get your content to your visitors as fast as possible.
An Introduction to Page Speed Insights from Google
Page Speed Insights from Google is a tool available online to test your overall website speed against how they measure speed within their system.
If you have Chrome you can run a more comprehensive test, called Lighthouse, which will give you much more helpful data and more real actionable details.
PageSpeed Insights Terminology to Know
There are some scores you need to understand initially before you start trying to make changes, sometimes a change isn’t necessary or helpful, sometimes it can even impact other scores.
TBT – Total Blocking Time
As Google describes it this is the sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.
Basically a clock starts as soon as the First Contentful Paint completes and this clock runs until the website is Interactive to visitors and returns the time used in-between as blocked time, where nothing can happen.
TTI – Time to Interactive
As Google describes it this is the time to interactive is the amount of time it takes for the page to become fully interactive. This is basically measuring the time from start of load until when a user can actually scroll or move around within your website.
CLS – Cumulative Layout Shift
As Google describes it the Cumulative Layout Shift measures the movement of visible elements within the viewport. This is most commonly seen when elements don’t have a fixed size, for example, advertising.
Advertising on most sites online continually causes the content you are trying to read around to display itself, the push here is to have the content that visitors are coming from be rock steady.
FCP – First Contentful Paint
As Google describes it the First Contentful Paint marks the time at which the first text or image is painted for the visitor on their device. This will rely heavily on your site not having a heavy image load first especially on mobile.
LCP – Largest Contentful Paint
As Google describes it the Largest Contentful Paint marks the time at which the largest text or image is painted. For many website owners this will typically be a hero image or post featured image added above the fold.
Other Important Metrics to Understand for Speed
These scores aren’t featured within a PageSpeed Insights Score per the Google website but will heavily impact a PSI scoring. These are indicators that you need to do some additional work on your host side and/or theme or build done with a page builder.
TTFB – Time to First Byte
This is the total amount of time spent to receive the first byte of the response once it has been requested, this speed is basically a measurement of how fast your server itself can serve data.
DOM – Time to First Byte
The Document Object Model (DOM) is basically a standard for how to get, change, add, or delete HTML elements. It grows with the more items added to a page or post, this increase within DOM size leads directly to a longer load.
Mistakes That Kill Website Speed
There are some mistakes that are very common for bloggers when they work on sites without a background in managing speed. These can all lead to huge impacts in overall speed for what seem like simple mistakes.
Cheap Hosting Platforms
This is most frequently down to shared hosting plans or very inexpensive hosts where they put multiple account holders onto a shared server, this cuts costs but also performance.
When on shared hosting your scores can be all over the place constantly as you will have an unknown variable as to the other websites on the server and the load to fulfil their visitors.
Personally I use and recommend using WPX ($25 a month for 5 sites) or Cloudways for your hosting.
Though in the first year of your websites existence you may want to keep costs low by using a shared hosting plan, like Siteground and Bluehost offer, since you won’t be having many visitors .
Large Images
Unless you are running a photography site you want to manage your image size to help increase your overall performance, for most images you want no more than 100kb-150kb in size.
Typically this is pretty easy to manage if you run the image through an optimization service like squoosh.app online, or through a plugin for WordPress like ShortPixel.
Preferably you want to scale the image resolution down but I would suggest not going under 1200×800 pixels as this size is helpful to land you on Google Discover and this can lead to amazing traffic.
Self Hosted Videos
Many will think that they want to just upload a small video to their own site Media folder instead of using on online host like YouTube, Vimeo, or other alternative.
These videos are huge files and to provide them to your visitors will consume your bandwidth the host provides very fast once you start to pick up consistent website visitors.
Instead make sure to host the videos on YouTube and just set them to unlisted, this way you can add them to your post or page but without them being available to anyone via search.
Missing CDN
If your website will be visited by people who aren’t located regionally close to your server than you need to implement a CDN or Content Delivery Network.
These allow the static, or unchanging content, to be served from a server location closer to the visitor. This helps your server to decrease the overall load and impact of trying to serve all the content as this leads to long delays.
Just because your site loads fast for you isn’t any sign of how the site will load for your guests, when in doubt build in speed as this helps you and them to see and interact with your site.
Not Configuring Lazy Load for Images and Video
Lazy load is something that was developed to help manage website load instead of front loading all downloads to render your website the visitor downloads what is needed for the viewport (screen).
A lazy loading setup then loads images as they get to a specific distance from the monitor viewing edge so that the visitor doesn’t see them loading but the overall page load is staggered for faster page loads.
For video this will typically mean that an image is shown with a play logo and that the video itself isn’t loaded until the user clicks on it and then the load occurs like it would on the host site.
Plugin Bloat, Misuse, Poorly Coded
Easily the most common issue facing a WordPress blogger is that there is a plugin for virtually any task you could want done on your website.
This leads to some people having 50+ plugins installed on the site, many of which are there only for one or two blog posts to fulfil one need those specific posts had.
The issue here is that many of those plugins, regardless of use, are loading on every page on your site. So this little amount of data adds up over more and more plugins slowly destroying your load speeds.
Not Doing Database Optimization
As you grow and install plugins and delete plugins your tables can get populated with a lot of junk files that may decrease loading speeds if the DB needs to be queried for anything.
Additionally this happens as you have posts and drafts kept, some hosts allow unlimited drafts which can lead to fast issues in back end loading to continue writing on these posts.
Using a plugin to manage these issues can help you to boost your overall performance for users along with for yourself in the backend editor.
How To Test Page Speed
There are multiple ways to measure your overall page speeds and each has some benefits that can be pulled out to learn where your site could be improved.
Many will get too buried in this process though and spend too many hours to days and weeks, to be fair this all shouldn’t even be focused on until you are off shared hosting and onto a better baseline.
Using Page Speed Insights Website
For most non-technical website owners Google’s Pagespeed Insights site is the most known way to test their own sites to see where they are in terms of speed and functionality.
Using Lighthouse Within Chrome
Another more full functioning version of the tool they provide on the Pagespeed Insights is available within the Chrome with a plugin which can help you get more qualified results.
Just right click on the page or post you want to measure and then select [ Inspect ] then in the area that pops up you will have a tab option for [ Lighthouse ].
Using the GTmetrix Website
Using another tool like GTmetrix or Pingdom can help you look at details that Pagespeed Insights doesn’t provide you around you TTFB which is crucial to any quality load speed.
I prefer GTmetrix as the report below and waterfall allow me to really dive into a site and find specific causes of slowdowns. The waterfall tab can show you excessive delays that you additionally may never normally notice.
As you can see above the scoring on the page is pretty standard to PageSpeed Insights as they recently updated to fall in line with the Google metrics.
I like the bottom section though below the section above as it explains some details about the DOM loading and the actual timings around the website and fully loaded time.
As you can see the load time is very long for this Carbonate based site, though it is running Ezoic for ads so while the complete load is delayed the actual content is ready to read in less than 4 seconds.
After you look there the next place to really learn more about your speed is to move to the Waterfall tab, this unique area lays out everything and the order they load and the time impact of each item.
This detail allows you to actively try to figure out mitigation for necessary loading items or remove items that produce significant load issues for you and your website.
Building Core Speed With Website Setup
The first layer in building up a real quality core website speed is going to be in the full foundation of your WordPress setup. The base will be a host that can provide a fast TTFB and be dedicated towards serving your content and site.
After this you need the right theme with a focus on speed and not on the bells and whistles many people incorrectly assume a visitor wants to have for their website, people want the content in almost all circumstances.
Then you will want to deliver your content from as close to the visitor as possible to ensure they get your full site in under 2-3 seconds preferably you want your site to reach 0.5-1.5 seconds to look near instant to the visitor.
Choosing Fast WordPress Hosting
Your hosting is the foundation of overall site speed, if you don’t invest in a super stable and fast foundation everything else you setup is going to be weak and unstable.
This doesn’t mean that you can’t get service for starting sites on shared hosting platforms like Siteground or Bluehost, just that you can’t expect any kind of high quality responsiveness without moving a site to better hosting.
My sites are typically handled on 2 specific hosts who provide high quality service and amazing performance at a good cost, those are WPX and Cloudways which I compared on this post.
As you continue to build your site and it keeps growing though, around 250k pageviews and greater, you may want to move onto even better hosting platforms like Kinsta, WP Engine, or BigScoots.
WPX
I highly suggest WPX for people who aren’t interested in the nuts and bolts of owning a site, for those who want someone to manage the entire foundation then the service provided will amaze you.
WPX is built specifically to maximize performance of WordPress and they offer amazingly strong server performance for you, they also offer a very good price at $25 a month for 5 sites.
Cloudways
Cloudways offers the ability to host your server on many hosts from DigitalOcean, VULTR (I love HF servers for snappy response), to Google, and even Amazon Web Services.
The downside is that you have less direct management on your server, much of the work will be done by yourself, though they do offer the ability to get support when necessary it is not for the feint of heart.
This ability to choose hosts also means there is server costs from $10 to $100s of dollars. The benefit to these though is the ease to scale should your site traffic start to increase rapidly without hitting a hosting limit.
Choosing Fast WordPress Themes
As with your hosting you want a theme that is built for speed and to render it fast and effectively. The longer a site takes to load and render for a visitor the higher their bounce rate tends to become.
A big goal for any owner of a website is to ensure that visitors don’t bounce directly to another entry in the SERP as this signals to Google you didn’t have the right answer for them which can drop you over time lower in the SERP for that query.
GeneratePress
One of the most solid themes available on the market today, easy for anyone to modify and customize with numerous built in configuration options it is a perfect theme for someone looking for ultimate speed but ease of setup.
GeneratePress makes for an awesome theme as you grow and look to build on additional features to your site as it works seamlessly with Elementor Pro, and many other plugins that help build communities.
Acabado
Along a similar vain to GeneratePress, the team at Income School made a theme, called Acabado, that has a very distinctive look and feel but can achieve good scores consistently for blog owners.
The theme is aimed at people who are focused on creating content and less for people who want to do large scale customizations.
This is a near perfect theme to use in the first year of a site when you need to be more focused on content instead of looks and feel.
Carbonate
Carbonate fills an interesting spot in this list as it is aimed at building the ultimate fast WordPress website, it is built from bootstrap so it can be easy to change if you know html and CSS.
There is no easy custom configuration though, this will be all custom so if you don’t understand web design you will more than likely need to hire someone, there is no active support available.
Why I Pay For Themes
A theme will add a lot to how your website functions, they are worthy of investment as soon as you can afford it. I wouldn’t suggest jumping to buy a theme in the first year but any of the above are a sound investment for a blog focus with speed in mind.
When you pay for a theme you have a tendency towards a more secure and up to date platform to run your business from. These are important as many sites are hacked through old themes or unpatched security issues in a free theme.
For that first year when you may not have the investment capital for a good fast theme you first should choose GeneratePress (free), then close runners up will be Astra and OceanWP.
Configuring a CDN with Cloudflare
For anyone looking to achieve the best possible speeds on their website they will need to find and setup a CDN to serve content faster. A CDN also provides a buffer versus attacks on a website and can help make sure you don’t get a large distributed denial of service (DDoS) attack.
There are a large amount of options available for you to use for a CDN, some hosts like Cloudways and WPX have options within their services to provide you a CDN since they know it helps you be faster.
There are additional options outside of hosting that I have used and had good experiences with that I will list below to give you some alternates to look into for your websites.
Cloudflare
A huge player in the overall scheme of global content delivery and defense, Cloudflare is a strong performer with a good free account option, recently they have added a new accelerator that can make WordPress load near instantly.
The APO system they released though can have some issues with plugins and other items you run on your site so it is recommended should you choose to use this option and pay for it that you validate no impact.
BunnyCDN
Relatively new to the market versus others BunnyCDN is a good provider that has a nice GUI and helpful, simple steps to configure. I have had amazing performance and typically it costs me less than $10 a year to use.
Crafting The Perfect Site Structure for Speed
While there is a bunch of focus on the server and the load speeds the way a theme presents the website as a whole can have a large impact on the Pagespeed Insights values.
This is especially true today as the new metrics coming in 2021 that will become, at a minimum, part of the ranking factor.
New 2021 Core Web Vitals as Performance Ranking Factors
As the web has grown the metrics used by companies like Google to see how performance impacts user experience has grown, Google in 2021 has said the next update will add in Core Web Vitals as a ranking factor.
Whether this remains to be a large or minor ranking factor has yet to be seen but the solid fundamentals aren’t a bad set of guidelines to follow to give visitors a better experience to keep them longer.
Core Web Vitals:
Improve Web Vitals:
Managing LCP
This will continually get smaller or larger depending on the content as you always have something loading unless you have a white website without any actual content.
What you are wanting to manage though is the overall size of the largest item, whether this is minimalizing images above the fold or similar content that has a large payload.
When necessary you can help this singular image load for like a background by setting a preload for the resource which ensures loading before content further down the page making the site load appear faster.
Managing FID
This comes from having a lean load initially on the page, so a focus on the above the fold items that MUST load and anything below the fold be deferred when possible to maximize initial speed to use.
The FID score is basically just a simple measurement of the time from when a user first interacts with your post or page (click a link, tap on a button, or custom, JavaScript-powered control) to when the browser can handle the processing.
Managing CLS
This is motion in the graphics and environment as they load, similar to a news site where the ads continuously push the text out of view and you have to scroll again to catch up.
This is as simple as having a good theme and having images and items having an attribute set for the width and height so that the space is “reserved” so until loaded it shows as empty.
This helps the content stay in the same area before anything is loaded, it means you and your visitor can read content without it moving around on you causing you to need to find your reading point again after loaded.
Adding Plugins That Actually Increase Speed
There are some core plugins I use on almost all my sites when they don’t have systems like Ezoic that replace out their functions.
WP Rocket
I love WP Rocket for caching over free options as it is incredibly effective while taking minimal time to configure. Unlike other plugins that require a degree to configure you can have WP Rocket done in less than 5 minutes for most sites.
There is just a few quick sections to setup which help get you setup with critical css (above the fold) and deferring Javascript to help, WP Rocket isn’t a free plugin though so it will have a yearly cost, check for a current deal here.
Asset Cleanup
Asset cleanup is an amazing tool that can help you in some powerful ways, for myself my primary need is to control the plugins I run on any specific page.
Many plugins load themselves on every page and every post, regardless of whether they are actually loaded and required. This can cause artificial loading delays as unused CSS and Javascript are then loaded for no purpose.
There are a lot more controls available in this plugin to remove some default loading scripts and many unused parts of WordPress, like Emojis and more which can help.
They also offer a “pro” version which has even more features and offers more control, I have never needed it but I know many in web development who swear by it.
Flying Analytics
Everyone needs to have analytics loaded on their site, both to help you get perspective on your visitors. For many sites to be able to be sold they want to see years of history which Google Analytics can provide easily.
The issue with Google Analytics is that it can cause slow loading on your website that PageSpeed Insights will complain about, go figure.
Flying Analytics from Gijo and WP Speed Matters is able to help you inline either a GA3 or GA4 code which tremendously drops the overall load impact versus the standard scripting.
Flying Scripts
This plugin is by the same person who makes the Analytics located above, Flying Scripts is a useful plugin which allows you to introduce a delay to loading any script when there is no user interaction.
This means if someone isn’t interacting with your site the scripts listed won’t begin loading until the interaction begins, due to this you could delay things like Google AdSense from loading for seconds giving a much faster website load speed.
Flying Pages
The last in the range of Flying plugins that I use, Flying Pages is a plugin that allows you to begin preloading assets from another page when users hover over a link.
While this doesn’t cut down on the overall files and size necessary to download, since you start before the visitor clicks when they do click they can have a large chunk pre-downloaded making the page load near instantly.
This helps drive your visitors to stay onsite much longer as that instant load gives your site an even more professional feel.
Code Snippets or Advanced Scripts
Both Code Snippets and Advanced Scripts allow you to use hooks and add real code into your site. Code Snippets is free and Advanced Scripts is a paid plugin, Code Snippets is more bare boned and Advanced Scripts helps you find hooks easier.
I don’t think I will ever run a site without a Code Snippet plugin installed as these allow me to optimize or improve things in any theme related to needs that I may have that change functionality from the default.
Oxygen Builder (Agency)
Oxygen Builder is a powerful plugin, similar to Elementor and DIVI but with near unlimited power Oxygen can build ANYTHING you can think up.
There is no free option for Oxygen Builder but it is a lifetime purchase so once you purchase it you can install it and use it on as many sites as you care to.
This site and nearly all my sites is built on Oxygen as it provides infinite customization along with incredible speeds when you design specifically for that purpose.
Please note that Oxygen is not for the feint of heart, you will need to either know code or be willing to learn as it is definitely developer oriented unlike Elementor and their “designer” focus.
Speed Tweaks and Improvements
There are many things you can do to try and tweak your speeds and to gain the maximum performance your hosting is able to give.
As noted before should you run on shard hosting note that this will not always yield good speeds reliably.
If you are on shared hosting you can go through these steps to get every ounce of speed but it will not always hit the same levels as a dedicated host or cloud host.
Choosing Optimal WordPress Settings for Speed
There are some simple things you should do within just WordPress to ensure better performance is maintained:
- Keep Your WordPress Site Updated – This should stand alone without much explanation, updates protect your site and keep it running optimally.
- Use Excerpts on Homepage and Archives – Shorter text helps the page to load less content which allows faster overall loading.
- Split Comments into Pages – Comments have to be pulled and loaded, limiting to pages means far less database interaction.
- Don’t Upload Audio/Video Files Directly to WordPress – Media section should contain only optimized images and not video files.
Most of the above are default behaviors and shouldn’t need to be manually configured but they are things to keep in mind when optimizing for speed.
Should You Enable Minification for Your Site
Minification was a good tool in the older internet styles of HTTP/1, with the launch of HTTP/2 your files load at the same time so minifying, or merging scripts into a single file isn’t a best practice.
You can check to see whether your server supports HTTP/2 by going over here and it can tell you very fast if you are set up for this speed improvement.
View load difference on your site with HTTP/1 versus HTTP/2 to see the difference between these two in performance.
How to Enable Minification on HTML, CSS, and JS
Any caching plugin will provide options that will configure minification for you, I still prefer WP Rocket, but you could use plugins like W3 Total Cache or Autoptimize for additional minification options.
Updating Server to Most Recent PHP
As of this current timeframe the version is 7.4 and over 7.3 this has easy to see performance increases, some hosts and websites are still running on ancient Version 5 or 6.
This will typically be something you can change within your hosting setting, if you aren’t sure where it is then open a ticket with your host to have them help you get up to date.
How to Implement Blazing Fast Image Optimization
You want to ensure you have fastest loading possible you want to have either pre-optimized your images on something like squoosh.app or to have a plugin installed like ShortPixel.
The ShortPixel plugin will help take and compress the files down by cleaning up pixels of close color and removing these additional pixels can easily drop the file size down in some cases 70-90% from the original size.
For images you want to limit the overall image size to 100kb or less to ensure fastest load speeds.
Lazy Loading Images and Videos
For your images to load as optimally as possible you want them to load when they are needed for the visitor, for this you need to set up lazy loading.
This comes built in on WP Rocket but if you can’t afford a paid plugin you can choose to use a plugin like Flying Images, this plugin allows you to lazy load images and serve them from a CDN if necessary.
Lazy loading videos will help you not take the initial hit on the server performance when YouTube or other videos exist, instead typically loading a placeholder image to make sure load is fast and efficient.
Lazy loading video exists in WP Rocket but to provide a free option you can use a plugin like [ Velocity ] which can allow you to choose a video and choose an image to show prior.
How to Speed Up Google Analytics
The simplest way is to either inline a script yourself into your header that is smaller or to install a plugin like I spoke about above called “Flying Analytics” which runs a minified local version.
For almost all people the plugin will be immensely easier as it doesn’t cause any speed issues having this plugin but it helps cut down on speed issues by cutting the time loading GA typically causes.
How to Load Fonts Locally
You can load your fonts from Google through a load in your header or you can add them as a part of your site and reference this local location to load and serve these fonts.
I suggest reading the very comprehensive guide that was done by Kinsta on their blog on the ups and down to local loading and see if the benefits are worth it to you versus the minor time savings.
Fine-Tune The WordPress Database
The best way to do this is using an optimization plugin which can help you clear up your transient files and the saved revisions along with cleaning up any table remnants.
WP Rocket has a system built in to help you clean your database up, it can be done manually or automatically.
Should you not have an option for the paid plugin you can download WP Optimize which can be manually run scans to clean up your database, with all database changes make sure to backup prior.
What About Ads?
The reason I don’t spend any time listing out how to get good page speed with ads is that a site with ads will always add on requests to do bidding and maximize returns.
Why Not Cover Speed With Ads
If you have 100s of requests you will always have slower page speeds, focusing on this with ads is basically like trying to fix 1000 cuts.
Each vendor has different things they use to control speeds, with Ezoic using their Site Speed Accelerator tool, Mediavine implementing a lazy load and similar.
Each vendor may be able to get you amazing speeds but your mileage may vary so I would leave this as something to consider as to what ads are worth to you.
Speed Based Code Snippets
If you want to maximize your performance much of it comes down to minutia and eeking out those last little bits of speed. Some of the below can be done with the plugins I listed above, some are way easier to do with a code snippet.
Code Snippet: Async Google Analytics
You can use the code here to add a faster version of the standard Google Analytics code into your website. The Google Analytics V3 code starts with a UA-xxxxxx code.
WP Rocket – Advanced Options Prefetch Domains
If you choose to purchase WP Rocket it has a place where you can add on external domains that you need to pre-fetch from to help you get them started right away.
This can allow you to pull forms and data that resides offsite which will get your scores to be much higher since the delay to load will start right away instead of when it finally gets to the resource.
Final Thoughts on How to Increase PSI Scores on WordPress
Most of these hints should help you have tremendous changes to your overall scores when tested on PageSpeed Insights. This is just a singular test though and places like Google Search Console may have speeds that are much slower.
A slow score in Google Search Console means you need to look at how your site is hit by visitors all over the world, the scores come from the CRuX report and are gathered from the web from all users, just because it is fast for you doesn’t mean it is fast for the world.
If you want faster speeds then I would suggest WPX or Cloudways here, along with using WP Rocket for caching on site which you can read more about here on my site.
