How to avoid unnecessary CSS in WP and its impact on the performance

When you try to optimize your WP site speed, you need to remove unnecessary CSS. It delivers a faster page loading experience to the users and improves your site ranking in the Google page speed test.

We focus on using reliable and fast web hosts, enabling caching, optimizing images, and removing unused plugins to reduce server load, compressing javascript & CSS, using a content delivery network, etc.

But sometimes we can improve our page performance even more by avoiding those components which load as bloats. So, next in the list you can remove these CSS and JS files from WordPress to make your page feel smooth and fast. In this article, we will particularly focus on avoiding CSS that is not required.

Of course, there are great plugins to unload specific CSS from a page, such as WP Asset Clean Up, PurifyCSS, or Perfmatters to name a few. In this article, we will see how to do it with and without installing plugins on your WordPress site.

Before that, let’s go through…

What is unused CSS?

Unused CSS is the CSS code that loads regardless of its importance on a particular page. Some of these codes do their work to design page elements, however, the rest(most) of them are not required because a single page does not demand all the CSS codes written for the entire website.  

what is ununsed css

Most of the time almost 80% of the CSS files probably do not do anything on a single page. You can test it on your personal site’s homepage and observe how many CSS files are being used on the page against what is the total number of CSS files being served.  

Why does the plugin load all CSS?

During development, the theme developers need to write the theme in such a way that it will support all kinds of websites whether it’s a blog, forum, woocommerce site, and so on. It has a decent level of complexity because individual sites require various HTML elements along with their own adjustments.

These include our daily used elements:

  1. Search bar
  2. Navigation bar
  3. Widgets
  4. Icons
  5. Typography
  6. Comment box
  7. Social media section
  8. Author bio section
  9. Buttons
  10. Tables 

and the list goes on… 

For example, when a plugin is including the style.css file, it would be something like this

<style>
    @import url("style.css");
    p {
           color: blue;
           font-size: 16px;
        }
</style>

99% of the time developers put all the CSS codes in this style.css file. What it does is load all the codes from the style.css file regardless of the certain elements you are using on a certain page, and all the CSS will be served to your visitor’s browser. And for this, you have no right to blame the developers either.

What if we don’t serve these elements?

In your blog, you don’t need Woocommerce if you are not running an additional store, you don’t need a comment box either if you are using a third-party commenting system (Disqus for example). So these elements can certainly be avoided while loading the page. 

Again some elements are needed in certain pages although are not necessary for all pages on your site. A good example is the author box, it is a part of your blog posts however on pages such as the homepage, privacy-policy an author box is worthless. 

Avoiding this CSS will only improve your page performance because they are unused CSS and simply are not doing anything good. 

Note: It’s not just the elements of your theme, plugins do inject additional CSS into your pages. This another good reason for keeping the installed plugin count low on your site.

So, does it say you can remove all the unnecessary CSS from a WordPress page!

Why is removing CSS not an easy task?

Filtering out the unnecessary CSS is not an easy job to deal with, mainly because of dynamic classes. It’s a technology to load the function of a class at runtime. It allows loading CSS functions that are uncertain or not known before a web page starts loading.

The Javascript function of your site can load CSS classes as needed and it does not have to keep track of the name of classes before any one of these classes is loaded and run. This behavior makes it difficult to identify which part of the CSS will you unload and whether it is safe given missing CSS can break your page.

Also, extraction of used CSS is not easy like critical CSS because there might be js files that call a certain CSS class following a particular event of a button click. These CSS classes might be required for animation such as the “go-to top” button on your page. Being dynamically inside javascript these CSS classes are extremely difficult to find for removal.

Note: Critical path CSS which is an important style/CSS required to render above the fold contents. The rest of the required CSS is loaded in the footer section of the page to avoid render blocking. 

critical path css

How to find unused CSS and JS files on your pages

To remove or avoid using unnecessary CSS files we need to analyze those files first. The most comfortable way to do this is the coverage tab in the Chrome dev tool. To initiate it;

  • First, open the page you want to debug.
  • Press Ctrl + Shift + I to open the chrome dev tool.
  • Click on settings icon > select more tools > select coverage.
coverage tool
  • Then click on the reload button that appears below.
analyze-unused-css-using-developer-panel
  • Chrome will analyze your webpage and it will prepare a report where you can see the element’s URL, their types, total bytes, unused bytes, and Usage virtualization.

You need to focus on the Usage virtualization tab, mainly the correlation between used and unused bytes of page elements. Red color represents the number of unused bytes whereas blue color means the number of used bytes. 

Then you can select the URL to dig a little more to find out what exactly is being used and what are unused codes. You can see the unused and used code section in the same red-blue color representation. 

See this example below;

find unused css

(As we aim to look for unused CSS make sure you have selected the URL of a CSS file. In this example, I did select a JS file only for tutorial purposes)

How do we remove unnecessary CSS

There are multiple approaches to avoiding or reducing unnecessary CSS on your webpage. I will try to keep the hierarchy in reverse order of difficulty. 

1. You can avoid inline CSS styling in the WP editor

While creating a post we usually type in the default Gutenberg editor which is good because it allows you to create a beautiful looking well-organized page. But the block adds additional inline CSS to your page. 

Typically, if you keep your posts simple and do not use advanced Gutenberg styles then you can avoid the inline CSS by using the code editor. You can use HTML elements such as <p> for paragraphs, <H1>, <H2>, etc for headings, <li> for list, and so on.

For example;

inline css styling

You will be able to use the classic editor too once you paste the final copy of HTML into your WordPress code editor.

2. Generate critical CSS

Critical CSS can be beneficial to improve FCP (First Contentful Paint) where it only renders above the fold contents in the header and delays the loading of other styles to last. Ultimately this improves your page speed and resolves the render-blocking warning in the page performance testing tool.

More than removing the CSS from a page, delaying is the key mechanism here that avoids the loading of CSS during page load.

Various WordPress plugins can generate critical CSS for example Autoptimize, WProcket, etc. Alternatively, you can use Criticalcss.com to generate critical CSS in a couple of simple steps.

3. Use a CDN to deliver CSS files

CDN can drastically improve the content delivery speed because of its widely distributed network which reduces the distance between users and servers. Thus it can reduce server latency and download of CSS (not only just CSS though). Even if you have a lot of unused CSS files on your page CDN can deliver them in less than 50 ms.

So the use of CDN won’t necessarily remove unnecessary CSS from your page instead it will quickly deliver the complete CSS along with other contents in so much less time. You can use good CDNs such as MaxCDN, Sucuri, Cloudflare, etc.

4. Use the Asset Cleanup plugin to remove CSS files (plugin)

The asset Cleanup plugin marks it very easy for the users to unload CSS from your site. It has a free version available in the WordPress repository. All you need to install and activate it to find and unload CSS files in CSS/JS manager. 

Use the Asset Cleanup plugin to remove CSS files

I would recommend this plugin because you will find tips for each CSS file to choose whether you would want to unload or keep it. Also debugging your site becomes easy because it provides a simple enable/disable option and you will know which action is breaking the site and which one is improving the performance.

You can also open any published page and you will see a list of loaded CSS and JS files. These files are classified so it’s easy to go through them. Then you can see which are stylesheets not getting used on your page and then unload them sitewide or for individual pages.

Remember, sometimes CSS that seems unused on a particular page may still have work to do so removing them can break the page. The good news is you can immediately revert the change if unloading any CSS breaks a page.

unload assets

5. Use the Perfmatters plugin to remove CSS (plugin) 

Perfmatter is a premium plugin which is another great option when it comes to unloading js and CSS files from a page. It comes with a script manager that is super simple to use. You will have the ability to unload an entire plugin or individual js/CSS files from a page.

There is nothing to configure on your part. All you need to install the plugin, activate it and you can see the script manager on the WordPress toolbar for each page of your site. 

parfmatters-plugin

6. Create a plugin manually to remove CSS (and JS) files

This is a manual approach to removing unused CSS files and you will create a plugin that will keep the record of removed CSS. In WordPress, when you want to remove unnecessary CSS/JS there are four main functions you will require. 

  • wp_deregister_script($handle): Remove the registered scripts.
  • wp_dequeue_script($handle): Remove the scripts enqueued before.
  • wp_deregister_style($handle): Remove the registered stylesheet. 
  • wp_dequeue_style($handle): Remove the stylesheet that you enqueued before.

And other required functions to create the plugin are,

  • __return_false()
  • __return_empty_array()

You may also need conditional WordPress tags to remove unused CSS/JS files on a certain page. Now to create the plugin go to wp-content > plugins, create a new folder named “remove-resources” followed by the .php extension.

remove-assets

Add the following content to the file:

Now for example if you want to remove styles and scripts of the Jetpack plugin you need to add the following code into the remove-resources.php file.

Finally, go to the WordPress plugin manager and activate the remove resources plugin. It will remove the CSS you have mentioned in your newly created plugin.

Final words:

It’s not easy to remove every single bit of unused CSS from your site, and it’s almost impossible for us as a user of WordPress! But with the mentioned steps you will be able to reduce unnecessary CSS from a page and improve page speed + user experience. 

After reading the article share your thoughts with us in the comment section and don’t forget to share it. 

Cheers…

Read More

What to do When a WordPress Website is Hacked!

A hacked WordPress site causes panic. It’s one of the most frustrating experiences a site owner can face. In this post, I will help you with how to detect whether a WordPress site is hacked or not along with steps to clean your site.

There will be a few tips, in the end, to prevent your WordPress site from being hacked in the future.

How to identify if your WordPress site is hacked?

When your site is hacked it will start behaving as it should not. Generally, a WordPress site can behave strangely without getting hacked. These issues are mainly related to internal settings and plugins causing errors. 

For example, your caching plugin can break your site’s layout, misconfiguration of the SEO plugin can result in 403 errors, a white screen because of code conflicts, and many more. But these are not necessarily the signs that a site got hacked. 

Let’s take a look at some signs you should be careful with that could be indicating your site is hacked.

  • First and foremost, you can’t log in to your site.
  • You haven’t done anything to your site recently but you can identify some changes. (It can be your homepage is replaced by a new page or  added new content)
  • The browser gives you a warning when you try to visit your site.
  • Google gives a warning that this site might be hacked.
  • Your site is redirecting visitors to other sites.
  • Your hosting provider has informed you about unusual activity.
  • If you are using a security plugin then you might receive a warning from it as well.

Now let’s look at these events in brief:

1. You can’t log in

wordpress-login

Sometimes you can’t log in to your WordPress admin dashboard because of a wrong password or because you have changed your login URL previously. While this is a potential warning of your site is hacked you should not be too quick to consider it. Rather try to reset the password and see if that will resolve your login problem.

If you can’t reset your password that can be a warning sign. Although, being able to reset the admin password doesn’t prove that your site is safe or not hacked. You will have to examine more to identify such potential threats.  

The reason why you may not be able to log in once your site is hacked is the hacker either changed your password or removed the user from WordPress. Sometimes they can replace the default login address i.e /wp-admin with something else. If so the site will give a 404 error when you try to visit this address.

2. Your site is changed 

If you notice that your site looks different whether it’s the homepage or your website theme without your acknowledgment then it can be a huge sign that someone has accessed your site without permission.

These kinds of changes don’t have to be something that can be spotted easily. Little changes like adding suspicious content, links to spammy or bad sites, and hidden links mean your site could have been hacked.

However, changes like theme or frontpage layout can be caused accidentally when you are updating your theme, activating a pre-built design for your site. I would rather recommend using themes from trustworthy & reputable sources. 

3. Browser warns the visitors the site may not be secure

site connection is insecure

Check your site on visitor’s mode and if you get a warning that the site is not safe it could be a likely warning that your site has been hacked. This can also happen due to a plugin or themes issue with SSL. 

In this case, try removing/deactivating the plugins to check whether that resolves the issue as well as check your domain SSL status. If that doesn’t help you should be careful and follow the advice given with the browser warning to diagnose the issue.

4. Search engine’s site hacked warning 

Another way to know your site is hacked is through the warning on Google’s search result. Google will display a warning message “the site may be hacked” on SERP under your site or page URL. If you are getting this kind of result lately, then there is a possibility that your sitemap is hacked.

this site might be hacked

A hacked sitemap or 403 error can prevent Google from crawling the website or at least it will affect the way Google crawled a site. It can be more than just a sitemap hack. You will need to diagnose and find out the origin of this problem.

5. The site is redirecting to external pages

can redirect to malicious page

If your site is redirecting to pages or sites that are not related to your contents, contain spammy or adult ads that could be a sign your site has been hacked. 

Hackers will probably add scripts or redirect rules which will take the visitors to other sites as soon as they visit yours. This can raise a serious caution in visitors’ minds while they are being taken to the pages they are not keen to visit. 

Such behavior not only harms your site reputation but also you will notice a significant downfall in every positive thing on your site, whether that be your daily visits, user engagement, revenue, etc.

6. Warning from your security plugin

Security plugins like Wordfence constantly track the activity on your site. You should have a robust security plugin that protects your site and keeps you informed of all kinds of suspicious activities so that you know what is going on in the backend.

If you have a security plugin then it should notify you about recent unusual activities or if someone is trying to access your site. Once you get informed about such threats regardless if the site is hacked or someone is trying to do so, you can take necessary precautions to protect your site.

Nevertheless, a warning email from your security plugin means bad activities are going on behind and might be a crucial sign of your site being hacked.

7.  Warning on your hosting panel

A reputed hosting service has inbuilt tools to monitor your website activities and report if illegal actions are recorded. You will also find a virus scanner to scan your website files for infected files providing backdoor access to the hackers.

Make sure you use a reputed hosting service and keep a close eye on the hosting’s site activity log. If you find any warning in there it could be a sign that someone is hiddenly working on your site. 

Now you know the behaviors that warn about a site that has been potentially hacked, let’s find out what you need to do to fix your hacked site and get it back to the ideal state.

WordPress site hacked: What should I do next?

Once you confirm your site is hacked, you will need to take the following steps to clean your site and get it back to its ideal state. You might not have to follow all the steps mentioned below as you might be able to fix your site at any stage of the following. 

Step 1: Don’t panic

don't panic

As I mentioned above a hacked site is the worst thing a webmaster can face, but the first key to progressing towards a solution is to stay calm. You do not need to be frightened in such a situation, instead maintain a clear mind to help yourself to proceed into the diagnosis part.

Since the site is still visible to the audience, to reduce the damage and bad impact consider putting the site into maintenance mode and relax a little bit. You can simply use a WordPress maintenance mode plugin to do that, or if you use Cloudflare then activate the under attack/development mode.

Steps to active maintenance mode in WordPress: 

  1. Log in to your WordPress dashboard (if the site is accessible)
  2. Go to plugins > add a new plugin.
  3. Install a maintenance mode plugin.
  4. Activate the plugin and set the maintenance mode to at least 24 hours.

Once the visitors can’t see what’s going on behind your site, you can take your steps one by one carefully. If you can’t access your site then browse it as a visitor mode to see whether the contents such as posts and images are appearing properly or not. If yes, you need to do a backup job from your cPanel or hosting dashboard. We will go to this step later in this article.

Step 2: Reset the password

have a strong password

Again this step requires the ability to access your site after being hacked. If you can access then it’s important to change the password of all user accounts since you don’t know which account is being used to access your site. If you have multiple users working on your site ask all of them to reset their passwords.

Once the user passwords are modified, next change your hosting password, database password as well as SFTP password. 

Step 3: Remove users

remove users from your wordpress site

If you find any user account on your WordPress site that you do not acknowledge it’s important to remove such accounts. Such accounts could be used by hackers to access your site and perform illegal activities. 

You can either remove them right away or confirm with your co-administrators whether they have recently changed their account details or not before finally deleting suspicious accounts. 

To remove a user from your WordPress site:

  1. On the WordPress dashboard expand users.
  2. Then click on all users.
  3. Check if you can find any user account under admin access that is out of your acknowledgment. 
  4. To remove a user hover on the user row and click on the delete option.

Step 4: Update plugins and themes

After removing suspicious users next you need to make sure that all the themes and plugins are up to date. Themes and plugins updates are frequently released by the developers to fix security issues and improve protection.

If you are using any plugin that is outdated or not compatible with your WordPress version try to get rid of such plugins if alternative and updated plugins are available. 

This step is really important because in case your site is misbehaving because of an outdated plugin or theme then you will be able to resolve your issue by installing the latest updates or an alternative. 

Updating a plugin in WordPress is pretty simple. All you have to open the installed plugins page and update the plugins in bulk or one by one. As for themes, go to Appearance > themes and update your currently installed themes.

Another recommendation, do not to keep hold of unnecessary themes unless you are planning to use them in the future. Although, the necessity of doing so is low in priority and entirely depends on your consideration. 

Step 5: Reinstall plugins and themes

reinstall plugins

Apart from updating the plugins & themes, you can check your site status by uninstalling the active plugins and themes. Updating a theme or plugin still can hold bad codes into it that didn’t catch the developer’s attention. 

If you are unsure about whether a plugin & theme is causing this problem or being the backdoor access provider then you should debug them at this point. Make sure to uninstall the plugins first and then see the site’s status. If deactivating/uninstalling the plugins bring your site back to an idle state then activate or reinstall the plugins one by one. Check your site’s status after every plugin activation. This way you can find out which plugin might act as a threat to your site. The same procedure applies to the theme diagnosis too.

Step 6: Remove unwanted files

To find out if there’s any file in your WordPress installation that shouldn’t be present install a security plugin like WordFence or use your hosting site scanner. This kind of tool will scan all the files in your hosting directory and inform you about any potentially infected files.

Run a scan and if you notice any such files in the scan result remove that file from your directory. It makes more sense to have a backup of your site before removing the file as well as analyze the file which you are about to remove to replace it with a fresher copy later.

Step 7: Clean out the database 

database cleanup

Doesn’t necessarily a way for the hacker to access the site but consider cleaning the database to remove unwanted or bloat entries. This will not only make your database take lesser space but also remove unnecessary rows and related data making your site load faster.

Step 8: Reinstall WordPress

reinstall wordpress

This step is necessary when you can’t access your site to make the changes we have discussed earlier. Make sure your site has the contents and no prior damage has been made to the structure of the site before processing these steps.

First, you need to take a backup of your database and wp-content folder using your cPanel or FTP client. Once you do that, go ahead and reinstall WordPress using the inbuilt installer. 

When WordPress installation is complete, now upload the backup contents into your new WordPress installation and configure or import the database backup into the new WP installation.

After that load your site and try accessing your site. In case the issue occurred because of a damaged WordPress installation then it should be solved now. Instead, use the database editor tool to find and fix your user account access. Once you do that you should be able to access your site in the usual way. 

Wrapping it up:

Having your website hacked means your site is losing user attraction as well as control over it. This could bring a severe impact on your business. So getting it fixed as soon as possible is important. 

I believe the above steps will help you to head in the right direction during such a bad situation. Let us know if you find this article helpful and do not forget to mention any steps you think should be mentioned so that it becomes more resourceful for the readers.

Looking forward to the next… cheers.

Read More