Plugin: First Screen CSS

Print first-screen and non-first-screen CSS, disable styles, apply to post-types, archives or single posts.

The plugin is developed to manipulate the styles on a WordPress website. As an SEO company, we use it for our legacy projects to improve CLS and for such suggestions of Core Web Vitals as:

• Eliminate render-blocking resources
• Reduce unused CSS

Some caching plugins solve these problems, like WP-Rocket has the option to “Remove Unused CSS”, which helps in most cases. Sometimes however we need a more manual solution.

Demo

This page links only one CSS file, the first-screen CSS is printed inline, the initial styles are deregistered. Press Ctrl+U to view the source code.

The admin side is pretty simple:

• Add the first screen CSS
• Pick where to apply
• Disable styles and scripts if needed
• Add a not-first-screen CSS if needed, defer it’s loading
• For a single-page apply – go to that single page and pick an option in the box in the right sidebar

Check out FCP First Screen CSS on the official WordPress plugins repository.

Features:

• Apply to any single post / page / custom post-type
• Apply to all posts of a particular public post-type
• Apply to the blog or the archive page of a post-type with archive support
• It minifies the css before printing
• Deregister enqueued styles by name
• Apply not-first-screen CSS separately
• Defer the not-first-screen CSS loading