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
Future versions will include a button to format the minified/uglified css and the option to defer existing styles loading.