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.

Dir gefällt der Beitrag?

Registriere dich für den Newsletter, damit du keine Beiträge, SEO-Tipps oder Änderungen in den Suchergebnissen verpasst. Suchmaschinenoptimierung ist zwar stets im Wandel, aber mit FirmCatalyst bleibst du informiert.