Php Script That Reads Html Page and Css Rules and Find Unused Rules

What is Unused CSS?

Unused CSS consists of CSS declarations that are non used anywhere on a web page.
It is quite normal for some of the CSS to not be used. For example, because some CSS declarations are written for another device such every bit a desktop or mobile. Sometimes considering an element that is described in the style sheet (such equally a push) is not used on this specific page.
Unused CSS often occurs when you apply a framework such as bootstrap where there are many more elements described by default in the CSS you will e'er apply. Or when y'all have redesigned your folio but forgot to remove the sometime CSS elements.

Why is unused CSS bad for page speed?

CSS Slows down the page loading. When a page is loaded, the browser first fetches the HTML from this page. This HTML is converted into DOM Nodes. After that the browser fetches all Stylesheets. The styles found in these CSS files are also converted to another format, namely the CSSOM. The DOM and the CSSOM are combined into a render tree. Merely when this render three has been built, a browser starts painting the start content.
Because of this machinery CSS files will ever blocked the rendering of the your webpage. When a CSS file is larger than it should be, it takes longer to download this file and that causes the get-go filibuster.  W hen a CSS file contains unused CSS, it takes longer to build under render tree.

How to find unused CSS manually?

In Google chrome y'all can view unused CSS in the Code Coverage overview. Code Coverage is role of the Chrome DevTools. DevTool is a series of built-in tools that are available on every Chrome browser.

Beginning open the DevTools with Ctrl-Shift-J  shortcut. The type Ctrl-Shift-P  to open the command Palette. Now type ' coverage '. Select coverage and reload the folio. You will now see an overview of the CSS and JavaScript files that are loaded and used by the page. In addition, you can see how large the files are and how much of the code lawmaking is being really used.
Click on a CSS file to see which CSS rules are (green) and which CSS rules are not (cerise) used on the current page.

How resolve the 'remove unused CSS' warning

At that place are several ways to resolve the 'remove unused CSS' message in lighthouse. If, for some reason, fixing the warning is not possible, you could optimize CSS delivery to ensure that unused CSS has less impact on the loading time of your folio. I will briefly discuss the options you have for fixing unused CSS below.

1. Delete the unused CSS by hand

The most logical and best way, simply likewise the most laborious fashion, is of course manually removing the unused CSS. The steps are straightforward:

1. Backup your CSS original files. You lot might remove likewise much CSS.
2. Open up the Code Coverage Tab in Google Chrome and view per CSS file which declarations you do not need.
3. Open the CSS file on the server (or locally) and check each unused CSS declaration . Make up one's mind whether it tin be removed. But de conscientious: a unused CSS declaration does you volition never need this declaration. You have to judge that yourself!
4. Check per CSS annunciation whether it is non duplicated in the CSS. Duplicate CSS will also exist flagged as unused.
5. Check each CSS rule for shorthand methods. Is is possible to shorted the CSS? Then shorten information technology!

2. Divide the CSS into several files

At that place is a simple wat  to quickly reduce the number of CSS rules! O nly load the styles you lot need for your device. Your page is oft visited on mobile. You don 't actually demand to download the styles for desktop and print for this mobile device . Not downloading these styles  saves time and thus shortens the critical request chain in the lighthouse.

To accomplish this utilize the media aspect. The media attribute ensures that a stylesheet is only used if the media attribute matched the media y'all are currently using.

<link href="all.css" rel="stylesheet" media="all">          <link href="print.css" rel="stylesheet" media="impress">          <link href="desktop.css" rel="stylesheet"   media="screen and (min-device-width: 1024px)">
        

3. Utilize an automatic CSS-clean-upwardly tool

There are a number of smart tools that can automatically clean upwardly your CSS files for you and remove whatever unused CSS references.
While tools work amazingly well they are not flawless. Sometimes these tools remove too many CSS declarations. Then utilize them carefully and ever check your CSS yourself.
The best CSS clena up tools are PurifyCSS and PurgeCSS . These tools run on NodeJS. NodeJS is a JavaScript runtime, on which you tin execute JavaScript scripts, based on the V8 JavaScript engine from Google itself.  Y ou can also try purifyCSS  online.

4.  Critical CSS

Disquisitional CSS is a collection of CSS rules that are needed in the viewport (the visible part) of your website. In other words:  Critical CSS is the CSS that is required to render the visible function of your page.

There are a number of tools that can filter that tin can extract CSS for from your page. The Ciritcal CSS is then placed inline, in the  head of your page, while the original CSS files is loaded asynchronously (for the browser to use later).

This does not completely solve the trouble of unused CSS. Eventually the unused CSS will exist loaded and parsed but your browser volition not exist 'bothered' past it during the first render phase.

The most commonly used tool to discover and extract disquisitional CSS is the NodeJS script Critical . At that place are also online tools such every bit Critical Path CSS Generator and some other Critical Path CSS Generator

5. Minify the CSS files

Unused CSS slows downward a page, as you read above, in 2 ways. The first is because the CSS files are larger and therefore have more time to download.

We tin can counter that consequence by reducing the CSS file size by minifying the CSS files. That is done though a CSS minfier. A CSS minfier shrinks CSS files by removing spaces, comments and formatting. Besides, a CSS minifier can rewrite variables and CSS lawmaking so that the takes upwards less bytes to transfer.

A well-known CSS minify tool is css-minify . Minify all your CSS files via the command line with the command css-minify -f filename . There also are various online CSS minifiers such every bit cssminifier.com

half dozen. Recompile your CSS framework

Are you lot using a CSS framework such as bootstrap CSS? That is a CSS framework with which you can style your entire site. This framework is and then consummate that chances are you will never use large parts of it.

Fortunately, the makers of bootstrap and other CSS frameworks have taken this into business relationship. This framework is written in SASS. That is a language that is very similar to CSS. It consists of several small SASS files that can apply simple variables and functions. This makes it easy to a djust and personalize  the framework yourself with a lilliputian scrap of knowledge. Y'all can only omit parts yous don't apply and hands compile it into 1 terminal CSS file.

Also make sure you don't load a CSS framework unmodified from the standard CDN. Download the framework and compile information technology with SASS exactly as you want it, with simply the CSS classes you use.

seven. Consider a different CSS strategy

Do yous actually want to be fast? And so it might exist a thought to rethink your CSS strategy. How that is done depends on your site. There are several roads that pb to Rome.

Let's take our site for example. We only load the CSS that nosotros actually  demand per folio. The CSS classes are automatically imported by our CMS just when they are needed. We place the CSS inline (in the head of the page). That saves us an actress network request. This solution is lightning fast and easy to maintain.

An attentive reader might call back: "What about CSS Caching, CSS is faster when the final CSS files are cached. Yes, that'due south correct. That's why we preload all links in the visible viewport so that a page is always retrieved from enshroud, including CSS.

Fix 'remove unused CSS' in Wordpress

Are you ready to remove unused CSS? This if how to get started in WordPress. In WordPress CSS can be added in iii means:

• Directly into the template . In your template folder there is a file called header.php. In this file there are frequently template specific CSS files. Yous could modify these CSS files like I described above. Don't forget to backup your original CSS files and keep in listen that a theme update can overwrite your CSS files.
• CSS added past a plugin . Plugins in WordPress can add together unlimited CSS files into your HTML. These plugin use the functions wp_register_style and wp_enqueue_style . Most plugin exercise not carp too check if they are active on the electric current page. They just inject CSS into every folio, even though there is no need for that plugin specific CSS on that page . I come across that every day. If that is the example, you can use the functions wp_dequeue_style and wp_deregister_style to remove these styles from the pages. That is a precise job. If you are unsure how to fix this, plough to your developer or ask me for help. You can as well use the Asses CleanUp plugin with which yous tin can ready per folio type which plugin, styles and scripts may be loaded.
• CSS added past JavaScript . It is likewise possible to 'inject' Sylesheets into the page using JavaScript. Just like stylesheets, you can disable these Scripts per page with the wp_dequeue_script function . When the JavaScript doesn't load, the stylesheet will not exist injected either.
  If you do need the script and the stylesheet but not directly afterward loading, itś possible to postpone the loading of JavaScript via the script defer attribute. D o that past adding this code in functions.php

office defer_js( $url ) {          if ( is_user_logged_in() ) return $url; //don't break WP Admin          if ( strpos( $url, 'somescript.js' ) ) {          str_replace( ' src', ' defer src', $url );          }          }          add_filter( 'script_loader_tag', 'defer_js', 10 );
        

saleenjudger.blogspot.com

Source: https://www.corewebvitals.io/pagespeed/fix-remove-unused-css-lighthouse

Share this post