Htaccess Speed Up WordPress Tricks & Snippets

Looking to speed up your WordPress site using the htaccess file? Most WordPress sites run on the Apache server software, and often by default, the configuration is not optimal. Luckily, the htaccess file makes it easy to configure Apache and see some serious speed improvements.

In this article, we'll cover the most important changes you can make with htaccess code snippets you can copy and paste for your own server.

What is the htaccess file?

The .htaccess file is found in your web server's root directory, or within specific folders that are in the root directory. It's a configuration file that applies to the contents of specific folders accessible through your web server. With the .htaccess file, you can easily do most of the same things you can do through the main configuration file.

Your htaccess file is located in the root folder for your web server. Usually, it can be found in /var/www/html/, the default location for Apache servers. If you have installed WordPress in a subfolder, such as /blog/, the htaccess file for that folder will be at /var/www/html/blog/.

To edit your htaccess file file via SSH, use this command:

$ nano /var/www/html/.htaccess

What can the htaccess file do?

The .htaccess file is a powerful tool that allows you to control how your server interacts with specific folders and files. In other words, the .htaccess file gives you control over the visitor experience on your website.

For example, you can use the .htaccess file to:

-Control how visitors access specific files and folders

-Password protect specific areas of your site

-Prevent hotlinking of images

-Redirect visitors to a specific page or URL

-Cache static files for faster loading times

-And much more!

The possibilities are endless, and the .htaccess file can be a powerful tool for optimizing your WordPress site. However, it's important to note that you should only make changes to the .htaccess file if you are comfortable with editing code, as a typo can break your site.

How do I edit my htaccess file?

To edit your htaccess file, you'll need to connect to your server, either with an FTP client or through SSH. You can download the file, make your edits, and reupload with FTP, or using SSH, you can edit directly on the server with an editor like vim or nano.

Keep in mind, the .htaccess file is a hidden file. It starts with a "." and on Unix-like systems, this is how hidden files are marked. You'll either need to find an option in your FTP client to show hidden files.

If you've connected via SSH, you can list all files in the current directory, including hidden ones, with this command.

$ la -la

Enable Browser Caching

Browser caching is a protocol where browsers can be instructed to store downloaded files for a specified period. When they need to access a file that's been cached, they don't need to request it from the server again, significantly reducing how long it takes to retrieve, eliminating unnecessary HTTP requests.

With misconfigured browser caching, you may see the "leverage browser caching" message in PageSpeed Insights.

You can enable browser caching in Apache, and speed up WordPress though your .htaccess file. This example code contains rules for most common file types, however, you can remove types you aren't using if you'd like, and you can customize how long the resources stay cached for.

Before this will work, you need to enable the expires module. On Debian/Ubuntu based systems, you can use the following commands to enable the module. For other systems such as CentOS, you may have to manually edit your Apache config.

$ sudo a2enmod expires
$ systemctl restart apache2

Add the following code for mod_expires to into your htaccess file.

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault "access plus 30 seconds"
    ExpiresByType text/html "access plus 15 days"
    ExpiresByType text/css "access plus 15 days"

    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/jpg "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"
    ExpiresByType image/svg+xml "access plus 1 months"
    ExpiresByType image/x-icon "access plus 1 months"
    ExpiresByType application/pdf "access plus 1 months"

    ExpiresByType text/js "access plus 1 months"
    ExpiresByType text/javascript "access plus 1 months"
    ExpiresByType application/javascript "access plus 1 months"
    ExpiresByType application/x-javascript "access plus 1 months"

    ExpiresByType font/woff "access plus 1 month"
    ExpiresByType application/font-woff2 "access plus 1 month"
    ExpiresByType application/x-font-ttf "access plus 1 month"
    ExpiresByType application/x-font-truetype "access plus 1 month"
    ExpiresByType application/x-font-opentype "access plus 1 month"
</IfModule>

It's possible to manually add cache control headers as well. While the expires module makes things easier, it can be useful to know how this works under the hood.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
  Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

The user's browser simply reads these headers and keeps the cached file stored for the specified time. The max age value is represented in seconds, so in this example, 30 days is 2,592,000 seconds. Content delivery networks will also respect these headers when determining how long a resource should stay cached.

Enable Gzip Compression

GZIP is a compression algorithm that can be applied to text files, like HTML files, CSS files, JavaScript files, and SVG images. Enabling GZIP makes these files smaller, and decreases the time required to download them, reducing your overall load times and server bandwidth, and speeding up your site.

You can easily enable GZIP and Deflate compression for your WordPress site with no plugins, just by editing the .htaccess file. First, you'll need to enable the deflate module with these commands.

$ sudo a2enmod deflate
$ systemctl retstart apache2

Here a code snippet for your .htaccess file to enable gzip compression.

<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain

 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/rss+xml

 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript

 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
</IfModule>

This code enables GZIP for text files and font files. Note that you shouldn't enable GZIP for image compression, since they're already compressed, and GZIP won't be effective. Adding the mime types for already compressed files like images to this list isn't a good idea, since you won't be able to effectively compress images more.

Disable Image Hotlinking

Image hotlinking is when other sites link to images that are hosted on your site. While disabling this usually won't give your site the biggest noticeable performance increase, it's still a good idea.

If other sites are hotlinking to your images, it can create extra server load and slow down your site for regular users. Thankfully with an easy .htaccess trick this can be prevented.

You can paste the following code into your htaccess file to prevent image hotlinking.

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

This code prevents sites other than yourwebsite.com, google.com, bing.com, facebook.com, or twitter.com from linking to your images. You can add additional domains you'd like to allow. It's a good idea to allow image hotlinking for search engines and social media sites where your content may be shared, and of course your own site, but anything else is likely leaching on your bandwidth and server resources.

Hide Server Signature

Disabling your server signature won't speed up your site, but it will increase your security. Take a look at these example server response headers.

$ curl -I https://example.com
HTTP/2 200
date: Fri, 11 Mar 2022 21:31:31 GMT
server: Apache/2.4.41 (Ubuntu)
vary: Accept-Encoding,Cookie
cache-control: max-age=3, must-revalidate
strict-transport-security: max-age=63072000; includeSubDomains
content-length: 32161
last-modified: Fri, 11 Mar 2022 19:33:34 GMT
cache-control: max-age=1296000
expires: Sat, 26 Mar 2022 21:31:31 GMT
content-type: text/html; charset=UTF-8

Notice the line "server: Apache/2.4.41 (Ubuntu)." Disabling your server signature will hide this, making it harder for an attacker to discover what vulnerabilities your specific server version and operating system have.

Enable Server Level Caching (LiteSpeed Only)

If you're running OpenLiteSpeed or LiteSpeed rather than Apache, you can enable server side caching through .htaccess. LiteSpeed supports Apache's htaccess file format, and has some of its own modules that offer additional functionality.

While it's a better idea to do this through the LiteSpeed Cache plugin for a WordPress website, it's still possible through adding rules to your htaccess file. LiteSpeed has plugins available for several other content management systems as well.

The lightspeed server cache stores static versions of dynamically generated content. This way, WordPress won't have to execute PHP code every time someone requests a page, but instead, LiteSpeed can take over and serve the cached file.

Learn More About Page Speed

At Fastify, our mission is to help anyone with an online business or website speed up their site. If you're looking to learn more, be sure to check out the rest our blog. We also offer a step-by-step video course for WordPress that will help to to achieve perfect page speed.

GTMetrix vs PageSpeed Insights: Which tool is best?

If you're trying to optimize your site's speed, then you should be using a performance assessment tool such as Google PageSpeed Insights or GTMetrix. Wondering which one you should trust to measure your site speed?

There's no easy answer, since they both have their strengths and weaknesses, and you should actually use them both. In this article, we'll go over the pros and cons, and explain when you should pay attention to the report from each of the tools.


Table of Contents


Pros of Google Pagespeed Insights

Google's PageSpeed Insights is an essential tool if you're trying to optimize your site's speed. While the other tools report some useful information that PageSpeed Insights doesn't, you should always check your site with this online tool.

One thing PageSpeed Insights has that other tools lack is the field data section. Google collects data on page load times from Google Chrome users, and reports it within PageSpeed Insights. This is the same data that Google uses for its Core Web Vitals, which you can also find in Google Search Console. Page speed is a direct ranking factor with Core Web Vitals, and with this field data, you can get an accurate representation of how Google sees your site's speed.

By default, you'll see mobile results in Google PageSpeed Insights. With over 50% of mobile traffic now coming from mobile devices, it's critical that you page is well optimized for mobile. With PageSpeed Insights, you'll see lab results for a simulated mobile device on a slow 4G connection.

Although internet speeds in general have been increasing, it's still common that mobile users will find themselves on a slow connection at times. You should aim to have your pages load quickly in situations like this, and PageSpeed Insights makes it easier to test for the near worst case.

If you look into the "opportunities" section, then you'll see PageSpeed Insights gives diagnostics for what is slowing down your page, so have actionable insights when optimizing for speed. Although it can be confusing to know how to fix these errors, our blog has free resources to explain what they mean. We also have a step-by-step course to walk you though setting up your website for optimal speed.

Cons of Pagespeed Insights

Google PageSpeed Insights is a great tool, but when compared to other tools like GTMetrix, it's not without its downsides. That doesn't mean you shouldn't use it, just that you should know when to check other tools instead.

Sometimes PageSpeed Insights can have overly harsh results with its lab data for certain sites, when if you look at field data, the results are actually not so bad. For example, take a look at the PageSpeed Insights results for a Shopify store like LTTStore.com. You'll see the lab results look quite bad, but based on actual user data in the field report, it's reasonably fast.

There are some important metrics that you won't see in PageSpeed Insights, such as TTFB (time to first byte). PageSpeed Insights will tell you to reduce server response time if that time is outrageously long, but it sets the bar quite low, and using GTMetrix you can always see the true value.

Pros of GTMetrix

GTMetrix is great for the extra data you get back when compared to PageSpeed Insights. Its performance test reports things you won't see in PageSpeed Insights.

One of the most useful parts of GTMetrix is the waterfall analysis. You can view a chart of the order and timings for each resource that your page loads. This is useful for determining which resources are slowing your page down the most, and which ones don't need to be loaded at all.

GTMetrix offers some useful metrics that you don't need with Google PageSpeed Insights, like TTFB and onload time. If you want to get a full picture of your site's performance, you'll want to test in both of these tools.

With a free account, you'll remove the default limits on how many tests you can run per hour. You'll also unlock the options for test locations and internet connection speed. GTMetrix can also test with adblock on or off, and create a video of your page load so you can see exactly how it looks through the load process.

Cons of GTMetrix

GTMetrix reports some different metrics you don't get with PageSpeed Insights, however, it's not better in all ways.

One major downside to GTMetrix is that the score is overly optimistic. By default, it tests with the desktop version of Chrome on a faster connection, and can report a good grade for sites that really pretty slow. You'll need a pro account to unlock mobile devices, browsers, and every test server.

You should be optimizing for the worst case, a smartphone on a slow mobile connection. Although desktop and mobile are both important, speed on desktop comes easily once you've got good speed on mobile.

Other Speed Test Tools

There's lots of other page speed testing tools that you can run to get a better idea of how your site performs. Here are some of the best and most popular ones.

Pingdom Tools

Pingdom Tools is a testing tool that offers similar recommendations and metrics to PageSpeed Insights. It's great for a quick overview of your site's performance, but doesn't tell which resources specifically are slowing the site down. 

While you can change your test location to various different options, something that not all tools offer, this tool doesn't provide as complete of results when compared to GTMetrix and PageSpeed Insights. 

Google Lighthouse

Google Lighthouse is a page speed testing tool built into Google Chrome. Additionally, it includes audits for SEO, usability, best practices, and progressive web app standards. You can use the tool from Google Chrome's developer tools from the Lighthouse tab. 

The methods for testing performance in Lighthouse are same as Google PageSpeed Insights lab tests, but it's a good idea to test with this tool as well. You should try to fix any warnings not just in the performance section, but the other sections as well.

Which speed test tool should I use?

You should use a variety of different testing tools when optimizing and measuring your site's performance. It depends on what you're testing for.

For a general overview of your site's performance with some specific actionable insights, PageSpeed Insights is one of the best tools to use. Its throttled mobile tests give a more stringent, yet more accurate view of how your site will load in less than ideal conditions.

GTMetrix is easier to please when it comes to overall speed score, but offers some important information that PageSpeed Insights doesn't. The additional metrics like TTFB are very helpful when setting up caching or a CDN. Its waterfall analysis is great for determining which resources are being loaded, and which are hurting your performance.

It's good to also use Google Lighthouse for the additional audits, even if you've perfected the speed scores in GTMetrix and Google PageSpeed Insights. While the performance metrics look the same as PageSpeed Insights, you can identify some additional issues by using more tools.

Ready to become a page speed master?

We hope this article was helpful with understanding the differences, strengths, and weaknesses of the most popular speed tools. When comparing PageSpeed Insights vs other tools like GTMetrix, it's important to know when to use which tool.

To identify speed related issues is only half the battle. If you're looking for how to fix the issues you've discovered after performance testing, then our blog has the information you need to understand these errors, and where to start with fixing them as you work

to improve load time.

We also offer a video course that walks you through setting your site up for optimal speed, step by step. At Fastify, our goal is to give online business better results through speed optimization.

How to Improve Time to First Byte (TTFB)

Time to first byte is the duration between the start of a request, and when the browser first receives data from the web server. If you're looking to improve your web site's page speed, then improving TTFB is a great place to start. There are many reasons for time-to-first-byte to be less than ideal. We'll cover the most common reasons for slow TTFB and how to improve it.


Table of Contents


What exactly is TTFB?

Simply put, TTFB measures how long it takes for the server to start responding. It's measured from the instant the browser begin loading a file, to when starts receiving data. This metric includes network latency, DNS lookup, the SSL handshake, and the server's processing of the request.

Lifecycle of an HTTP Request

When the browser requests any resource, there are a few different parts of this process before it starts receiving the file.

  1. First, the browser needs to know the IP address for the server. For example, in order to connect to google.com it needs to look up the IP address for that domain. The browser contacts a known DNS server to find the IP address.
  2. The browser establishes a TCP connection with the server. This is a three-way process between the client and server. The three steps are known as SYN, SYN/ACK, and ACK. With HTTP2, this connection will stay open to download multiple files from the same server. With HTTPv1, a new TCP connection must be opened for every request.
  3. For HTTPS requests, there's an additionally a TLS handshake. This allows the server to agree on what protocol to use and share the keys required for the client to send encrypted requests. This process has many steps, but if you want to learn more about how exactly it works, then Cloudflare has a great overview.
  4. Now, the browser can send the actual request. This includes which HTTP method is being used (such as GET or POST), a list of headers, and the resource being requested.
  5. The server receives the request, processes it, and sends data back over the TCP connection.

All of these steps are counted in the total TTFB metric. Most of this you don't have any control over, however, you can reduce how long it takes for the server to process the request, and reduce latency between the client and server.

How to measure TTFB?

There are various free page speed testing tools you can use online to measure TTFB. You can simply enter your website URL, and these tools will report back lots of useful information. We'll go over some of them below.

GTMetrix

GTMetrix is a good tool for testing page speed in general, and it also reports a time to first byte metric. While this tool isn't the best for measuring overall speed, and its letter grade is overly optimistic, it's great for checking how your changes have improved TTFB. Running speed tests with PageSpeed Insights will give you better overall results, but less detailed data for diagnosing issues.

Web Page Test

WebPageTest is another general tool for testing lots of metrics related to pagespeed. It reports TTFB, as well as lots of other things, and is a great tool for diagnosing all pagespeed issues. You can choose between various devices and connection speeds, to see how your site performs under various conditions.

Byte Check

Byte Check is a tool dedicated to measuring TTFB. It will break down how long DNS lookup times are, SSL handshake times, and server processing. If you're looking for a simple app to quickly check TTFB, then this is it.

Google Chrome DevTools

The developer tools in Google Chrome also report TTFB. This is a good way to test time to first byte on your own computer. Keep in mind that TTFB will vary depending on geographical location, so even if from your machine it looks low, you should consider setting up a CDN for fast asset delivery to users located around the globe.

Why does time to first byte matter?

Time to first byte adds to the total load load of your pages. As the server processes requests from a user's browser, they'll see a blank page, regardless of the speed of their internet connection.

TTFB is important because it directly impacts your pagespeed. If you're doing SEO, then this matters because of Google's Core Web vitals. Google measures your page loads, and uses speed as a direct ranking factor to influence search rankings. Not only that, but bounce rate and loading times have a directly correlation, and bounce rate is another ranking factor.

Even if you're not doing SEO, then site speed is important. For example, if you're running paid traffic, then every user who clicks your ad and gets tired of waiting for the page to load is money wasted. For any traffic source, you're going to want to make the most of all of your website's visitors.

Use a Caching Plugin

If you're using a CMS like WordPress, then the server processing time may be slowing your TTFB down. Most web pages do not change on every request, and do not need to be treated as dynamic content. By using a cache plugin, your the HTML of your WordPress site will be saved as static content, and served to user without requiring the webpage to be regenerated.

Use a Content Delivery Network (CDN)

Even with caching enabled, and with a fast and properly configured web server, a content delivery network can greatly reduce server response times. Since data center location relative to the user will impact server response time, a CDN makes sure your files are always stored geographically close to the user.

A CDN can also reduce network latency even when users are located near the physical server. For example, when you use Cloudflare's CDN, fewer network hops are usually required to reach the server. Cloudflare, and other CDNs, have fast direct connections to ISP equipment, so users can access your files faster. With Cloudflare, you can even see a low TTFB around 50ms.

Use a Fast Web Host

Make sure your web server or host isn't slowing your site down. On some shared hosting plans, the server hardware is too weak to support the sites running on it very well. Rather than using a shared host, it's best to use a VPS provider like DigitalOcean, or use optimized WordPress hosting such as Kinsta or WP Engine. While a CDN can make up for this, it's best to keep your website's TTFB at a server level fast too.

Check Your Web Server Configuration

There are some server configuration issues that may cause a slower TTFB. You should make sure that the canonical versions of your URLs never redirect, and that you're always linking to canonical versions of resources. Each additional redirect is another request, and will slow down the load. If you're using complex firewall rules then this can increase how long it takes for the server to respond.

Conclusion

Improving time to first byte is an easy step you can take to improve your site's overall performance. Slow pages will drive users away, so the faster your site, the more users engage with your site, and the more leads, sales, conversions, or affiliate link clicks you'll get.

At Fastify, we've worked to perfect pagespeed. Check out the rest of our free resources to learn how you can speed up your site too. We also offer a step-by-step course that will show you exactly how to optimize your pages to make them as fast as possible.

How To Defer Offscreen Images In WordPress

If you’re looking to improve the performance of your WordPress site, you’ve probably tested it with Google PageSpeed Insights. You may have come across the warning “defer offscreen images.” In this article, we’ll explain how you can fix "defer offscreen images" by lazy loading your images.


Table of Contents


What does “defer offscreen images” mean?

In Google PageSpeed Insights, the “defer offscreen images” warning means you should only initially load images visible above the fold, and load below the fold images later when they’re needed. This speeds up the initial rendering of the page, since the browser won’t have to download every image right away. This technique is known as lazy loading.

Why is deferring offscreen images important?

For the fastest load times, you should only load critical resources initially, that is, ones that are essential to rendering the above the fold section of the page. Offscreen or hidden images by default, are part of the initial load, but those aren't critical resources, so we can delay the loading until they're needed.

Page speed is not only an important factor in SEO, but also if you're running paid traffic to your site. Users don't like to wait around, and the faster your site, the more people will end up actually interacting with your content. By lazy loading offscreen images, you can make your page load speed much faster.

What is lazy loading?

Lazy loading is when you defer the loading of resources until after the page is finished loading. In the case of lazy loading images, they are usually set to load as the user scrolls down the page. This is most commonly done with JavaScript, using a library that listens for scroll events and uses the intersection observer API. Now the HTML standard includes support for lazy loading images, and soon most users will be on a browser that supports it natively.

Defer offscreen images with a plugin

In WordPress, you can easily enable lazy loading images on all of your pages with a plugin. Using a lazy load plugin is generally the best and easiest way, since it doesn’t require editing code, and these plugins aren’t going to weigh your site down and make it slower.

There are a few popular options for WordPress lazy loading. You can easily fix the "defer offscreen images" warning with any of these in just a few clicks. Just search for them on the WordPress plugin repository, and enable lazy loading in the plugin settings. If you're looking for more free WordPress plugins that will speed up your site, check out our previous article.

Autoptimize

Autoptimize is a very popular speed optimization plugin for WordPress. Best of all, this plugin is totally free. Its main feature is minifying and combining JavaScript and CSS files, but it also can enable lazy loading.

The lazy loading function of this plugin inserts the lazysizes.js JavaScript library into your pages,  and rewrites all of your image tags so they lazy load. It includes <noscript></noscript> fallbacks for browsers with JavaScript disabled, and inserts SVG placeholders until each image loads. The placeholder prevents large layout shifts and bad CLS scores

On Fastify.com, we’re using Autoptimize to lazy load images. We use this plugin to combine and minify our JS and CSS, so enabling lazy loading through the same plugin is a good choice. If you're using another plugin for concatenation and magnification, like Asset Cleanup, then you may want to consider the next option, Lazy Loader.

Lazy Loader

If you're looking for a simple plugin that only handles lazy loading, then Lazy Loader is a great choice. Not only can it handle lazy loading images, but it can lazy load background images, iframes, videos, and audio. All the images on your page will be lazy loaded by default, but you can exclude specific images by specifying CSS classes.

Using this plugin, images are lazy loaded with lazysizes.js. It includes more configuration options that the other plugins listed here, so if you're looking to fine tune your lazy loading settings, this plugin may be the best choice.

WP Rocket

WP Rocket is a popular caching plugin for WordPress. It also has an image lazy loading feature. This is a paid plugin, so if you have some other caching plugin you’re happy with, like WP Super Cache, then it’s not recommended to purchase this plugin just for the lazy loading. However, if you use WP Rocket alraedy, this is a great option.

LiteSpeed Cache

LiteSpeed Cache is a free cache plugin with many other optimization features. Although you need to running the either OpenLiteSpeed or LiteSpeed as your server software to get the most from this plugin, it also works with other servers like Apache and Nginx. LightSpeed Cache has an option for lazy loading, so you can defer offscreen images in just a couple of clicks.

Smush Pro

Smush is a WordPress plugin that resizes and optimizes images automatically. This plugin can also enable image lazy loading. While plugins like Smush aren’t necessary if you manually optimize images before uploading them, if you do use Smush, then this is a great option. With the flick of a switch, you can enable lazy loading for all images on your site.

Defer offscreen images without plugins

It’s possible to lazy load images without plugins, however, these methods will require manually editing your theme code. If you’re using a page builder tool, then these methods may not be possible without making major edits to the plugin.

Generally, it’s best to just use a plugin to enable lazy loading. There's no real downside, and it's a lot less work. If you’re feeling determined and have the technical chops, then here’s how you can do it without plugins. You may also want to know this, just to understand what lazy load plugins are actually doing to your site.

Lazy Load Images With JavaScript

For the best browser support, you’ll still need to use JavaScript to lazy load images. If you want to lazy load images on old browsers like Internet Explorer, you'll need to do so with JavaScript. You can use the popular lazysizes.js library to do this. Once you’ve loaded the library, you can rewrite your image tags.

Many lazy loading plugins use this JavaScript library, like Autoptimize and Lazy Loader. They simply insert the library into your pages with a script tag, and rewrite your image tags to look like this example code. Just replace the src attribute with the data-src attribute, and add the lazyload CSS class for your image tags.

<img data-src=“/path/to/image.jpg” class=“lazyload”>

Lazy Loading Images With HTML

As a newer part of the HTML standard, you can natively enable lazy loading just by setting the “loading” attribute on your images to “lazy.” This will lazy load images in the same way that lazysizes.js does, waiting until the users scrolls near them to load the file.

Although this will make the warning go away in PageSpeed Insights, keep in mind that this won’t actually work on older browser versions. Native lazy loading is supported by the latest versions of major browsers, but until most users upgrade, you won't get the best coverage this way.

<img src=“/path/to/image.jpg” loading=“lazy”>

Is lazy loading good for SEO?

You may be concerned that with lazy loading, Google may be unable to fully crawl your page. However, Google’s crawler is able to execute JavaScript, and Google encourages lazy loading, so this isn’t a problem. Additionally, the lazysizes.js library automatically loads of your images for user agents that can't scroll, like Googlebot. With native HTML lazy loading, the image tags are standard and crawlers will have no issue understanding them.

If you use lazy loading, you’ll be speeding up your site, which benefits your SEO. With Google’e Core Web Vitals, page speed is a direct ranking factor. Speed also indirectly  impacts your SEO, since faster sites have lower bounce rates, and bounce rate is another ranking factor.

Lazy loading is good for SEO, since it speeds your site up, and anything you can do to speed your site will help with SEO. If you've enabled lazy loading, not only should you see the warning disappear from PageSpeed Insights, but the Core Web Vitals will improve as well.

Ready to become a WordPress page speed master?

At Fastify, we’ve worked for years to find all the tricks to achieving perfect page speed. If you’re looking to get the best performance out of your WordPress site, then check out all of the other free resources on our blog. We also offer a step-by-step video walkthrough course that shows exactly how to set up your site for the best performance possible.

How to Improve First Contentful Paint

If you're trying to optimize your website's speed, you've probably heard about Google's Core Web Vitals. This includes, among other metrics, first contentful paint. In this article, we'll explain what FCP is, why it matters, and the biggest things you can do to improve it.


Table of Contents


What is first contentful paint?

First contentful paint is how much time it takes for the first bit of content to be painted to your page as it loads. This metric is important beacause with a faster FCP score, users perceive the page to be loading faster. Before the first contentful paint, users will just see a blank page, and the first contentful paint lets them know the page is actually loading.

How can you measure FCP?

Tools such as PageSpeed Insights, Google Lighthouse, and GTMetrix will all report Core Web Vitals, including first contentful paint. However, keep in mind that you should be most concerned with the mobile performance, since mobile devices make up for over 50% of web traffic. Optimize well for mobile, and the desktop speed will come easily. 

GTMetrix reports desktop results, so it can be misleading to rely on it alone. However, its waterfall chart is great for identifying which resources are slowing your load speed down.

PageSpeed Insights and Google Lighthouse will give you very similar results, and both will give results for mobile devices by default. They simulate a phone on a slow 4G connection, which is important to optimize for, since your users may not always be on a fast connection. You should aim for pages that load fast in all conditions.

Eliminate Render Blocking Resources

When your browser renders a page, it not only has to download the HTML document itself, but other files such as CSS files and Javascript files. If your page isn't properly optimized, then these CSS and JavaScript files will slow down your page, as your browser waits for these files to download. To improve your first contentful paint, you should eliminate render blocking resources as much as possible.

Avoid Large CSS Files

Large CSS files with unused code are big contributor to slow first contentful paint. Since external CSS files are render blocking, your browser has to wait for them to finish downloading before it can parse and render your content.

You should eliminate any unused CSS code from your site, and get your CSS to be as small as possible. You can also inline critical CSS, that is, CSS that's needed to properly display the above-the-fold section of your page. This allows you to defer the rest of the CSS until after page load.

Use Async Attribute For JavaScript

Similar to CSS, JavaScript files can be render blocking resources. However, since on most sites, JavaScript isn't needed to render the page initially, you can delay the loading of your JavaScript until the page is loaded.

Here's an example of a JavaScript tag with the async attribute:

<script src="script.js" async></script>

The async attribute tells the browser that it can start loading the script file at any time, and it can continue parsing the HTML and rendering the page in the meantime.

There's another similar attribute called "defer". This works similar to async, but it tells the browser it must wait until the page is fully loaded. This can be useful for controlling the order that scripts load, or for delaying execution of JavaScript that's less important for the user experience.

Here's an example of the defer attribute in action:

<script src="script.js" defer></script>

On our website at Fastify.com, we have two script loading. One is lazysizes.js, which uses async. That's because we want lazy loading images to work as quickly as possible, and this is a small file that won't majorly impact load times. After that, we load the main JavaScript bundle, which contains less essential functionality, like jQuery, the mobile menu, and the animate on scroll library.

Remove Google Fonts

While Google's Web Fonts provide an easy way to customize your site's typography, they can also significantly slow down your webpages. You have a couple of options for dealing with this.

First, the most easiest option is to use a system font instead. This might not be desirable for some, but if you're okay with the appearance of system fonts, this is the best option.

You can also self-host your webfonts and retain the custom appearance, but significantly improve your site's performance to near the same level as using system fonts. You can check out our article on self-hosting fonts for more information. The fonts on this website are self-hosted, which is part of how we're able to achieve near 100 PageSpeed Insights score, even with advertising pixels installed.

Ensure Text Remains Visible During Load

When you're using web fonts, you may notice a flash of invisible text, or FOIT. As the browser downloads your custom font, it will display nothing in the place of text, until the font is finished downloading. This will lead to slower first contentful paint times, since it's a delay before the browser renders your content.

To fix this, you should use the "font-display" property on your font face declarations. You can read more about this in our article on optimizing fonts.

Replace Background Images With Image Tags

It's a common design pattern for websites to use a hero section with a background image at the top of the page, overlayed by a heading, some subtext, and a call to action button. However, using CSS to display these background images can be significantly slower than using an image tag.

If your pages have a hero section with a background image, you can speed up the page by replacing it with an img tag instead.

Here's an example of CSS you can apply to an image to make it look like a background image. Remember, you'll need to set position to relative on the image's container for this to work.

position: relative;
top: 0;
left: 0;
right 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;

Optimize Your Images

Optimizing images is one of the most important page speed optimizations. Images tend to be the largest files on a site, and the longer it takes to download your images, the longer your first contentful paint. Check out our complete article on image optimization for more tips on how to shrink image files down as much as possible.

Avoid Lazy Loading Above The Fold Images

Lazy loading images is a great way to speed up your pages, and PageSpeed Insights will suggest that you do so, if you aren't already. However, there are some images you don't want to lazy load. For any images above the fold, you should try disabling lazy loading. You know these images are going to be needed immediately, so lazy loading them will only slow the page down.

Inline Small Image Files

For some very small image files, it can make your page faster to inline them in the HTML, rather than loading them as separate files. This is possible with SVG images, or encoding other formats as base64 and using data URLs.

You can use Base 64 Image Encoder to encode your images. Simply upload your file, and the tool will generate a base64 encoded version that can be used inline within your HTML and CSS.

When using the base64 encoded image with an img tag, the code will look like this:

<img src="data:image/jpeg;base64,...">

You can also use the base64 code in CSS like this:

.some-class {
  background: url(data:image/jpeg;base64,...);
}

SVG, also known as scalable vector graphics, is an format for vector graphics that generally results in very small files. You can embed these images directly into your HTML document. For example, you'll find code that looks like this within any .svg file, but this can also be pasted into HTML.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx='50' cy='25' r='20'/>
</svg>

Simply insert SVG code into your HTML like you'd do with any other tag!

Use Resource Hints

For resources that are essential to rendering the above the fold section of your page, you should try using resource hints. Resource hints are simply HTML tags you add to the head of your page, and give a hint to the browser that a resource is important. 

When using resource hints, you should always test before and after, and don't add too many. With too many resource hints, or ones for the wrong resources, you'll end up slowing your page down.

Preloading fonts

If you're using custom fonts on your pages, it's likely going to speed up metrics like first contentful paint by adding a resource hint. Take a look at this example code:

<link rel="preload" as="font" href="/path/to/font.woff2" crossorigin>

This is sometimes also referred to as "rel preload." This simply instructs the browser to start downloading the specified file ahead of time. Note the crossorigin attribute, which is required for all fonts, even if they're on the same domain.

Preloading webfonts can speed up your pages, since it eliminates what's known as a critical request chain. This is an issue where your browser first needs to load the CSS and see the font face declaration, before it knows to start downloading the font. By preloading, the browser can get a head start, and your font will be ready sooner.

Preloading largest contentful paint image

Many web pages have a large hero image above the fold, and preloading it can speed up your first contentful paint, as well as other metrics like largest contentful paint. 

Here's an example of preloading an image.

<link rel="preload" as="image" href="/path/to/image.jpg">

Improve Server Response Time

If your server response time is slow, then it's adding to all of the other Core Web Vitals metrics, like first contentful paint. Slow server response time can be caused by a number of factors.

GTMetrix is a great tool for measuring server response time. Look for the "time to first byte" (TTFB) metric. This measures how much time it takes from when the browser makes a request to when it first starts receiving data from the server.

The time to first byte will be under 100ms for a well-optimized site. With a CDN like Cloudflare, you'll even see under 50ms at times! If your time to first byte is much more than 100ms, then it's a problem you should try to address.

If you're using WordPress, then the first thing you should check is that you have a cache plugin installed. Cache plugins will save your page's HTML as static webpages, and deliver them to users, rather than running WordPress's PHP to generate the page every time a request is made. This significantly cuts down the response time and server load.

You can improve your server response time much more if you use a CDN. Sometimes a CDN is used only to deliver assets like images, or CSS and JavaScript files. However, ideally your CDN should cache your HTML content.

With Cloudflare, you can cache your entire site with the WP Cloudflare Super Page Cache plugin. Check out our guide on other free WordPress plugins to speed up your site.

How to serve images in next-gen formats for WordPress

Are you seeing the "serve images in next-gen formats" warning in Google PageSpeed Insights for your WordPress site? When you see this warning, PageSpeed Insights is suggesting you use modern formats such as WebP images, which will give you smaller a file size when compared to JPEG or PNG. There's a free WordPress plugin that you can use to accomplish this, as well as some other options. In this article we'll explain what exactly this message means, and how you can fix it.


Table of Contents


What are next gen formats?

In the earlier days of the internet, we had formats like JPEG, PNG, and GIF to pick from when serving images. We'll go over the differences between each of these formats later in the article, but they all have different use cases. Now browsers support image formats that have made some improvements.

The WebP format is the most widely supported of next gen formats. It's supported by recent versions of all major browsers, including Microsoft Edge, Google Chrome, Mozilla Firefox, and Apple's Safari.

There's another even more modern format called WebP, which is now nearly supported by every modern browser. The only major browser that's yet to add support is Safari. This is because that with Safari, image decoding is delegated to operating system, so we'll have to wait for future macOS and iOS releases for AVIF support in Safari.

Although Safari doesn't yet support AVIF, it does support WebP images, and you'll still see most of the benefits of these next-gen formats. AVIF is even more efficient than WebP, but Safari's lack of AVIF support isn't a major issue while we wait for Apple's operating systems to support the format.

Why is using next-gen formats important?

Although internet connection speeds have improved, not all users will have a fast connection at all times. On slow connections, image optimization will make a big difference in page load times.

Not only does Google directly measure your page speed as part of their Core Web Vitals, but users will bounce less frequently the faster your page is. That makes it important for SEO, but also just as important if you're running paid traffic.

How to Serve WebP Images in WordPress

If your site is built with WordPress, then fortunately it's very easy to start serving WebP images, and you can do it with a free plugin. You'll find a few different plugins that can do this in the WordPress Plugin Directory. The "WebP Converter For Media" and "WebP Express" plugins can both be used for free and are easy to set up.

Both of these free plugins are very similar, but at Fastify, we prefer to use WebP Converter for Media. This plugin offers easy configuration, and can automatically convert previous uploaded images to next gen image formats in a batch, so they're ready to serve immediately.

These plugins work by modifying your htaccess file to serve different image formats based on the accept header from the user's browser. Browsers send a header along with each request, letting the server know if they accept WebP images.

While the current versions of every browser support WebP, not all browsers are compatible with same image formats. This is important so that older browsers such as Internet Explorer can still use your website.

The WebP Converter for Media plugin will selected the appropriate file format based on which format is smaller. In some cases, the original file may be smaller, in which case the plugin will skip WebP conversion.

This plugin can also convert images to AVIF if you purchase the pro version. However, this is totally optional if you're looking to satisfy the next gen images check in PageSpeed Insights.

Use Cloudflare to Serve WebP Images

Another option for easily serving WebP Images is with Cloudflare's Polish feature. Cloudflare can automatically compress images, as well as automatically convert images to next gen formats. You'll need the $20/month Pro plan of Cloudflare to use this feature.

If you're already using Cloudflare, then you should use this method, and not use a WordPress plugin. That's because Cloudflare will only cache the original images, and won't know to deliver WebP images to supported browsers. With a WordPress plugin, that logic happens on your web server, and by using a CDN, requests from users never hit your server, only the CDN.

Cloudflare supports the AVIF format, and if you turn on WebP within Cloudflare's settings, it will not only convert images to WebP, but will use AVIF when browsers support it.

Image Formats Compared

There are many different image formats. Some of them have existed for decades, some of them more recent. Let's take a look at the history of some of these formats and what they're used for.

JPEG

JPEG is one of the oldest image formats. JPEG is a lossy compression format for images. This means that the compression degrades the image quality. You can significantly reduce the file size of an image with lossy compression before it becomes noticeable.

When compressing images as JPEG, you'll want to find a balance of compression level and file size, so that the images are not obviously of lower quality but the file size is reduced.

JPEG images are usually a better choice than PNG, but there some are instances when a PNG will be smaller. Generally you should optimize your images in the JPEG format before uploading to your site. However, if your image is very simple and has a small color palette , PNG may be smaller. This is often true for images such as logos and icons.

While JPEG is usually a more efficient format than PNG, it's not without its downsides. For example, the PNG image format supports transparency while JPEG images don't.

In many cases, you can work around this by filling the background of a PNG image with a solid color to match the background color on your website. However, if you're using a gradient background, for example, JPEG likely won't work in that case.

JPEG XR

JPEG XR is a format that was designed to replace JPEG, with better compression and features. However, this format never was widely adopted, and has been superseded by formats like WebP and AVIF.

JPEG 2000

Similarly to JPEG XR, this is format that was designed to replace the original JPEG format, but never received wide support.

JPEG XL

This is one of the most recent image formats. It offers similar compression to AVIF and more features, but all browsers have yet to enable support by default. This format can be enabled for development and testing in some browsers, and we'll see it supported by default in the future.

PNG

PNG is another format that's been around since the early days of the internet. It uses lossless compression, meaning the quality of your images won't degrade, but this also limits how much you can shrink the file size of a PNG.

The main benefit of the format is that it supports transparency. In many cases, this feature is used when it would be more efficient to use JPEG, and fill in the background with a solid color.

However, in some cases, you may want to use an image over something that isn't a solid color. In these cases, you may need to use PNG since it would be impossible to match the background of your page otherwise.

If your site has a large transparent PNG and it's not possible to replace it with JPEG, you should consider changing the design of your site so you can use a smaller image file. Images tend to be one of the biggest reasons for a slow site, and if the design of your site is forcing you to use huge image files, then it might be best to reconsider.

GIF

GIF images are typically used for animations. They contain multiple frames that automatically swap out after a set period of time. GIFs are quite an old format, and are not very efficient with their compression. It's usually best to avoid GIFs wherever possible, using alternatives such as HTML5 video when possible, or WebP.

WebP

WebP is the most supported next-gen image format. It supports both lossy and lossless compression, transparency, as well as animation. Generally converting GIF, JPEG and PNG images to WebP will result in much smaller files, faster pages speed, and at the same image quality.

We recommend the WebP converter for media plugin if you're using WordPress. This plugin can automatically convert all of these formats to WebP, and serve the WebP image to browsers that support WebP.

AVIF

AVIF is an even newer next gen format than WebP, and is designed to supersede WebP, along with other image formats such as JPEG, PNG, and GIF. It offers better image compression than all of these formats.

Checking If WebP Is Enabled

After you've set up WebP, you might want to verify that it's actually working. There's a few ways you can do this.

Using Google Chrome's Dev Tools

Using the network tab in Google Chrome's dev tools, you can check which format your images are being served as. See this example from the homepage of Fastify.com. Notice how although the image file names end in .jpg, the "type" column shows these images are being served as WebP.

Using Curl From the Command Line

You can check if WebP is enabled using the curl tool from the command line. If you're on Mac OS or Linux, then this tool is available by default on your system.

Use the following command in the terminal.

curl -H "Accept: image/webp" -I https://example.com/your-image-url.jpg

Here's the result when running this command on our site's navbar logo. Notice how the result shows "content-type: image/webp" which confirms WebP is properly configured.

Want to learn more about WordPress page speed?

If you're looking to make your WordPress site as fast as possible, then we're here to help. We offer free resources on our blog here at Fastify, as well as a step-by-step walkthrough video course. Our course will give you an easy guide on achieving perfect page speed scores, but for a deeper dive, our blog is a great resource for those who want to get their hands dirty and learn everything about what makes a website fast.

How To Fix "Properly Size Images" in PageSpeed Insights

If you're looking to speed up your site, and are seeing the "properly size images" message in Google PageSpeed Insights, then this article will explain what that means, and how exactly you can fix it. Oversized images on your page will trigger this warning.

What exactly does this mean? Google has determined your image dimensions are larger than necessary in their dimensions, meaning the file size is also bigger than necessary. Of course, forcing users to load in larger files will slow your page load down.

Finding Image Dimension

In order to serve images at the correct dimensions, you'll have to find out the rendered image dimensions.

The easiest way to find how large images are rendering in your browser is to right click them, and inspect them. Your browser's developer tools will appear, and will show you exactly how many pixels in width and height the image size is.

Take note of these dimensions, and resize the image file to match to actual image size on page. To learn how exactly to resize and optimize images, see our article about image optimization to learn more, including lazy loading images.

You'll want to use a tool like Squoosh to resize and compress images. Simply upload your original image, and enter the dimensions you found, and download the optimized image. This tool, and others like it, will resize and efficiently encode images to keep their file size down. You can select the image quality and preview the results.

It's also acceptable to resize some image to twice their rendered dimensions. For example, you can resize a logo that renders at 300px x 100px to 600px x 200px. On high-DPI screens, such as the ones in iPhones, Macbooks, and other high end devices, your images will appear more clear with the extra pixels. This can be noticable on some images like icons and logos.

PageSpeed Insights will report an image URL for each image that needs attention. However, it doesn't always catch everything, so we recommend you manually check each image on your pages when optimizing images. The PageSpeed Insights audit will fail only when you can save at least 4KB by resizing the image, so it gives a small threshold where your images may be slightly unoptimized.

Using Responsive Images

Some images on your site may be responsive, meaning they change in size depending on the width of the browser window. This means they'll be much narrower on mobile devices like smartphones and tablets than on desktop or laptop computers.

If you've resized your images based on their rendered dimensions, you may still be setting the "properly size images" PageSpeed Insights error under the mobile results. You don't want to resize the images smaller for mobile devices, because then they'll look blurry on larger screens. Luckily, there's a solution for this.

The HTML spec includes a feature for img tags to handle this. You can add extra attributes to your img tags, telling the browser to fetch a different version of the same image based on screen width.

For a quick example of how this works, see this code:

 <img src="hero-image.jpg" 
   srcset="hero-image.jpg 1800w, hero-image-300x225.jpg 300w, hero-image-768x576.jpg 768w" sizes="(max-width: 1800px) 100vw, 1800px">

This code defines three different width images, 1800px, 768px, 300px, in the srcset tag. The browser will select which image to load depending on the width of the window or screen. The sizes tag tells the browser how wide the viewport is to help it decide which image to load. You can learn all about this from Mozilla for a more thorough explanation.

If you're using WordPress, Webflow, or some other content management systems, then this is taken care of for you. The CMS will automatically generate smaller image variations and insert the srcset and sizes attributes into your image tags, so the browser loads smaller images on smaller screens. Just make sure your theme handles this correctly, or you've set it up correctly if using a page builder. This is particularly important for featured images.

Still seeing warnings in PageSpeed Insights about your images? Here are some other common page speed issues relating to images. 

Defer Offscreen Images

This message means that you need to enable image lazy loading. Using this technique, your images will only load as the user scrolls down the page, not all at once. 

With many popular content management systems, this option is built in. If you're using WordPress, you can use free plugins to enable lazy loading optimize your page speed such as Autoptimize. The JavaScript library "lazysizes.js" if you have a static site or some other custom solution.

Use Next Gen Image Formats

If you're seeing this message, you need to serve images as WebP to fix it. If you purchase a pro plan from Cloudflare, you can have your images automatically converted and served as WebP. There's also a free WordPress plugin called WebP Converter for Media that will do this. On some platforms, such as Webflow, WebP is not supported.

Use Explicit Width / Height

For all images on your page, you should set explicit dimensions based on how large the image actually displays. You can inspect images in your browser to find their rendered dimensions, and then set the image's width and height to match.

Best Free WordPress Plugins To Speed Up Your Site

WordPress is the most popular CMS software on the planet, and with its wide selection of plugins and themes, you can use it to easily build just about any kind of website. However, without taking page speed into consideration, you can also easily slow your site down.

Some people incorrectly assume WordPress websites are always slow. However, this isn't the case. With just some free plugins, you can take your slow WordPress site and fix some common page speed issues in just a few clicks. Here are the top plugins to speed up any WordPress site.


Table of Contents


WP Super Cache

WP Super Cache is a free plugin for WordPress that enables caching for your HTML content. The plugin generates static files for your pages, so WordPress won't have to regenerate pages each time they're requested. 

This will significantly reduce your server load and speed up your time-to-first byte, and is an easy way to speed up your pages. Every WordPress website should always have a cache plugin installed, and WP Super Cache is one of the best cache plugins.

Other popular free cache plugins include Cache Enabler, W3 Total Cache, WP Rocket, and WP Fastest Cache. If you're using OpenLiteSpeed for your web server, you should use LiteSpeed cache instead, and remove any other WordPress caching plugin. However, for Apache, a cache plugin like WP Super Cache is a must 

Autoptimize

The Autoptimize plugin serves a few different purposes. This is an essential plugin for us when we're optimizing any WordPress website.

First, it will concatenate your CSS into a single file, and concatenate your JavaScript into another single file. Combining separate files speeds up your site performance by reducing the number of HTTP requests. Although with HTTP2 configured on your webserver, the overhead for making additional requests is reduced, concatenating CSS and JavaScript files still is faster.

Not only does this plugin combine CSS and JS files, but enables CSS and JavaScript minification. This removes unneeded whitespace from the files, and for JavaScript, uses some extra tricks to further reduce the file size without sacrificing any functionality.

This plugin also can enable image lazy loading. Especially for pages with many images, lazy loading is one of the biggest things you can to do speed up your site. Lazy loading works by changing the default behavior of images.

Rather than loading all of the images on the page at once when you first load a page, your browser will only load images as the user scrolls down the page. Since images tend to be the largest files on a page, this makes a huge difference to lazy load them.

This plugin has some bloat removal options as well. It can disable WP emojis and disable Google Fonts. If you're looking for an alternative, then WP Super Minify will handle the concatenation and minification.

WP Cloudflare Super Page Cache

With just a free Cloudflare account, this caching plugin lets you take advantage of Cloudflare's cache functionality for your HTML content. You should install an other cache plugin as well, or use this plugin's built-in local caching functionality, but the Cloudflare Super Page Cache plugin will speed up your site even more.

Cloudflare is CDN, or content delivery network, that has servers in various locations around the world. Their servers are located closely to ISP equipment, meaning with Cloudflare you'll get lower time-to-first-byte than even a fast server nearby.

Unlike Cloudflare's official WordPress plugin, this plugin only needs a free plan. It also integrates with many other common WordPress plugins, making it a better choice than the official plugin.

This plugin will set up Cloudflare to cache your HTML pages, so requests to your site can entirely skip your server, and the files can be served directly from Cloudflare. Your entire site can be served from the CDN, meaning your page speed isn't depending on your host or server configuration options.

While it does something similar to other caching plugins, you should still set up caching on your own server. This ensures that in the worst case, a user visits your site from a region where Cloudflare doesn't have your page cached yet, they'll still get it reasonably fast.

Cloudflare also has more features for pro accounts. It's able to resize images, convert images to WebP, delay loading of JavaScript, and minify your site's code. Even with just the free version, you'll be getting very fast server response times. With all of these features, some only available on a Pro plan, this may be the single best WordPress performance plugin.

Asset Cleanup

Asset Cleanup is a free plugin that allows you to disable specific JavaScipt and CSS files from loading on a per-page basis. It gives you granular control over which assets are loaded on each page, or on each type of page, so that you're never loading in JavaScript or CSS files that go unused.

If you've done a good job of optimizing your site, then you won't have a lot of unused JavaScript and CSS being loaded in. However, even otherwise highly optimized sites can see a small benefit from this plugin. If you're seeing a message in PageSpeed Insights telling you to remove unused CSS, then this plugin might do the trick.

This plugin has some additional bloat removal options. It can remove things most sites won't need, such as WP emojis, dashicons, and unneeded tags in the head of your site. Be sure to try out these settings for an easy way to eliminate bloat and improve your website speed.

This plugin can also handle combining CSS and JavaScript files, but plays nicely if you have Autoptimize installed as well. It includes options for disabling common WordPress bloat, such as extra tags in the head of your page, Google fonts, and default WordPress CSS.

Another plugin that can handle this is called PerfMatters. This alternative does have a nicer user friendly interface. Howerver, this is a paid only plugin, and Asset Cleanup can do it for free.

WebP Converter For Media

This free plugin for WebP conversion is an easy way to speed up your site in just a few clicks. If you're seeing the message in PageSpeed Insights that you need to load images in next-gen formats, then this plugin will fix it. WebP is a newer format that can compress images further than JPEG or PNG.

This plugin will automatically generate a WebP version of every image you upload, given that the WebP version is smaller than the original. The plugin settings allow you to select the image quality to increase the level of compression (we like setting it to 75% to get the smallest files). When you set the plugin up, it will generate WebP versions for all existing images.

The plugin will configure your web server so these new versions are served to browsers that support WebP. While all modern browsers support the format, some older ones don't, so with this plugin, you'll get the speed boost on newer browsers, and fallback to the original images when necessary.

By upgrading to the premium version, you can also convert your images to the AVIF format. Converting to WebP is certainly good enough, however, if you're looking for that extra little bit of speed, then AVIF will apply even better image compression.

Async JavaScript

While the Autoptimize plugin will combine JavaScript files, and set the resulting bundle to load asynchronously, your site may still have third party JavaScript files that you need to load. It's best to avoid this whenever possible, but if you can't, the Async JavaScript plugin will reduce the impact of those scripts.

In HTML, script tags support two attribute for controlling the loading JavaScript, async and defer. This plugin will automatically set all scripts to use the async attribute, or if you'd like, the defer attribute. If you're not using any third party scripts, you may not need this, but if you are, it's highly recommended.

WP YouTube Lyte

YouTube iframes are a common reason for slow performance, and they really slow down any page by a lot. This plugin will automatically replace standard YouTube embeds with a placeholder that only loads the full video when clicked.

Since this plugin works by replacing videos with an image, if you lazy load images, then your videos will have no impact at all on the load speed, only causing the browser to load anything when needed.

In PageSpeed insights, you may notice the message for "facade available" if you've embedded a YouTube video in your page, along with many other warnings related to YouTube videos. Something like this plugin is what it's suggesting you should use to lazy load your videos.

WP Smush

Image optimization is one of the most important steps to page speed optimization. While it's best to optimize images before uploading to your site, if you already have a lot of unoptimized images, the Smush plugin can take care of automatically applying compression.

The free plugin is limited, and if you have a very large number of images on your site, you'll need to upgrade to the paid plugin. If you've optimized your images manually already, then this WordPress performance plugin isn't needed.

OMGF - Locally Host Google Fonts

If you're loading in third party fonts, such as from Google, then you should instead self-host the fonts to speed up your page load times. For every request to a third-party domain, your site slows down due to overhead from extra DNS requests.

The OMGF plugin will automatically download font files to your server, and replace your web fonts with self-hosted versions. For some plugins, such as Oyxgen Builder, you'll need to upgrade to the pro version of this plugin.

Alternatively, you use Google Webfonts Helper to locally host your fonts. This is a non-WordPress specific solution, so there's no plugins required using this method. Simply select your font, download the provided zip file and upload the fonts to your server, and add the provided CSS to to WordPress by navigating to "Customize" in the admin bar and "Custom CSS." You'll need to disable Google Fonts as with another plugin, such as Autoptimize or Asset Cleanup.

Webfonts can slow any site down significantly. Be sure to add "font-display: swap" as well. You should also avoid using icon fonts, such as Font Awesome, instead using SVG icons.

CAOS - Host Google Analytics Locally

If you use Google Analytics and are looking to remove every last third party resource from your pages, then this plugin can help. Rather than loading the JavaScript files for Google Analytics from Google's servers, this plugin will cache them locally on your server, and directly serve them to users.

Be sure to check in tools like GTMetrix and PageSpeed Insights, and compare to your current Google Analytics implementation. We've found that adding Google's JavaScript to the footer of the page and loading it with async can produce better results. There are many WordPress plugins for inserting snippets into the footer of your site.

AMP WordPress Plugin

AMP, or accelerated mobile pages, is Google's framework for making fast mobile pages. It supports a limited set of features that HTML normally supports. For the most part, you can't use any custom JavaScript, only what AMP makes available. With AMP, you can only load limited CSS and it must be inline. This limited feature set means your pages are likely to be reasonably fast.

Additionally, for mobile users coming from Google's search results, the pages will be preloaded and served from Google's AMP cache, meaning they'll appear to load much faster.

In our experience, it's possible to make pages that score even better than AMP with careful optimization. However, using WordPress's AMP plugin along with an AMP compatible theme can be an easy way to speed things up, if you're willing to possibly sacrifice some of your design and functionality.

WP Optimize

The WP Optimize plugin cleans up old data from your MySQL database. Over time, your database may become cluttered with old spam comments, settings from plugins that aren't being used anymore, or old post revisions. 

Your WordPress database becomes slower to access as the tables become more bloated. This plugin will clear out the bloat from your database. Slow database queries aren't the biggest issue for your site's speed, but in cases where a user visits a page that hasn't been cached, they'll be waiting on the database.

Conclusion

Page load times are very important for any website. Not only does page speed correlate to bounce rate, as users get frustrated and leave when a page takes longer to load, but with Google's Core Web Vitals, it directly impacts your SEO. A faster web page means happier users, and more sales, leads, and revenue. This is particularly important for mobile devices, which now account for over half of all internet traffic.

With a fast theme, or a fast page builder like Oxygen, along with a few simple plugins, you can achieve excellent page speed on WordPress websites. Ultimately, WordPress gives you full control over your site, and with a little work, you can even score 100/100 on PageSpeed Insights. These speed optimization plugins will get you on the right path. 

Our WP Speed Optimization course will teach you everything to know, along with the free resources we post on our blog here. We'll show you exactly how to set up WordPress for perfect page speed, configure Apache to enable GZIP compression, browser caching, HTTP2, optimize your images, and more. We hope this article helped, and if so, be sure to check out our other articles!

How PageSpeed Affects SEO? Complete guide.

Page speed refers to how long it takes for a web page to load its content. So, wondering how does page speed affect SEO? If pages on your site load slowly, users will be unhappy. If you've ever waited more than a few seconds for a page to load, you know exactly why.

Not only do users get tried of waiting and bounce, but with Google's Core Web Vitals, site speed is confirmed as a direct ranking factor. It's something you can't ignore for search engine optimization, and improving site speed may be the easiest boost to your SEO of anything.

In this blog post we'll discuss all the multiple factors through with slow pages will hurt your Google rankings, and the most common reasons for a slow loading speed. Here's how speed affects SEO.


Table of Contents


PageSpeed Is a Direct Ranking Factor

With Core Web Vitals, Google now claims that page speed is a direct ranking signal. Google offers a speed report inside of Google Webmaster Tools, and reports data collected from the Google Chrome User Experience Report in Google PageSpeed Insights and Google Lighthouse, along with similar lab data.

Why does Google care about page speed? Google realizes that fast loading pages are important to users, and their goal is to show pages that users will like the most. A slow page load time will only be worse on mobile devices, and mobile users now make up over half of all web traffic. If traffic from mobile searches is important to you, then your mobile site speed is also very important.

Slow Page Speed Increases Bounce Rate

We've discussed how Google measures page speed directly, and uses it as a ranking factor, however, there's another factor that is indirectly impacted by slow websites. Bounce rate is another important ranking factor, likely more important than page speed itself. The longer users have to wait for your pages to load, the more of them will hit the back button after getting tired of waiting.

Why does bounce rate matter? It's an easy way for Google to evaluate the quality of results and update rankings based on this. When users click a result in the SERPs, and then immediately click back and pick something different, that gives Google a good clue the user didn't like that result. This could be for a number of reasons, but slowly loading pages are a sure way to higher bounce rates on your website and to hurt rankings in search engines.

Not only does it hurt your rankings, but it hurts your conversion rate too. Fixing your page speed is something you can't afford not to do.

Common Page Speed / SEO Issues

Looking to fix your PageSpeed and boost your Google rankings and get a competitive edge? Here are the biggest reasons for poor page speed. Be sure the check your pages with Google PageSpeed Insights to get an idea of which of these is impacting your load times and speed score the most.

Unoptimized Images

Large image files are usually the biggest reason for a slowly loading website. To properly optimize images, you should use image compression and properly size images based on their rendered dimensions.

Another important image related optimization is known as lazy loading. Lazy loading allow you to only load image files as the user scrolls them into view. Since images are typically the largest kind of files, this can make websites significantly faster.

If your website has a large image above the fold, as many pages do, this is particularly important to optimize as much as possible. This will have a significant impact on metrics like First Contentful Paint and Largest Contentful Paint.

See our full article on optimizing images for more information.

Large Javascript Files

Like images, JavaScript files can impact website's speed significantly. Not only can the files be large, but JavaScript is code that executes in the browser, making it do extra work. This means rendering the page and getting it ready for the user will take longer. To make pages load as fast as possible, you should use a little JavaScript as possible, making sure to remove any unused code.

Slow Server Response Time

Slow server response time can be caused by a number of issues, and will affect all web pages on your website, but it's generally an easy problem to deal with. The first step in the loading process is to start communicating with the web server. You'll notice this issue if you check time to first byte with a tool such as GTMetrix. This also adds the first meaningful paint.

The first step should be making sure you have a caching plugin installed if you're using something like WordPress. There are free plugins like WP Super Cache that make it easy. Without this, your server is doing extra work generating the page for each request. A cache plugin will save the generated pages, and deliver them to users as if they were static HTML pages.

Slow hosting can also contribute here. Don't rush out and rent a dedicated server, but you should use either a good virtual private server (VPS) provider such as DigitalOcean or Linode. If you're using a shared host, your server's performance may not be optimal. You can also consider fast managed WordPress hosting like Kinstra, however a VPS can be just as fast and cheaper.

Even with caching configured, you can still make a big improvement to your server response time. With a content delivery network, or CDN, such as Cloudflare, you can get this number under 100MS. Cloudflare sits between users and your server, and caches you files. They have servers around the globe, so they can get files to your users as fast as possible.

Even if users are close to your server's physical location, a CDN can make a huge difference. Cloudflare's servers require fewer hops than most servers on the Internet, due to their close connections to ISP equipment, meaning traffic to your website may never even leave the ISP's network for the larger Internet.

Cumulative Layout Shift

CLS, or cumulative layout shift refers to how much elements on your page shift around as the page loads. The main contributors to this are images, and then fonts.

For images, this is easy to completely eliminate. You can do it by setting explicit width and height on your images. This allows to the browser to know exactly how much space an image should take on the page before it loads the file. Make sure all images on your page have the correct width and height to prevent them from causing layout shift.

Web fonts can also cause layout shift. This is because although you should enable "font-display: swap" on your web fonts, allowing system fonts to be used a placeholders while they load, this causes layout shifting. A small about of cumulative layout shift isn't a big deal, but you can reduce the shift caused by fonts. See our article on optimizing fonts for page speed for more information on this.

Misconfigured Caching

If tools like PageSpeed Insights report you need to "Leverage Browser Caching," then this means your web server may not be set up to properly set browser cache headers. The exact method to activate browser caching will depend on web server you're using, such as Nginx or Apache.

Browser caching is a fairly simple mechanism. The server simply delivers some headers that instruct the browser long to save a resource. The browser is programmed to look at these headers for each resource it downloads, and not bother with downloading it again until the expiration time has passed.

Long Input Delay

Another issue typically caused by excessive use of JavaScript is long input delay. After reducing JavaScript as much as possible, there's more you can do to reduce your first input delay.

Some JavaScript may be slowing your pages down, but you can't remove it, such as tracking pixels for ad networks. The best way to deal with this is to delay its loading until after the rest of the page has loaded. You can use Google Tag Manager to load your tracking pixels, and set them to load after the page is ready.

Ready To Fix Your Site Speed?

If you're running an online business, or monetizing your website in any way, then you need to make sure your website speed is highly optimized to make the most of your efforts. We've spent years finding all the secrets increasing a page's performance before creating Fastify.

If you're ready to increase your search rankings and your SEO success, then we're here to help. Our courses provide step-by-step video walkthough guides. We also publish free content like this on our blog. Check out all of our resources here if you're ready to see how much speed matters.

How To Perfectly Optimize Images For Google PageSpeed

For most websites, optimizing images is the highest impact activity you can do to decrease your page's load times. Image assets tend to be the largest files on any site. Not only will optimizing images help you get a better Google PageSpeed Insights score, but more importantly, fewer users will bounce when your site is faster. If you're looking to increase your site's revenue, optimizing images may be the single best thing you can do.


Table of Contents


Does optimizing images hurt image quality?

While technically, yes, image optimization results in visual degradation, with a reasonable level of optimization , you'll see much faster page speed and website performance without noticeably hurting visual quality. With too much compression, you'll notice the low quality image, but this isn't necessary in order to have a fast site.

Lazy Loading Images

The first step to optimize images on any website should be setting them to use lazy loading. By default, the browser will load every image on a page, before the user even scrolls to where they can be seen. By using lazy loading, you can make browsers load them in as the user scrolls, so you aren't slowing down the initial load time by unnecessarily loading images the user can't see.

For the widest browser support, you'll need some JavaScript to do this. A small library called lazysizes.js can handle this for you. See the example code below.

<img data-src="some-file.jpg" class="lazyload"/>

Since the browser itself doesn't understand what "data-src" means, only src, this image will not load by default. The lazysizes library will watch for scroll events, and set the "src" attribute causing the image to load at an appropriate time.

However, a newer HTML standard lets you handle this without any extra JavaScript. By adding the "loading" attribute to an img tag, newer browsers will be able to lazy load them.

<img src="some-file.jpg" loading="lazy"/>

On unsupported browsers, your images will still work, but they'll load in all at once as the page initially loads.

If you're using WordPress, the loading attribute is supported by default in newer versions. However, you'll still probably want to use lazysizes.js to support lazy loading on older browsers. Luckily, you can do this automatically with the excellent Autoptimize plugin, no coding required. Our WordPress course covers how to do this, along with everything else you need to get a perfect PageSpeed score.

Image Optimization Tools

There are many free tools you can use for optimizing images. Here are some you can use from your browser:

Squoosh

https://squoosh.app

For resizing JPEGs, or non-transparent PNGs, Squoosh is one of the most effective and easiest tools for image optimization. It can compress images, resize them, as well as other optimizations, such as removing the color profile, EXIF data, and using more efficient chroma subsampling.

You can simply drag and drop images into your browser to upload files, adjust compression level and other settings and set the dimensions, and download the optimized images. You'll see a real time preview so you can find the best balance between quality and size.

EZGif

https://ezgif.com

EZGif can not optimize your GIFs, but is great for PNGs with transparency. It allows you to fill the background of the PNG with a solid color to match your page. Once you've uploaded images to the site, you can see the results of a variety of different options before you download the optimized images.

ImageMagick

https://imagemagick.org

If you're comfortable with using command line tools, then ImageMagick is the most flexible option for optimizing your images. You can install it on macOS with Homebrew or on Windows with Scoop. Compared to other tools that work in the browser, this is more complicated, but can be faster and more convenient if you like working with the CLI.

Properly Sizing Images

Your first step to optimizing images should be making sure their dimensions are correct. The image dimensions should generally match the rendered dimensions in pixels on your page and be no larger. In some cases, you'll want to double the rendered dimensions if you want the extra detail for high DPI screens. This can be desirable on small images like icons and logos. Generally, large images will slow your site down, and you should pick a reasonable maximum width such as 1200px.

To find the image dimensions, you can right click images on your page and inspect them. Through your browser's inspector, you'll be able to see what size the images actually are displayed at. Keep these dimensions handy for when you use a tool for optimizing and resizing images.

Optimizing JPEG Images

JPEG is a compression process that makes images smaller. It's a lossy format, meaning image quality does degrade, but with the proper quality settings, the human eye will have a very difficult time seeing the difference.

It's likely that you can use a higher compression ratio for JPEG images already on your site, and significantly reduce the size without noticeably reducing the quality. Lossy compression is almost always the best choice for a images on a website.

Optimizing PNG Images

PNG is a lossless compression format for images. This means that image quality won't suffer at all by applying PNG compression. However, since JPEGs can further be compressed, it's usually a good idea to convert PNG to JPEG. While lossless formats offer the highest quality, it comes at a significant cost in file size.

If your PNG has a transparent background, you'll need to fill it with a solid color to match the background of your site. The PNG format supports transparency, however, JPEG doesn't.

In some cases, with very simple images with limited color palettes, PNG images can be smaller than JPEG. Make sure to compare the file sizes and use whichever format is smaller for each image.

Optimizing GIF Images

GIFs are used commonly for animated images. However, these files can be quite large. You can use something like EZGIF to optimize your GIFs. However, considering converting GIFs to a more efficient format such as MP4, or using the WebP format.

Using WebP Images

WebP is a more efficient image format with better compression that all modern browsers have support for, such as the latest versions of Google Chrome, Safari, Firefox, and Microsoft Edge.

If you're seeing a message in Google PageSpeed Insights recommending you use next-gen image formats, then using WebP will fix that.

For most sites, setting up Cloudflare and purchasing the Pro plan is the easiest way to start using WebP. With this plan, simply enable WebP from the Cloudflare settings. Cloudflare will then re-compress the images on your site.

For WordPress sites, the WebP Converter for Media plugin is free. It automatically generates new versions for every all the images you upload, and configures your web server to serve WebP image files to supported clients. Any existing images will be converted when you set up the plugin.

With either of these options, WebP images will be served in cases where the new version is smaller than the original image. In some cases, and PNG or JPEG will have a smaller file size, and in that case, the original image will still be used. They will take care of using the optimal format automatically.

Using Img Srcset

For responsive images on your site, the rendered dimensions will be small compared to when the page is viewed on desktop. With the srcset attribute, you can specify different versions of images that should be loaded depending on screen resolution.

If you're using WordPress or another CMS, the platform will automatically optimize images by creating various images sizes from the original image, and will insert the srcset parameters.

If you're writing HTML by hand or using a static site generator, check out Mozilla's documentation on how to use srcset.

Cache Control for Images

While not part of optimizing the images themselves, setting up proper cache control headers on your server is also important. If your Google PageSpeed Insights page is reporting you need to "Leverage Browser Caching," then configuring cache headers will fix it.

Cache control headers work by instructing browers to store the downloaded files for a specified period of time. This speeds up the site for repeat visitors, since the files will be cached in the user's browser, and they won't have to download it again.

The exact method will depend on your host and/or what web server software you're using, such as Apache or Nginx. You'll find many online guides for how to do this, or you can check out the Fastify course for step-by-step video guides on how to do this, along with everything else you need to optimize your page speed.

In Conclusion...

Page speed is incredibly important for any website, and unoptimized images are usually the biggest reason for a slow website. You need to optimize images to offer the best user experience, and make sure your traffic doesn't get tired of waiting for your slow loading web page and bounce. Your Google Page Speed Insights is also important if you're doing SEO, since Google uses loading speed as a ranking factor.

Consider the following for each image on your page. Images on your page should first be properly sized based on their rendered dimensions. In most cases, you should convert PNGs to JPEG, filling in transparent backgrounds with a solid color. After you've uploaded your optimized images, you should also use WebP, either through Cloudflare, or if using WordPress, a free plugin.

You should also lazy load images on your site. This keeps the initial page load time fast by only loading images as they come into view. Combined with optimizing the files yourself and lazy loading, you'll have significantly made your site faster and will get an easy lift in conversion rate, sales, and revenue.