How fast is your website? Minifying CSS files can help to speed up the loading time of a WordPress site. Minification removes unnecessary characters from code which speeds up load times and reduces file size. Minify CSS in Google Search Console and Core Vitals Minify CSS will work with you to identify, fix, and monitor any performance issues that might be hurting your search engine ranking or conversion rate.

Site speed is considered a very important ranking factor for a couple of years now. Minifying CSS and JS files is a pretty simple way to improve it.

Google PageSpeed Insights indicates that several metrics affect or relate to page speed. One of these factors is large CSS files that cause the page to load slower frustrating the user with long wait times while the website renders the content. So if your WordPress site is running slow, you may need to minify CSS files on your WordPress site. 

Though minification is a straightforward process, it may end up breaking the site if not done properly. Minifying CSS in WordPress can be a bit tricky if you do it manually without the right tools.

There are many solutions to minify CSS and you may want to back up your site before you try any of them.

In this post, I will aim to explain what minification of CSS is, how it improves your site performance, and some of the best possible minification solutions for your WordPress site.

Let’s get it started.

What is Minify CSS?

Websites are made of different files, including CSS files to give the website style, they are arranged in various folders. These files contain code that determines the structure and functionality of your site. But to make your site faster and lightweight, we need to reduce the code present in these files. That’s where Minify CSS comes in. 

Minifying the CSS manually is the process of removing unnecessary characters from it which will make it smaller in size and load faster. Minification does not change how a website’s layout looks but rather makes its content fewer bytes to load, thus making your WordPress site speed up with time .

As its name implies, Minify CSS is a strategy to reduce the size of your .css files by removing all the extra spaces, unnecessary comments, and unused code that’s written in your CSS file. Thus, by minification, we remove all the unwanted data from the files that don’t require the code to execute. As a result, it reduces the size of CSS files and the size of the website itself, making your site load faster than ever. 

For example, you have a CSS file on your site that looks something like in the image below. 

Minify CSS in Google Search Console & Core Vitals

But its minified version will be something like this;

Minify CSS Core Vitals

As you can see the difference, all the line breaks, unnecessary comments, spaces, and indentations are removed now. Everything unnecessary for the site function is removed, reducing the size of your CSS file. The smaller the file sizes, the faster the site speed. 

Why Do You Need to Minify CSS Files?

One of the apparent reasons to minify CSS is to improve WordPress speed and performance. Minified versions of files are faster to load and boost the site’s speed providing a better user experience.  It improves the user experience on your site, as the server doesn’t need to download bigger files. And most importantly, it reduces the bandwidth costs as fewer data transmits over the network.

It will also reduce errors in your Google Search Console and Core Vitals. Helping you to increase search ranking postions, traffic and conversions.

If you are trying to achieve a high score on Google PageSpeed Insight or other tools, then you should start with minifying CSS and Javascript files on your site.

Mification reduces only a kilobyte from your website’s files, and is a good start toward improving your site performance. So if you want to improve your WordPress site performance and make it faster, minifying CSS files will help you get started. 

How to Minify CSS?

There are various tools and ways to minify CSS that work differently on different sites. You can minify CSS both manually and by using a plugin. I will explain both methods in detail, so you can choose the one that suits you better. 

But before you start minifying your CSS files, it would be better to take a backup of unminified files. So you have a copy of the original files if anything goes wrong. Or if you have a staging site or set up a local testing environment, you should first minify the site here to make sure everything works right before making the changes to the live site. 

Minifying Files Manually

If you site is not updated very often and it has a lot of static content you may want to chose to manually minify your CSS. However, minifying files manually can take a significant time, and there is more room for error. But thanks to various online minifying tools that make this method pretty easy and effortless. All you need to do is copy and paste your CSS code, and you will get the error-free minified version of your CSS files. One of the best tools to minify CSS is CSS Minifier. It is a free online tool that beautifies your CSS code by removing all the extra space, line breaks, and comments, giving a quick boost to your site speed. 

Minifying Files Using Plugins

Another excellent way to minify the CSS files on your WordPress site is by using a plugin. There are several plugins in the market with millions of installations; that would love to be used your site performance. Here is a list of some of the best plugins that I have tried so far, and I would love to recommend them to you. 

WP Rocket

Merge + Minify + Refresh — WordPress Plugins

JCH Optimize   

CSS Minify

Fast Velocity Minify

 Autoptimize

Hummingbird Page Speed Optimization

So these are the plugins that you can use to minify files on your site. They are incredible at the job and provide great scanning features that allow you to monitor your site performance. Plus, they also offer actionable recommendations for boosting your site speed right within the plugin. 

If I have missed a plugin that you would like me to add to the list feel free to reach out.

Now you have a complete understanding of how critical it is to minify the files on your site. We have also shared some of the best possible ways you can choose to speed up your site. Don’t delay it further; keep your site running faster for everyone and rank higher on google because no one likes slow websites, even Google itself.

Need Help?

Know your websites slow and worried about Google reducing your visibility due to render-blocking 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.

If you have a WordPress website, you would know making a website fast is one of the prime goals for ranking higher on google. Excellent performance and relevant products visually are the key to engage users and infatuate them to visit sites again and again. Unfortunately, various roadblocks cause the site to slow down and hinder its performance. Tools like Google Speed Insight and Lighthouse revealed these metrics and provided the best possible solutions to improve your site performance. If you check your WordPress site in Google Speed Insight, you will see a warning “Defer Offscreen Images”. 

Do you know you can defer offscreen images on WordPress sites to improve site speed and ranking? In this post, you will learn what deferring offscreen images is, how to defer offscreen images in WordPress by lazy loading, and how it affects your site performance and credibility. 

What is Deferring Offscreen Images? 

Defer offscreen images refer to the method to delay the loading of the images that are not visible in users viewport until they are needed. By doing this, the browser will focus on the loading of what is necessary, making the website faster. 

When a visitor visits your webpage, their browser downloads all the images present on the page, even the ones that are not visible in the viewport, making the rendering process slower than normal. So if you have a lot of images, it takes even more time to render the page. That’s why we use the deferring offscreen images to increase this rendering process in the viewport. 

When you defer the offscreen images, the browser will download only those images that are visible immediately to the user. It will download the offscreen images only when the user scrolls to them. This makes your website render faster and helps provide a better user experience. 

Note: It is important to note that it is not only images that you can defer; there are many other assets on your site that you can defer to increase the speed, performance and much more. 

Why care about Deferring Images, and what happens if you ignore the issue?

Since images are one of the largest sources on your site and take a long time to download, deferring offscreen images can dramatically increase your site speed, SEO, and user experience. It ensures the images download only when they are needed, reducing the bandwidth. It lightens the page dramatically and creates fewer DOM elements. When visitors hits your page, they begin to interact with the page even when the page is still downloading. They immediately show the images present at the top of the page while the bottom images are still downloading. 

Deferring offscreen images is not like compressing images or the web page size. If you have a web page of 5 MB, it will remain the same size with or without deferring. Instead, it will improve how faster the visitor perceives content or images on your site. It renders faster, which is enough to keep the visitor engaged on your site. Moreover, we know that Google ranks the site higher that are faster and provide a better user experience. By rendering offscreen images, you can improve your site SEO and rank higher at Google. If you are not deferring images on your website, your site will load slower, and it is more likely you will lose visitors and rank lower on Google. 

How to Defer offscreen Images?

Now you have seen how essential it is to defer offscreen images if you want your site to perform faster, rank higher on google, and provide a better user experience. It’s time to learn how you can defer offscreen images on your WordPress site. 

The simplest strategy to defer offscreen images is by lazy loading. Lazy loading ensures that your site downloads images only when needed, making your site run faster. Once you start to lazy load images on the site, you will see the “Defer Offscreen Images” will disappear from speed testing tools. It is a simple and straightforward process that takes only a few minutes and steps. Below we provide a complete breakdown that’ll surely help you. 

Using a Plugin

It is the easiest way to defer offscreen images on WordPress, as there are many plugins available that work perfectly without touching the code. A3 Lazy Load is the best choice plugin with millions of installations. It allows you to set up lazy loading in a few clicks without making any changes in the javascript library. What is incredible about this plugin provides SEO-friendly script tags, the capability to lazy load images & assets, and features to exclude specific images. There are some other plugins also available that work fantastic and provide a good user experience. 

Other plugins that also support lazy loading:

Using Javascript Library

If you are working on a regular site, you can defer offscreen images with or without javascript. You can download a javascript library to help, as there are many options available. Lazysizes javascript library is best in its jobs. Here is a quick guide to get started. 

  1. Download the lazysizes library from the source and add it to your page via the code given below. 

<script src=”lazysizes.min.js” async=””></script>

  1. Next add the class=”lazyload” to all images and change the src attribute to data-src.

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

Deferring Background Images

There are many background images surely you want to defer. For doing this, you will use the similar above technique but with a CSS identifier to target the image. Here is an example

<style>

.bg-stage.lazyload {

background-image: url(lazyloaded-bg.jpg);

}

</style>

<div class=”bg-stage lazyload”>

    <!– content –>

</div>

Without JAvascript

If you don’t want to work with a javascript library, no problem. Thanks to native lazy loading, that allows you to defer offscreen images without javascript. All you need is to add a loading=” lazy” attribute to your img tag. 

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

This will ensure the deferring of the images when they are offscreen, reducing the time to render a webpage, providing a better user experience. 

The Bottom Line

Deferring Offscreen Images is an easy and fast strategy to boost site speed. It is pretty simple and easy to start deferring images. There are many javascript libraries and plugins available to help you in work. So which method you use is entirely dampened how you feel comfortable. You can also trigger deferring without using a plugin or javascript library. So when you have so many options, why delay. Defer offscreen images on your site from today and take your site to a whole new level. 

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.

Google-Core-Vitals-Eliminate render-blocking resources

The main goal of every website is to provide visitors with an excellent user experience. Most users agree that a faster website is preferable to a slower site. But several reasons slow down your site speed and affect its performance. They are commonly known as render-blocking resources. If you manage a website you might be familiar with the phrase from Google Search Console “Eliminate render-blocking resources” and how troublesome it is. Not? Don’t worry; we will explain it in this post.

So if your WordPress website has render-blocking resources and is looking for an exact solution, you are at the right place. This article writes a complete breakdown of render-blocking resources in WordPress, what they are, how they affect your site performance, and how to eliminate them.

If your not sure if you site has render-blocking resources just go to https://developers.google.com/speed/pagespeed/insights/ and enter your URL and Google will give you a list of error on your site.

What are render-blocking resources?

Render-blocking resources are CSS and Javascript files that play a crucial role in rendering a web page. When a user opens your site, browsers encounter render-blocking files and stop downloading other resources until these files are processed. During this time, the entire rendering process is put on hold, thus reducing the site speed. To better understand what render-blocking resources are and how they hurt your site performance, let’s start with the basics of how a web browser renders a web page. 

Whenever a user lands on your site, their web browser starts rendering by reading the code from top to bottom. Got it?

So when the browser reads the HTML markup from top to bottom, it encounters various CSS and Javascript files ( each site has its CSS and java files and many more). When browsers encounter these files, it stops reading and waits until these files download and parse. As a result, your site takes a longer time than usual to render web page content; thus, your user considers your site is slow. 

When talking about render-blocking resources, we usually refer to:

  • CSS
  • Javascript
  • Fonts added from CDN or local server
  • HTML importer

It is important to note that all CSS and script files are not render-blocking resources. Many people think that images are also render-blocking resources that are not valid. Images, media files, and <script> tags present at the bottom of <body> are perceived as non-render-blocking resources. Though it is still important, you should optimize your site’s images and reduce file size to flourish your site speed. 

Lighthouse Render blocking scripts
Google Lighthouse Test

Why is it essential to eliminate render-blocking resources?

Now you have a clear-cut idea about render-blocking resources. The next question that would arise in your mind is why is it crucial to eliminate render-blocking resources in your sites? 

Eliminating render-blocking resources in site is crucial for site health because our site speed plays an integral role in promoting our site health and performance. A faster website provides a great user experience and consequently increases the number of visitors to your site. On the other hand, a slow site provides a poor user experience, and you’re more likely to lose visitors. 

Moreover, site speed is also crucial for Search engine optimization SEO. Because users rely longer only on those sites with a faster speed and like to visit them again and again. Thus, with the fastest speed, you promote user experience on your site and rank high in search engine results. But our site speed is affected more by render-blocking resources. Note that every resource takes up bytes and requires sufficient time for downloading and processing. It made a considerable difference in site loading time and thus frustrated the visitors.

Make sure your site has clean and concise code, as minimal as possible, to promote your site speed. The lesser and lighter files you have, the greater is your site speed for sure. Thus, make sure your site doesn’t have any render-blocking resources at all. If you don’t have checked your WordPress site yet, you can check it at google page speed insight. If you don’t remove render-blocking resources from your site, your site will show poor performance and negatively affect your business. 

How to eliminate render-blocking resources in WordPress? 

You learn about render-blocking resources, their effect on your site, and how crucial it is to remove these resources to flush your site’s health. Now it’s time to know how to remove them. You can eliminate render-blocking resources in WordPress both manually as well as by using the plugin. Let’s take a look:

Render-blocking CSS

You can remove render-blocking CSS in three ways: 

Concise your CSS files: To concise your CSS files, remove all the whitespace and unnecessary comments from your files.

Reduce the number of CSS files in the critical path: Thi means combining all the CSS files in one and remove the call to these files from your HTML markup. 

Properly call your CSS files: Call CSS file in HTML like this: <link rel=”style.css” href=“style.css”>. Don’t use the @import method. Because when you call a CSS file using the @import method, the browser goes back and finds the imported CSS file to read the code, resulting in slow rendering of your webpage. 

Render-blocking Javascript

If you want to remove render-blocking javascript, you need to identify how many javascript files are loaded on your site, which causes problems and where they are called in your HTML. To do this, you can use Google’s PageSpeed Insights. Make a list of these files and add either an “async” or a “defer” attribute to them. By doing this, these attributes allow the site to download HTML and javascript side by side and lower the time to render web pages. 

It is important to note that use “async” on independent scripts that don’t rely on anything else to load. Sometimes, it breaks the script that depends on load, so for dependent scripts, “defer “is best suitable. 

Using Plugin

While you are working with WordPress, it is possible to optimize CSS and Javascript without even touching the code. So if you are not comfortable with manual solutions, you can fix this issue using a WordPress plugin. There are many plugins with a millionth of installation ready to help you sort out your site problems.

It is important to note that before working with any of these plugins, make sure to take a backup if something goes wrong.

So here you see how easy it is to remove render-blocking resources that come in the way of your site speed and performance. So check and remove any render-blocking resource from your site and make a better user experience with your visitors and clients because any delay will frustrate your user and affect your business. 

Need Help?

Know your websites slow and worried about Google reducing your visibility due to render-blocking 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.