Fixing the “Use video formats for animated content” error that is shown in Google Search Console and Google Web Vitals can be done by converting the gif on your page into HTML5, MPEG4s, or WebMs using the tools below.

Delivering the content in animated form is one of the best ways to express an idea to your customers. And animated GIFs are popular for this purpose. However, using GIFs format for storing videos and bigger in size files is a bad idea and leads to slow page speed. If you check your site on Google PageSpeed Insight you would receive the warning “Replace Gifs with video formats’ ‘. Doing this will drastically improve the loading time and improve your site performance. 

In this article, we will explore how you can replace the animated GIFs on your site with video formats to enhance your site speed and provide a better user experience. We will also see how replacing GIFs with video formats can boost page loading and site performance. 

So let’s get started!

Use video formats for animated content

Why replacing GIFs to video formats is critical for boosting site speed?

Replacing GIFs with video formats is critical as using animated GIFs has many downsides. Although animated GIFs are very popular, GIFs formats were not originally made for animations. The basic purpose of GIFs is to compress multiple images in a single file that is far easier to download in a short time span. It is a limited animation platform with a palette of 256 colours. Plus, GIFs formats also do not take advantage of the newer technology. That’s the reason that a few seconds of GIF can be a significantly large size. 

And even if you try to compress the file with a tool, it can not reduce it to a reasonable file size that Google will be happy with. So when we use animated content in GIFs formats, it drastically increases the size of the site and slows down the loading process. When the browser requests the server for all page resources it will require more time to download these files and ultimately reduce the page loading speed. That’s why heavy websites like Giphy and Imgur do not use GIFs for animated content. Instead, they use other video formats like HTML5, MPEG4s, or WebMs for this job. Thus, replacing GIFs with video formats can significantly reduce page loading time and provide a more pleasurable user experience. 

So now let’s take a look at some techniques that enable us to convert GIFs to video formats. Below I have shared some amazing tools that do this job conveniently and embed the video in such a way that they look just like GIFs but are smaller in file size. 

How to replace GIFs with video formats?

There are a number of ways to convert GIF’s to video formats and all are super easy and effortless. There are many video formats such as MPEG4s, OGG, MP4, and WebM.  Among all, Mp4 is the most famous with 94% of all browsers supporting it. Next is WebM format provides high-quality videos with significantly reduced file size. However, the browser support is comparatively less than Mp4. Now let’s take a look at how to convert a GIF to these formats. 

There are many online tools that can convert GIF’s to video formats. One of the best online tools that I have used so far is FFmpeg. It is an amazing free online tool that can handle, record, convert, and stream audio and video files. You can convert a GIF to any video format including MP4, WebM, and Ogg. Working with FFMeg is simple and effortless. Run the ffmpeg command on your terminal. If ffmpeg is installed on your system you will see some diagnostic information. If not, you will see an error message, showing you that you need to install it. Once installed, now you can convert the GIFs to your desired video format. 

To convert GIFs to an Mp4 format run the following command on your terminal. 

ffmpeg -i input.gif video.mp4

This is one of the simplest syntex to do the conversion. When you enter the command, you will see a video.mp4 file will appear in your directory. There are many other great options that FFmpeg provides to finetune the video output. So when you are converting a high-quality video you can employ an encoding mode called Constant Rate Factor (CRF).

ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4

In this command, CRf uses a value between 0 – 51. The lower the value, the higher the video quality and the larger the file size. 

Another amazing tool to convert the GIFs to an Mp4 format is Cloud converter. This is an amazing free online converter that can support nearly all audio and video formats. Simply convert the file on Cloud converter and embed it using the following snippet. 

<video autoplay loop muted poster=”chaplin.png”>

<source type=”video/webm” src=”chaplin.webm”>

</video>

You can see we use the <video> tag to embed our elements with three particular attributes – autoplay, loop, and poster. These attributes stimulate the GIF’s behaviour. After specifying the attributes you need to specify the video format to indicate which type of video you want to embed. You can choose one of the following codes from WebM, Mp4, or Ogg. Next, you need to specify the location of your video file. Now your video will be played in a loop. You can also specify whether the video will be played muted or with sound. In the above example, your video will be played muted.

Summary

Using video or animated content is a powerful way of expressing your thoughts on media and websites. A recent survey shows that people spend approximately 1.5 hours of the day watching videos and most businesses use video content to advertise their ideas. GIFs have gained great popularity to serve visitors on websites. But using GIFs for animation can greatly increase the file size and cause more time to download the file during page loading. This results in slowing down the page speed and causes users to wait for the page to render. The best alternative is to use video formats like HTML5, MPEG4s, or WebMs on your site. Video files are smaller in size and can be downloaded much faster than GIFs, thus reducing the page loading time. 

So if you really care about your site’s health and performance, replace all the GIFs with videos and enjoy a high-speed page loading experience. And don’t forget to share your feedback in the comment section below. I would love to hear from you guys.

Need Help?

Know your websites slow and worried about Google reducing your visibility due to video formats issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

Fixing the “preconnect to required origins” error that is shown in Google Search Console and Google Web Vitals can be done by adding the preconnect script <link rel=”preconnect” or using a speed plugin listed below

If you have ever run your site through Lighthouse or Google PageSpeed Insight, you might have come across the recommendation to “Preconnect to required origins”. So if you have received the same recommendation and are searching for a solution you have come to the right place. In this article, we will discuss why it is critical for web performance and how you can preconnect the required origins on your site. 

Let’s get started!

Preconnect to required origins

What is preconnect?

Preconnect is a way to establish an early connection to third party origin during the loading process. By using a preconnect in the browser and establishing a link with a third party domain before the loading. When you load the page it saves time by eliminating round trips and loads the page faster. Unlike pre-fetch, preconnecting should be used sparingly. You can’t pre-connect all the third party origins on your site. But you can prefetch all the third-party origins. 

Why preconnecting to required origins is important for web performance?

Adding preconnection to required origin means you are telling your browser that you need these resources as soon as possible. When a browser sees the preconnect hint, it establishes the connection as soon as possible, saving your time by downloading the resources early.

Confused?

To better understand, first you should know how a browser requests a resource from a third-party origin. So in order to request a resource from another server/domain, it establishes a connection through the following procedure. 

First, it looks up the domain name and resolves it to an IP address. After that, it sets up a connection with the server and encrypts it for security. During all these three steps the server exchanges pieces of data with the browser. This journey of exchange of data between server and browser is called a round trip. And each round took significant time to exchange data. Establishing a connection requires three or more round trips and consequently slows down the page loading. But with preconnecting, your browser establishes the connection early before the loading. Since the set-up process has been completed by the time the browser requested them, ultimately the sources will load much faster. 

By adding preconnects request to important third party origins you can speed up your site by 100–500 ms. You may take this time as a small duration, but it makes a significant difference in your site performance and provides a better user experience. 

How to preconnect to required origins to make your site faster?

There are various ways to add the preonnect script to your site. You can add preconnect both manually and by using a plugin if you are using WordPress. Both methods are easy and convenient.  Also, you don’t need much experience.  So which one you prefer depends on your if you are ok with adding code snippets to your website. Below I have listed the best suitable method that you can use.

Manual Method

Adding a preconnect by the manual method is really simple and effortless. All you need is to add the code in the link tag and paste it to your function.php file. Replace the third-party domains with the ones you want to preconnected. Also, choose whether you want to cross-origin or not.

For example “http://google-analytics.com” is the third party domain that your page intends to connect to it would be <link rel=”preconnect” href=”http://google-analytics.com” crossorigin>. Here are some more examples

<link rel=”preconnect” href=”https://cdn.domain.com” crossorigin>

<link rel=”preconnect” href=”https://google-analytics.com” crossorigin>

<link rel=”preconnect” href=”https://ajax.cloudflare.com” crossorigin>

<link rel=”preconnect” href= “https://fonts.gstatic.com” crossorigin>

<link rel=”preconnect” href=”https://res.cloudinary.com” crossorigin>

Using Plugins

Another efficient way to do this job is by using a plugin. Since many people don’t like to work manually, using a plugin is a perfectly good choice if you don’t want to add code by hand. Several plugins are available that can add preconnect to your site. Below I have listed some of the convenient plugins that can do this task efficiently. Let’s take a look.

Wp Rocket

If you’re using CDN URL (in the CNAME field of the CDN tab) and Google Fonts (fonts.gstatic.com), Wp Rocket is a perfect choice. It adds preconnect automatically. All you need is to install and activate the plugin. However, Wp Rocket doesn’t allow you to preconnect other domias. So if you want to preconnect other domains you need to install other puns or add the preconnect manually. 

Pre* Party Resource Hints

This is another amazing WordPress plugin that allows you to add preconnect, prefetch, preload, and even pretender. So if you want to preconnect domain fonts and CDN’s Url, Pre*PArty Resource Hints is the best choice for you. It is free and effortless to use. Below I have added some other amazing plugins that you must want to try. 

Things to consider when preconnecting to required origins

  • Don’t use too many preconnects, it can negatively affect your page speed. Make sure to preconnect to critical resources only. For all other third party domains prefetch is the best choice. Using 2 preconnect for the most critical third party domain is the best practice.
  • Don’t preconnect to third party origins that are being delayed and not loaded, because preconnect blocks any connection that is not used within 15 seconds .
  • Don’t preconnect to resources that are present on your site because prconnect is only effective for third party origins.

The Bottom Line

Here you see using a rel=”preconnect” is an important tool that can boost your site speed and performance. Check your site for critical third party origins by running your site through Lighthouse or Google PageSpeed Insight. There are general recommendations on domains to preconnect.  So its best to go with whats suggested. Again don’t reconnect too much because Google says “preconnecting too many resources can negatively affect your site performance and cause it to slow down”. So limit the number of preconnect and only add the critical one. 

Don’t forget to share your feedback in the comment section below. I would love to hear from you guys. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to preconnecting issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.


To avoid the Google Web Vitals error to preload key requests you must first scan your site with GooglePageSpeedInsights and then use the HTML tag (
<link rel=” preload”>) to preload the files Google is asking for.

Making a site with the fastest loading speed should be a high priority of every web developer. Users expect to visit sites that load fast and provide a good user experience.

If you testing your website page speed and have seen the preload key requests error this article should help you to understand and solve the issue.

In this article, we will dive deeper into preloading what it is, how it boosts the web page speed, and how we preload necessary resources on our web page. We have written some useful tips and tricks on how to preload your request on your WordPress site as well.

Let’s get started!

What are preload key requests?

As the name suggests, preload or preloading is a system that gives hints to the web browser to load necessary resources as soon as possible. And preload key request means adding preload requests for these essential resources/files. So basically, preload informs the browser to cache these resources on the web page immediately as the page starts loading. Caching these resources on a webpage ultimately reduces the page loading time and increases page speed. 

So with preloading, when a user visits your site, their browser downloads the necessary file early and makes the rendering process faster. You can preload various resources on your site. The most common resources that people preload on their sites are:

  • Fonts
  • Script files
  • CSS files
  • Images

But you can also preload links, videos, documents, workers, objects, and anything else you feel is important. 

Why is it critical to preload key requests?

Preloading resources on the webpage is an amazing tool to optimize web performance. It boosts your page speed and provides an excellent user experience. To better understand how preloading fastens page loading, let’s take a look at what happens when a visitor visits a web page.

When a visitor arrives at your web page, their browser sends a request to download and parse the HTML and other linked source files that are needed for the page to load. During this time, when the files are being downloaded and processed, page loading stops. When you have a bulk of files on your web page, it increases the loading time and frustrates the user. But with preloading, you can tell the browser to download specific resources earlier without blocking the rendering process. Thus, when a user visits your site, their browser downloads the necessary resources early, thus reducing the time to load the page. 

It also instructs the browser to identify the resource type to tell if the same resource can be used in the future. It caches these types of resources on the web page immediately. Caching these resources greatly reduces the loading time and boosts your page speed. Further, increasing the page speed also improves the site’s SEO and ultimately ranks your site higher on google. 

Here you can see how beneficial it is to preload resources on the web page. Now let’s take a look at how you preload key requests on your WordPress site. 

How to preload Key Requests in WordPress? 

Preload Key request Google Search Console Core Vitals

Here is a step-by-step guide on how to preload key requests on your WordPress site.

The first step involved in preloading key requests is identifying the key request to preload on your site. For this, run a speed test on Google PageSpeed Insights to find out the key request section.

Now copy the location for every resource you want to preload and paste it inside the <link rel=” preload”> attribute as explained below.

<link rel=”preload” href=”https://marketingthechange.com/FILENAME.css” as=”style”>

<link rel=”preload” href=”https://marketingthechange.com/assets/FILENAME.js” as=”style”>

In the final step, paste the link(s) into the <head> section of your site. Numerous plugins can help to add the link to your WordPress site.

One of the best plugins is Insert Headers and Footers that is really helpful for this job. It’s a free plugin and easy to set up just install and activate the plugin. Next, go to the settings > Insert Header and Footer and paste the above code in the Script in the Header (make sure you change the filename) field. Now click on save, and your resources are ready to preload.

Preloading Fonts

To preload, the fonts on your WordPress site, place the font location with the type of file in the <link rel=” preload”> attribute and paste it in the head section of your site. 

<link rel=”preload” href=”https://marketingthechange.com/fonts/Roboto.woff” as=”font” type=”font/woff” crossorigin=”anonymous”>

Preloading CSS files 

To preload, the CSS files on your WordPress site, place your CSS files location with the type of file in the <link rel=” preload”> attribute and paste it in the head section of your site. 

<link rel=”preload” href=”https://marketingthechange.com/style.css” as=”style”>

Preloading JS files

To preload, the JS files on your WordPress site, place your JS file location with the type of file in the <link rel=” preload”> attribute and paste it in the head section of your site. 

<link rel=”preload” href=”https://marketingthechange.com/main.js” as=”script”>

Preload Key request Google Tag

The Bottom Line 

That’s it, and you see how easy and effortless it is to preload the key request on your site. So if you are want to boost your site performance, you can just preload the necessary resources on your site. Do a speed test on Google Page Speed insights and preload the files they suggest to boost your site speed and keep increasing your Google Score.

But it is necessary to note that preloading is an obligatory instruction to the browser, so make sure only to preload the resources that are present on your site. And don’t use too many files or fonts on your site, as it will increase our site size and end up with slow speed. 

And at the end, how was the article? I hope you find it helpful. Don’t forget to share your feedback in the comment section below. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to preloading issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

To avoid the multiple pages redirects error in Google Search Console or Core Web Vitals you need to make sure you rewrite redirects for protocol changes. Always try to redirect to the preferred version of the URL and eliminate unnecessary redirects from your site. In this article, we will explain what redirects are and how to avoid them.

Redirection is a process that helps to forward one URL to a different URL. It is critical for dynamic websites to be successful especially when a site content moves from one place to another. It can also help in the case be a helpful tool if you need to remove a page or change your domain name. But if you ever have checked your site on Google PageSpeed Insight or Lighthouse, and see the opportunity to show “avoid multiple page redirects.” Then something has gone wrong and the redirection process and leaving it unresolved can slow down your site speed and greatly impact its performance. 

If you have received this warning and are worried about how to fix it. You are at the right place. In this article, we will walk you through all the things you need to know about redirects, how they affect your site speed, performance, and SEO, and how you can avoid multiple page redirects in the future.

So Let’s Get started!

What are page redirects?

Avoid multiple page redirects

Simply, redirects are ways to forward users and search engines from one URL to another. Basically, redirects are used when you merge a site, delete a page, change the domain name, or when moving site content. These make the redirects important for both users and search engines especially when content is moved. If you don’t use redirects, any visitor who lands on a page that has been moved or deleted will see an error. This is something that really frustrates the user and provides a poor user experience.  

Not only is this a bad UX for visitors but also impact search engines, and would lose a lot of visitors and traffic. However, using multiple redirects or implementing them incorrectly can result in major issues such as slow page loading, poor user experience, and can even affect your site’s SEO. 

Why is it crucial to avoid multiple page redirects and how it impacts your page SEO?

As mentioned above, multiple redirects can cause the site to slow down and affect the overall user experience. When a visitor requests a source that has been redirected, the server returns an HTTP response that is something like this.

HTTP/1.1 301 Moved Permanently 

Location: /path/to/new/location

The browser then makes another HTTP request that retrieves the source from the new location. This additional trip of the browser to the new location delays the loading process and causes the site to slow down.

What is worse is that if you have multiple redirects on your site. Adding multiple round trip request-response cycles, including DNS lookup, TCP handshake, and TLS negotiation, make your site even slower. So the more redirects you have, the slower your site is.

Try to avoid redirects as much as possible, because your site performance is far more important than you think. Your site speed is one of the ranking factors in Google’s algorithm. So let’s see how you can avoid multiple redirects on your site. Below are some great tips that might be helpful.

How to remove page redirects? 

Although redirects are necessary, it is important to minimize their usage as doing so will greatly improve page performance, speed and provide a better user experience. 

1. Avoid landing page redirect 

One of the best ways to avoid multiple redirects is by avoiding landing page redirects whenever possible. Instead of making separate individual redirects for protocol changes, mobile-specific page, geolocation, adding www, or for a subdomain, use one single redirect for them.  Always try to redirect to the preferred version of the URL and eliminate unnecessary redirects from your site. 

2. Setup direct access to Non-HTML resources

It is very common to redirect non-HTML resources such as images, video and CSS files. Redirecting them from some other site can greatly increase the RTT cycle and increase the loading time respectively. In addition, it can be more problematic if where the assets are stored get deleted or moved. So always try to set up direct access to non-HTML resources on your site, so they can be downloaded directly from your site before rendering on the screen. For example, embed images directly in your database instead of redirecting them from a different site. 

3. Periodically review your redirects

One of the best practices to avoid multiple redirects is by reviewing the websites redirects from time to time, so the irrelevant and unwanted redirects can be removed or rewritten. Another approach to reduce multiple redirects is by combining multiple redirects into one single useful redirect. Also avoid client-side redirects because they are slower, non-cacheable, and browsers may not support them by default.

The Bottom Line

Avoiding multiple page redirects is easy to fix and will greatly improve the websites speed especially if the redirect involves the root domain. Using too many redirects can slow down the loading process and cause the visitor to wait for the content to render on the screen. This greatly affects your site overall performance and causes a poor user experience on your page.

Always try to avoid redirects as much as possible.

Check them often using tools like screaming frog or other website crawling tools

Remove and write them when possible.

Of course, don’t forget to share your precious feedback with us. Or if you have any further questions, just drop a line in the comment section below. We would love to help you. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to redirect issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

Is Google upset about your server response time? Are you getting the “Reduce server response times (TTFB)” from Google Core Web Vitals?

When it comes to optimizing page speed and performance we usually discuss front-end performance and optimization to accelerate the performance of the sites. However, the server-side also plays a critical role in boosting page speed. If you have ever checked your site on Google PageSpeed Insight, you are likely to have come across the following recommendation: “Reduce server response times (TTFB)”. That is what we are going to look at today. In this post, I will share some great tips and tricks to reduce server response time to boost your sites speed and performance. 

But before we move on, you should know the process involved in the rendering of a web page on the user screen. When a visitor opens a web page, their browser sends a request to read the text and download all the necessary assets including all the embedded CSS, JS files and scripts. Once the content and images are downloaded, it starts rendering the content on the screen. The full process involves downloading the assets entirely and depends on the hosting server. Thus, by reducing the server response you can greatly reduce the page loading time and boost your site speed. 

Reduce initial server response time

So Let’s take a look at how you can reduce the server response time on your site within a few minutes.

What is server response time (TTFB)?

Server response time (TTFB) is the time the server takes to respond to the user request and the browser starts to render the content on the screen. So basically it is the time spent waiting for the page to render from the second the visitor sends the request to the server. 

TTFB commonly involve three components including:

1. Time taken to send the HTTP request

TTFB starts right when the client browser sends the HTTP request to the server. There are various factors such as slow DNS lookup time, speed of user’s network, even the distance of the server and several other interruptions in connection that can come in the way of the server to receive the request. This delay in receiving the request increases your server response time and causes the web page to slow down.

2. Time taken to respond to the request

Once the server receives the call, it processes the request and works on starting the rendering process. This includes making database calls, running scripts, caching data from the database, downloading and processing HTML, CSS files and other assets, and communicating with other system networks.

3. Time taken to render the first byte of the content on screen

Once all the assets are downloaded and calls are processed, the server starts to show the first byte of the content on the user screen. The time sent during the whole process is known as server response time.

Why should you reduce server response times (TTFB) on your site? 

We know getting the fastest loading speed is something everyone wants for their website. But of course, it is not really simple. There are several roadblocks that delay your page loading time and frustrate your user. So if you’re seeing a high bounce rate, it might be because of an unnecessary long TTFB. 

The longer the TTFB the longer your site takes to render the first byte of content on your visitor’s screen. And that is the first thing that frustrates the user and pushes them to abandon your page. Moreover, a slow site speed can also hammer your SEO efforts and put your page lower in the Google Search results. So if you want to make your site fast and responsive you should reduce the server response time. 

How to reduce server response time (TTFB) on WordPress? 

There are multiple strategies to reduce the TTFB on your server, but here I have shared some of the key ones that are most likely to work.

1. Use a Fast WordPress Host

The very first strategy to reduce the server response time on your site is using the fastest WordPress host that has carefully thought-out architecture. Since your hosting provider plays a critical role in maintaining speed and performance, switching to a better host can greatly reduce your page loading time.

If you think your website is slow because of your hosting provider try disabling all plugins and using a default WordPress theme and run a test. This will quickly show if your issue is with your host’s server or your WordPress set-up.

Feel free to reach out to your host and ask them about speed they will often try to upsell you to a more powerful server but sometimes they can offer advise as to what areas to improve.

2. Eliminate high CPU Plugins

A lot of the plugins on your WordPress site run ongoing scans and processes on your site. These processes can greatly affect your page speed and slow down the loading process. Eliminating these high CPU plugins can significantly reduce the server response time and increase your page speed. There are some online tools such as Query Monitor and WP Hive that can help you to find these slow plugins on your site.  

High CPU WordPress

3. Cache your WordPress site

Another valuable approach to reduce the TTFB on your server is to set up caching. Caching your WordPress site can greatly decrease your page loading speed by reducing server response. Ask your host or enable it if you have server side caching or use a plugin like WP rocket to cache pages on your site. It is really easy and effortless to do this.

4. Use GZIP Compression

GZIP compression is the process to compress the assets such as HTML, CSS, JS, and images on your site. By compressing these assets you can greatly reduce the server response time. Once the assets are compressed your server will take less time to download and process these files, ultimately reducing the page loading time. Ask your host to enable the GZIP compression on your site. In addition, you can also enable GZIP compression by using some suitable plugins such as Enable Gzip Compression.

The Bottom Line

Hopefully, you can see how critical it is to render your site with the minimal possible time and that can only be possible if your server receives and responds to the visitor request immediately. Above I have mentioned the simplest and efficient way to reduce the server response time. They are pretty easy to implement and you will get the fastest server performance. So give them a try today and enjoy fastest webpage experience. 

Don’t forget to share your valuable experience with TTFB. I would love to hear it in the comment section below. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to TTFB issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

Is Google upset that you are not serving images in next-gen formats like Webp?

One of the Google PageSpeed Insight most often suggestions to accelerate page speed and performance is to “serve images in next-gen formats”. If you have ever checked your site on Google PageSpeed Insight or Lighthouse you must have received the same suggestion.  Next-gen image formats are image formats that offer superior compression and quality compared to regular image formats such as JPG and PNG.

In this post, I am going to show you what next-gen image formats are and how you can serve next-gen image formats on your site. We will learn how to convert your images into Webp and how to serve them on your site for browsers. So before we move on, first you have to understand what are next-gen image formats. 

So let’s get started 

What are the next-gen image formats?

You should be familiar with three traditional and popular formats of images such as JPEG, GIFs, and PNG. We have been using them for years. Though they are quite popular among users however they still have some drawbacks that cause speed issues on your site. That’s why Google recommends converting your images into next-gen formats such as webp, which loads faster and provides excellent site performance. 

Next-gen image formats are modern formats that are compressed in a way that are faster and high quality. Since they are smaller in size which means they significantly decrease your overall page speed. So with next-gen formats, you can serve images of high quality the same as JPEG at a much smaller size. 

There are different next-gen formats including JPEG 2000, JPEG XR, and WebP. Among all, webp are the most common, creating versatile, high-quality images that are smaller than both JPG and PNG. Not all browsers support each type of next-gen format as chrome and firefox load webp files while safari does not. Simultaneously, Safari support JPEG 2000 while Firefox and chrome. Despite the fact, the overwhelming majority of people using chrome makes the webp the most accurate and lightweight option.

Why use next-gen image formats?

Since images play a crucial role in attracting visitors and improving the user experience on your site. So when you have a bulk of high-quality images on your site, they ultimately reduce your page speed and increase the time to render the page content. To reduce this image size and loading time Google PageSpeed Insight recommends next-gen formats that can help to improve your site performance and page loading. 

Also, Webp is three times smaller in size and serves the same quality as JPEG and PNG. Thus, using these formats not only provide high-quality images with smaller size but also support transparency and animation. 

Basically, the most obvious reason to use next-gen formats is to reduce the image size in kb. These images provide better compression and image quality. Thus, using these formats not only reduce the size of images without affecting quality but also provide search engine optimization benefits. 

How to serve images as next-gen formats?

Converting the images to next-gen formats is really simple and doesn’t take much time. It is easy since many online tools can do your work. There are several suitable methods to do this conversion, but I will show you the most efficient methods that I have tried so far.

1. Use an online tool to convert images

best-webp-covertor

Of course the far easiest and efficient way to convert the images without putting your hand on coding is using an online tool. There are various options. However, CloudConvert’s WebP Converter is the popular one. It is pretty easy to work with this excellent tool. Just, upload the image, convert it to webp and download again. Your image is converted to next-gen format. Now upload it to your WordPress site and use it wherever you want.

2. Use a WordPress Plugin

Another easy way to convert images to next-gen formats is using a WordPress Plugin. So if you don’t want to work with coding or any other above online tool, WordPress plugins have some great options that work perfectly. WordPress does not support uploading webp format images through the image library. So when you try to upload an image .webp format, a window popup says the format is not supported. But you can change your images to .webp format using plugins.

One of the best plugins to do this conversion is WebP Express Plugin. Install and activate this plugin. It will add a line of code to your WordPress site that will automatically convert the images to webp format for users, whose browsers supports this format. That means, if the visitor’s browser supports the webp format it will convert it to that format, if not it will serve the image with the original format the image was uploaded.

Serve images in next gen formats 1

3. Edit .htaccess file on your site

Since the basic purpose of serving the image with next-gen formats is to reduce the file size and increase page speed adding a new plugin might seem counterproductive. So if you don’t want to use any plugin, you can simply edit the .htaccess file on your WordPress site. But only use this method if you’re comfortable working with code. Add the following snippet to your file, it will serve .webp image instead of PNG and JPEG. Note that the automatic conversion works precisely only if the JPG and webp images are present in the same folder.

<IfModule mod_setenvif.c>

  # Vary: Accept for all the requests to jpeg and png

  SetEnvIf Request_URI “\.(jpe?g|png)$” REQUEST_image

</IfModule>

<IfModule mod_rewrite.c>

  RewriteEngine On

  # Check if browser supports WebP images

  RewriteCond%{HTTP_ACCEPT}image/webp

  # Check if WebP replacement image exists

  RewriteCond%{DOCUMENT_ROOT}/$1.webp-f

  # Serve WebP image instead

  RewriteRule(.+)\.(jpe?g|png)$$1.webp[T=image/webp]

</IfModule>

<IfModule mod_headers.c>

  Header append Vary Accept env=REQUEST_image

</IfModule>

<IfModule mod_mime.c>

  AddType image/webp .webp

</IfModule>

The Final Words

If you really want to boost your page speed and performance then take a look at next-gen images.

Though, all browsers don’t support that same format, webp is the most accurate choice as chrome supports it well. So convert all the images on your site to webp and enjoy a better user experience without compromising on image quality. Use the above-mentioned methods and don’t forget to share your feedback in return. 

Have any questions, just drop a line in the below comment section, we would love to help you further. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to image issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

Are you seeing error messages about text compression from Google Search Console and Google Lighthouse Core Vitals? Maybe it’s time to Enable text compression on your website.

Do you know there are some text-based resources on your site that hinder the performance and speed of your site? Lighthouse reports that there are some text-based resources that need to be compressed. Enabling text compression of these resources lightens your page weight and allows the browser to download the assets faster than before. Rendering faster and providing a better user experience.

In this post, I will show you the easiest and most convenient way to compress these text-based resources on your WordPress site. But before you should need to know about text compression, how it works, how to find these text-based resources and why it is crucial to compress these text-based resources on your site. 

Are you ready?

What is text compression? 

Text compression is a sort of mitigation technique in which you compress all the text-based resources ( HTML, CSS, JS) on your site to reduce the site weight and load it faster. It is one of the popular methods to speed up WordPress sites. When enabled it greatly reduces the size of the file on your site and boosts it’s speed.

So basically, text compression enables HTML, JS, and CSS files on your site to be compressed to a smaller size. The browser downloads these smaller files quickly and reduces the overall loading of the page. So if you really want to improve your page speed and performance, it is something you should consider.  

Why is it critical to enable text compression on your site? 

We know when a visitor visits a webpage their browser downloads all the resources ( i.e; CSS, HTML, JS, Images) on the page before showing the content on the screen. The larger these files are, the longer the browser takes to download them and the longer visitor has to wait to see the content on the screen. This can frustrate the users and they may close your site even before the rendering process starts. 

The most recent studies reveal that 70% of visitors wait only two seconds for a web page to download and 40% of users don’t wait for more than three seconds. This has been a trend over the last few years and users are expecting quicker and quicker load times.

Compressing text files can help to reduce the file size in kb, making the file smaller and faster to download. This accelerates your site speed and improves performance.

How to enable text compression? 

There are three types of text compression algorithms named as Gzip, Brotli, and Deflate. Although Gzip and Brotli are the most commonly used compression algorithms and can compress resources up to 70%. They reduce your page load time up to 50%, providing a better user experience and helping to attract more visitors. 

Let’s take a look at how they all work.

1. Manual Compression Method 

One of the easiest ways to enable Gzip compression on your WordPress site is by manually editing the .htaccess file. Since it involves editing the site code, there might be chances of breaking something and ending up with some other problems. Thus, it is crucial you should take a backup of your website and a copy of the file’s code before making any changes to the code. Once you take the backup it’s time to work on the code.

enable text compression htacess 1

Find the .htaccess file in the root folder of your WordPress site. Find the file and edit it directly on the server or download it on the computer before making any change to the file.  Now open the file and paste the below code in our .htaccess file below the section marked by  # BEGIN WordPress and # END WordPress tags.

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

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

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

Note: If you paste the code anywhere else the specific location, it wouldn’t work.

2. Using a WordPress Plugin 

Of course, if you’re working with WordPress there is nothing you can’t do using a plugin. There are plugins available even for small tasks. So if you don’t want to mess up with code you can simply do this by downloading a plugin. There is a handful of plugins that work perfectly and efficiently enable text compression on your site within a few clicks. Here are some of the best that I have tried so far. 

  • WP Rocket
  • WP Super Cache
  • W3 Total Cache
  • Enable Gzip Compression
  • PageSpeed Ninja

3. By contacting your hosting provider

Another amazing method to enable text compression is by contacting your hosting provider. Although many of the host providers enable compression by default, but still if you don’t have GZip compression enabled by default, you can contact web hosts to enable Gzip compression on your WordPress site. Ask your host provider, they will provide their own instruction to enable Gzip compression on your site. 

ebale Gzip

The Bottom Line

In the developing era of technology when most businesses work online, everyone wants their site to load faster than ever and provide a  better user experience. Websites that render slowly or take more time to show the page content only frustrate the user so they don’t visit your site again. 

So if you want to make your site load faster and provide a better user experience you should compress all the text-based resources on your website. These compressed files download faster and greatly reduce the page load time. Above we have shown some of the best and easiest ways to enable text compression on WordPress. Give them a try and don’t forget to share feedback in the comment section. We would love to hear from you.

Need Help?

Know your websites slow and worried about Google reducing your visibility due to text compression issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

Seeing the Remove unused CSS in Google Search Console or in the Core Web Vitals tool?

If you want to optimize your site speed, you should want to remove unused CSS in files. Since wordpress sites can use a lot of plugins, there are more chances of having unused CSS. Combining themes and these plugins, your site speed gets impacted causing the site to slow down. Removing unused CSS from your site to improve page speed score and performance is a great idea. 

But before you start working on removing unused CSS you should know what is Unused CSS, why it is crucial to remove unused CSS from your site, and what will happen if you don’t remove it. 

Let’s get started

What is Unused CSS?

Normally WordPress themes are made in a way that the theme supports almost all types of sites such as blogs, shop, forums and anything else you can think of. These themes contain different HTML elements such as icons, tables, forms, buttons, WooCommerce elements, author box, comments, galleries, typography, search bar, and so on. Themes developers design all these elements for multiple users and write the CSS in a separate file style.css. If this CSS code is not used then it’s unused CSS. 

So basically, unused CSS is the CSS written in the stylesheet of the site but not used by the user to style the elements or part of the website. Since browsers download all the CSS files present on the page before rendering the content. If any CSS is present on the page that is not needed for the page, the browser will waste the time to download it. 

The very basic example of unused CSS is contact form 7. Although it is used only on the contact us page the website will download it on all the pages. So if your home page or posts don’t use the contact form, the CSS will load and cause the page to slow down. Since plugins don’t have options to prevent this unused CSS to download on posts or pages, we have to remove it manually or by using a tool.

Why do you care about removing Unused CSS in the first place?

One of the obvious reasons to do this is to optimize your site speed and performance. You shouldn’t be here if you don’t want to accelerate your site speed. By removing unused CSS you can enhance page speed and provide a better user experience to your visitors. 

Since almost all plugins load the resources on all pages and posts. When a visitor visits a page or posts on your site, their browser downloads all the CSS, it does not matter if your site uses it or not. This causes the site to slow down and impact user experience. Thus, to enhance the site speed and better user experience we need to prevent these CSS files from loading. This can be only possible by removing unused CSS from these files. 

How to find out Unused CSS?

Before you remove the unused CSS from your site, you should know which CSS is not necessary and where it is present. The easiest way to find out the unwanted CSS on your site is using the coverage tab on Chrome dev tool. 

Press Ctrl + Shift + I (or Cmd +Shift +I for mac users) or click the right mouse button and choose insect. Next click on settings icon > more tools > Coverage. Now reload the page and it will show all the CSS file reports on your screen. The blue colour shows the usable CSS and red shows unused. Further, click on links and find out which code is not usable.

unused CSS 1

Another easy approach to find the list of stylesheets with unused CSS is through Google PageSpeed Insight and Lighthouse.

googlepagespeed unusedcss

How to remove Unused CSS?    

There are multiple ways to remove unused CSS from your WordPress site. below are some solutions we suggest:

Asset CleanUp – I prefer to use the Asset CleanUp plugin to remove all the unwanted CSS from my site. It is free and easy to use. Install and activate the plugin. Next, go to plugin settings. To access plugin settings, click on WordPress Dashboard > settings > Assets CleanUp. Now unload all the unwanted CSS and Js from your site. To do this click on CSS and JS manager and unload all the CSS that you wanted to remove from your WordPress site. 

What’s great about this plugin is that it allows the user to remove CSS for only the homepage, entire site or for a specific URL. You can remove CSS from any post, page or category. So take your time and carefully remove all the unwanted CSS from your site and boost your site speed with just a few clicks. 

Here are some other useful plugins that you can use to do this job. 

  • Perfmatters – The addition of the Disable Javascript feature to this plugin means that it will significantly speed up your website. For example, emojis are loaded by default on every single page of your site. If you don’t utilize them, they’re just taking up space. By turning off the script, the system no longer loads it, so you’ll have fewer.
  • CSS JS Manager – Allows you to remove unused CSS from the website completely or allows you to Defer it to the bottom of the page if you are not sure if its needed.

Clean the Style.css file

Another best practice to remove unused CSS from your site is by cleaning the style.css file on your theme to keep it concise and small in size. To do this, identify the unwanted CSS using the above tools and remove it from your style.css files.

Since it is a manual task I would recommend you to take a backup of your site before making any changes. If anything goes wrong you should have backup to sort out the problem. Here are some best WordPress backup plugins that you can use.

Use Critical CSS

Bonus – Generating critical CSS is a reliable way to render above the fold content of the web page. Generating critical CSS and defer non-critical CSS on your site.  By doing this you can greatly increase your site speed and performance. There are several plugins available that can help to generate critical CSS on your site. Currently, I am using a WP Rocket and it works incredibly. 

The Bottom Line

As explained earlier it is critical to remove unused CSS if you really want to boost your site speed and performance. It not only improves user experience on your site but also helps to rank higher on Google. 

So check your site for unused CSS and boost your WordPress site speed by removing all the unwanted code from your site. Do it and you will notice a great improvement in your site speed and performance. 

It is important to note that you can’t remove all the unused CSS from your site, but minimize it upto an extent. Use the above methods and let me know your precious feedback in the comment section below. I would love to hear from you. 

Have any further queries, just drop a line in the comment section.

Need Help?

Know your websites slow and worried about Google reducing your visibility due to unused CSS issues scripts and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

Are you getting the Efficiently Encode Images error from Google Search Console or Core Vitals?

When it comes to making a website, images play a critical role in attracting and capturing visitors’ attention. They deliver a contextual message that enhances the user experience and answers the information the visitor needs. But in many cases, we use unoptimized high-resolution images, especially for WordPress sites. That’s something that needs to be fixed by each website owner. Because large images slow down your site, annoying the visitors by creating a poor user experience. So bringing the images to the correct size is critical for making your site fast. There are many ways to reduce the image size on your site, and one of them is known as efficiently encode, or encoding images.

This article will explain everything about efficiently encoding images, how they affect your site speed, and how you can encode images to display them on your site properly.

What does it mean to encode images efficiently?

Encoding images is generally referred to as image optimization for reducing the image size to a level that renders after and consumes less cellular data. So basically, encoding images is a way to compress an image to a smaller size without degrading its perceived quality. You can compress the images either using a plugin or manually, both ending up with a faster load time.  

Typically the compression level ranges between 1 – 100, from which 100 is considered as the best quality. Google Lighthouse scans all images with a compression level of 85%. Usually, images with a quality level of 75-90 are considered safer to deliver. At these levels, the images render faster, therefore, accelerating your site speed and performance. 

Efficiently Encode Images

Why do you need to encode images efficiently?

We know images are critical for making your site more engaging and interactive. But they are larger than standard text, taking a long time to load as compared to text. The larger the image size, the slower the page speed. When a visitor visits your page, the server takes more time to download images to show on the screen. Consequently, the visitors spend more time waiting for the images to be rendered. And when your website has multiple photos, it becomes even slower and frustrates the user and Google. 

To improve the page speed and performance, we need to encode or compress images to a size that renders them as quickly as possible. So when images are compressed, they take less space on the hard drive and it’s possible to create image-rich sites without using much bandwidth or storage space, making them faster. One of the significant advantages of optimizing images is that it allows you to retain the quality of the image while reducing the file size. So you can resize images without disrupting the image quality. Google uses speed as one of the ranking factors, so by compressing images you can improve your SEO and rank high on google. It also helps to create a faster backup. Collectively, It is an ideal way to provide a better user experience and attract more and more visitors to enhance your business. 

It is important to note that images make up a lion share of your speed issues and your sites overall weight, so make sure to optimize them for accelerating your site speed.

How to efficiently encode images?

Now you have seen how efficiently encoding images is something that you should not ignore. It is crucial for accelerating site performance and speed. Let’s take a look at how you can efficiently encode images. 

It is pretty easy and effortless to encode images. You can encode images both manually and using a plugin. Here I have written some of the best ways to compress images that wouldn’t disappoint you. 

Let’s get started. 

Compress Images to 85%

One of the best ways to efficiently encode images is to compress them up to 85%. The best way to compress your images is by using Photoshop or any image editing software. You can compress images with more control on image quality. But if you don’t want to work manually, thankfully, there are some incredible WordPress image compression plugins that can help you fix this audit. These plugins optimize your images automatically and compress them to the best possible size to accelerate your site performance. Let’s take a look at some of the best plugins that improve your site speed and image size. 

1. reSmush.it – reSmush.it, a free API that optimizes photos, is now live. The most popular CMSs, such as WordPress, Drupal, and Magento, have been implemented with reSmush.it . Moreover, reSmush.it is the most used image optimization API with more than 7 billions images already treated, and is still totally Free of charge !

2. EWWW Image Optimize – Do oversized pictures give you the urge to say “eeww”… Let EWWW Image Optimizer help you make your site quicker, reduce your bounce rate, and improve your SEO. However, the most importantly, make your visitors happier so they will be more likely to return.

3. TinyPNG – JPEG, PNG & WebP image compression – Reduce page load time by optimizing your JPEG, PNG, and WebP pictures. This plugin automatically optimizes all of your photos by working with the popular compression services TinyJPG and TinyPNG.

4. ShortPixel Image Optimizer – It’s a user-friendly, easy-to-use, comprehensive, stable, and frequently updated lossy image compression software that’s been created by a helpful staff.

5. WP Smush – The incredibly powerful and 100% free WordPress image smusher, brought to you by the superteam at WPMU DEV, will optimize images, activate lazy load, resize them, compress them, and enhance their Google Page Speed!

compress images

Lazy Loading Images

Bonus – Lazy loading is an ideal way to save loading time by preventing the browser from rendering unnecessary assets. By lazy loading the offscreen images, you can incredibly increase your age speed without disrupting the image quality.  Lazy Load is an excellent plugin that efficiently encodes images and fastens your site speed. 

Replacing animated GIFs with video

Bonus – Since GIFs are larger in size, they slow down the loading speed, therefore, take more time to show on the page. Replacing the GIFs with animated videos significantly reduces their massive size and accelerates your page speed. You can convert the GIFs into Mp4 or Webp to reduce their size and save big on the user’s bandwidth. 

Using Webp images

Another efficient way to reduce the image size is by converting the JPEG and PNG images to Webp images. WebP images are considerably smaller than JPEG and PNG images; therefore, shifting to them reduces page size and accelerates speed. It is an excellent replacement to minimize file size without compromising on quality. Youtube found that converting images to WebP can decrease the load time up to 20% and for facebook up to 80%. Moreover, this format offers both lossy and lossless styles.

The Bottom Line

Optimizing website images is an ideal way to increase site performance and speed. If you want your site to be ranked top at google, you should optimize the image size on your site. Above are some helpful strategies you can put into practice to encode images on your site. They are accommodating and work incredibly. So start working on image optimization and accelerate your page with a few clicks. It is crucial always to upload images with a proper size. Don’t upload images with monstrous sizes that kill the site loading speed. 

Try out these hacks to optimize images, and let me know if you have any problems. I would love to help you sort the problem. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to image issues scripts and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.

Improving Google Page Speed by minifying JS is a good step to improving your SEO.

Having the fastest page speed is something that everyone wants, but only a few get. This year page speed is becoming more important as it impacts your site performance in several ways. Specifically, it affects SEO ranking on Google, paid ads, and the user experience on your site. On the other hand, a slow speed will only frustrate the users, reduce your site’s organic traffic and provide a poor user experience. But getting the fastest page speed is pretty challenging.

Google Lighthouse Pagespeed reports that unminified javascript files come in the way of your page speed. That’s where the term minify comes in. 

In this post, We will explore everything you need to know about minifying javascript and why it is so important for your site’s health and speed. Then finally, you will learn the most accurate ways to minify javascript files on your WordPress site. 

Are you ready? 

What is Javascript Minification?

If you ever have worked on the back end of a WordPress website, you see various files containing the code for the site’s functioning. Since human beings write these files, they have wide white spaces for making them easier to read. Consequently, the files become bigger and take extra time to load. To make the site faster, we need to optimize these files. That’s what is called modification. 

Code-no-minify

Minification of javascript files is largely the process of removing all the unnecessary characters from the code, such as extra spaces, line breaks, unwanted comments, etc. This reduces the overall size of the files, and the website enhances the page speed and loads it faster than ever. Basically, minification is a way to optimize your WordPress site to make it lightweight and fast loading. 

Why is Minifying Javascript Important?

Minification is all about boosting page speed and site performance. It reduces the file sizes on your site and makes the downloading process faster, enhancing the page loading speed. The reason why minification is so important is it improves the page speed, improves your site performance, provides a better user experience and ultimately helps to get rank higher on Google.  

One of the added benefits of minification, it obscures your code from casual onlookers. It makes your code harder to read for malicious users or competitors snooping at your websites code. So if that’s something you’re worried about, thankfully, minification can help you in this. So if you want to make your site fast and efficient, it would be an ideal option to get started.

code afterminify

How to Minify Javascript on your WordPress Site?

Minifying the javascript files on your site is the same as minifying CSS files but with different tools. Thanks to various JS libraries and WordPress plugins, you don’t need to be a developer or programming language expert to minify the files on your site. It is pretty easy and effortless to work with these tools. All you need to do is just carefully follow the instructions, and you will be amazed by the results. For your convenience and ease, I have listed some helpful tools that work perfectly.

Autoptimize Optimize your website with Autoptimize. It may aggregate, minify, and cache scripts and styles, as well as inlines critical CSS by default but can also inline essential CSS and defer the aggregated overall CSS, scripts, and styles to the footer. It also moves and defers scripts to the footer while minifying HTML. (https://wordpress.org/plugins/autoptimize/)

Fast Velocity MinifyThe tool is intended for serious and expert users. It includes a number of features that can boost your website’s load speed, including: CSS & JS optimization, HTML & CSS optimization, image optimization, page speed analysis with SiteSpeed Insights (powered by YSlow), keyword research tools to help you optimize your site’s pages and content. (https://wordpress.org/plugins/fast-velocity-minify/)

Merge + Minify + Refresh – Gathers together and combines Cascading Style Sheets (CSS) and JavaScript files. The resulting files are then minified using Minify (for CSS) and Google Closure (for JS – fallback to Minify when not available). WP-Cron is used to minimize the files, ensuring that your website does not slow down as (https://wordpress.org/plugins/merge-minify-refresh/)

Better WordPress Minify – Allows WordPress’s output buffer, which respects the order of CSS and JS files as well as their dependencies, this plugin utilizes the PHP library Minify. BWP Minify is a highly configurable and simple-to-use tool (https://wordpress.org/plugins/bwp-minify/)

Minify the Files Manually

minifi code by hand

As well as using tools you can also minify the files manually. Not only should this help with your site’s loading time, but it should also give you peace of mind that nothing is being missed out on.

Closure Compiler – Closure Compiler is an excellent tool from Google developers that allows you to minify javascript files on your sites. What is amazing about this tool is that it enables the user to optimize the code as he wanted. For example, if you want only to remove white spaces only, you can choose the option in the optimization. Just enter the URL and optimize the code as you wanted. 

Javascript-minifier.com – This is another simple, quick, and easy tool to minify javascript files on your site. All you need to do is to copy and paste the code and click on the minify button. They also allow you to download the output code file for more convenience.  

Jscompress.com – In this javascript compressor, you can minify the code by copy and paste the code. But the amazing thing about this tool is its unique feature that allows you to compile various javascript files at once. So you can combine multiple files into one file for enhancing your page speed.

There are some other amazing tools that allow you to minify more than one type of code, such as CSS, Javascript, HTML, and even PHP. If you plan to minify different kinds of code on your site, these would be an ideal option for you. Here are some best tools that I have tried. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to JS or Jquery scripts and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Josh Morley

I have been designing & marketing websites since 2013. I specialize not just in WordPress web design but also in online marketing. SEO, PPC, keyword research, link-building and most recently on lead acquisition for local businesses.