Autoptimize | Inline Defer Render Blocking CSS | Page Specific Above-the-Fold CSS

inline defer render blocking css with autoptimize

Eliminate Render Blocking CSS in Above-the-Fold Content

Inline and defer render blocking CSS on your WordPress site. Make your critical above-the-fold CSS page specific using Autoptimize API filters.

Inline and Defer Render Blocking CSS

I assume you’ve landed here because your in the process of optimizing your WordPress website and your probably using the Autoptimize plugin to aggregate and minify your JS, CSS and HTML.  Using Autoptimize is smart because it allows you to inline and defer your critical CSS.  It is an easy way to eliminate render blocking CSS in above-the-fold content.

The problem arises when you tick Autoptimize’s inline and defer option. First, you have to figure out which CSS is critical for rendering the initial above-the-fold content. Then, you must realize the block of critical CSS you enter is applied site-wide.

In other words, the home page, blog posts, and other pages will all share the same inlined CSS. Most of the time that is not an ideal situation. The critical CSS that works well with some pages isn’t necessarily optimal for others. For example, the critical CSS on home page is different from the critical CSS on blog posts, etc… When the block of critical CSS is sub-optimal you get FOUC— which is unsettling and could cause layout shifts.

Thankfully Autoptimize provides a way to target specific pages with unique above-the-fold CSS. Unfortunately you can’t accomplish the task using the current GUI.  Instead you have to use Autoptimize filters and the API.

This tutorial focuses on showing you how to optimize CSS delivery of the minified CSS file that Autoptimize generates. And, most importantly, it shows you how to target the home page with its own unique inlined CSS.  The tutorial also provides you with tips so that you can target other pages as well.  Note:  we won’t optimize CSS delivery of the “fonts.googleapis.com/css” in this tutorial.

Website Optimization and Speed Test

Among other things, the following tools help you discover render blocking CSS.  These resources are provided as a convenience:

Prepare Text Editor (TextEdit)

You are going to copy and paste code. Maybe even making tweaks on your own. Before rolling up your sleeves, make sure your text editor doesn’t use curly, non-ASCII quotation marks, etc… Those pesky curly quotation marks will cause errors in your code.

TextEdit (mac users):

  1. Go to TextEdit > Preferences.
  2. Choose plain text under Format.
  3. Untick Smart quotes and Smart dashes under Options.
  4. Change Font to Courier.
  5. See this resource for more information.

Prepare WordPress Plugins

To make things easier throughout the tutorial:

  1. Go to your websites dashboard.
  2. Clear all caches and temporarily deactivate your cache plugin (if you use one).
  3. Open Autoptimize (Settings –> Autoptimize).
  4. Click the Show Advanced Settings button.

inline-defer-render-blocking-css-autoptimize

  1. Temporarily untick HTML Options.

optimize css delivery with autoptimize

  1. Tick JavaScript and CSS Options.
  2. Temporarily untick everything else.

autoptimize settings to optimize css delivery

  1. Using CloudFlare? Enter Development Mode.
  2. Click Save Changes and Empty Cache.

Identify Your Site’s CSS

Most likely your home page’s inline and defer CSS will need to be different from your blog posts and other webpages. That is why we’ll start with a blog post to identify our CSS.

  1. Empty your browser’s cache.
  2. Open one of your blog posts in a new browser tab.

critical above the fold css

  1. View the source code (right click on your page –> open source).

eliminate render blocking with above the fold css

  1. Locate the link to the minified CSS file that was generated by Autoptimize.  It will have <link type=”text/css” media =”all” at the beginning and the link will have “autoptimize/css” within it. If you have trouble finding it, use your browser find feature.  Search for “autoptimize/css” without the quotations.

autoptimize minified inline and defer css

  1. Click the link to the minified CSS file generated by Autoptimize.

autoptimize minified inline defer css

  1. Once open, select all text (Command-a on a mac)
  2. Copy to clipboard (Command-c on a mac)

Extract the Critical Above-the-Fold CSS

Determining which portions of your CSS are critical might seem daunting. No worries, it is easy thanks to Jonas Ohlsson who is responsible for this wonderful Critical Path CSS Generator.

  1. Open the Critical Path CSS Generator in a new browser tab.
  2. Select and delete the text from the #2 field.

inline defer render blocking css step 2

  1. Paste the code (Command-v on a mac) that you previously copied from your source into the field under #2 (“Full CSS”).

paste inline defer render blocking css

  1. Copy/Paste the URL of your blog post into the field under #1 (“URL”).

eleminate remder blocking css step 1

  1. Click the Create Critical Path CSS Button.

step-3-create-critical-path-css-button

  1. Select and copy the generated critical path CSS.

step-4-generatted-critical-path-css

  1. Optional: Paste into TextEdit for safekeeping.

If your curious, see this resource for other tools to help prioritize above-the-fold CSS.

Apply the Critical Above-the-Fold CSS

This is where you may have to do some troubleshooting and trimming of the generated CSS.  I got an error when trying to save because of CSS related to @font-face.

If you see it, remove it before you try to save.  See clip below for example:

I also deleted CSS I knew was below the fold. Stuff that referenced YARPP, and anything that said footer, etc…

  1. Go to your websites dashboard.
  2. Open Autoptimize (Settings –> Autoptimize).
  3. Tick the Inline and Defer option.
  4. Paste critical path CSS into the field that appears under the Inline and Defer CSS option box.

autoptimize inline defer css above the fold for speed

  1. Click Save Changes and Empty Cache.
  2. Clear your browser’s cache.
  3. Refresh your blog post. Check if everything loads and looks ok.
  4. Make edits to your block of critical CSS if necessary.
  5. Navigate to other pages, such as your home page.
  6. Run Google PageSpeed Insights to see if you did in fact eliminate render blocking CSS in above-the-fold content.  Note:  we won’t optimize CSS delivery of the “fonts.googleapis.com/css” in this tutorial.
  7. Open a new file in your text editor.  Select/Copy/Paste your trimmed up CSS into your text editor for safekeeping. You’ll need this later.

Identify & Extract Critical CSS for the Home Page

All my pages and posts worked well with the exception of the home page. Therefore, we’ll learn how to inline different CSS specifically for the home page using Autoptimize’s API filter. All the other pages will use the inline and defer CSS that we previously entered.

  1. Repeat the process described above—from beginning to end—except this time use the home page to identify your site’s CSS.  Makes sure you finish all the way including testing the extracted code in Autoptimize.
  1. Once satisfied with your home page CSS, open a new file in you text editor. Select/copy/paste your trimmed up CSS into the text editor.
  1. For the final steps to work you’ll need to escape double-quotes from your home page’s critical CSS. My preferred way is to replace all the double quotation marks with &quot;. Use your text editor’s find and replace feature to replace:
     " 

    with:

    &quot;

    Double check. Use the find feature to look at all instances of:

    &quot;

    Make sure the closing quotations were also replaced.

  1. Now, minify the CSS with this minification tool and save it to a new file in your text editor.
  2. You will use this minified CSS in the code snippet provided a few steps from now.

Add Autoptimize Filter to Functions.php

This solution adds an Autoptimize filter to your theme’s functions.php. Changes to the functions.php can be over written with theme updates. If you don’t want to manually keep up with it you’ll be better off using a child theme or the code snippets plugin.

Always back-up functions.php before making changes; the back-up file comes in handy for restoring if something goes wrong.

To edit your theme’s functions.php:

  1. Go to your websites dashboard.
  2. Select “Appearance > Editor” from the sidebar.
  3. In the editor, select the theme that you want to edit from “Select theme to edit” drop-down menu.
  4. Locate and double-click “Themes Functions (functions.php)” under “Theme Files”, “Templates” section.
  5. Add the following code to the bottom of the file.
/* added for Autoptimize critical css on diff pages */

add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
 function my_ao_css_defer_inline($inlined) {
 if (is_front_page()) {
 return "your-home-page-css-goes-here"; // overwrite default a-t-f CSS
 } else {
 return $inlined; // use default a-t-f CSS for all other types
 }
 }

Replace the following part of the code with the minified CSS you saved earlier (the CSS with all the &quot; in it):

"your-home-page-css-goes-here"

Note: The minified CSS will go between the quotation marks.

  1. Click Update File button:

Final Steps to Eliminate Render Blocking CSS

You are almost finished. You have all the components needed to make critical above the fold CSS page specific.

  1. Go to your websites dashboard.
  2. Open Autoptimize (Settings –> Autoptimize).
  3. Click the Show Advanced Settings button.
  4. Tick HTML Options.
  5. Tick JavaScript and CSS Options.
  6. Tick the Inline and Defer option.
  7. Paste the critical path CSS into field that appears under the Inline and Defer CSS option box. This is the critical CSS that you want to use site-wide (not the home page css).
  8. Restore your other settings as desired.
  9. Click Save Changes and Empty Cache.
  10. Clear your browser cache.
  11. Refresh your blog post. Check if everything loads and looks ok.
  12. Look at other pages, such as your home page.
  13. Run Google PageSpeed Insights. Confirm you solved the “Eliminate render blocking CSS in above-the-fold content” error.  Note:  we won’t optimize CSS delivery of the “fonts.googleapis.com/css” in this tutorial.
  14. Reactivate your cache plugin (if you use one). Clear those caches.

Other Situations Using Autoptimize API Filters

There are many other situations where you can utilize the Autoptimize API filters.  Listed are some more code ideas and there sources.  Examine the snippets and reference links.  With a little effort you’ll begin to figure out how to apply certain parts for your own needs. Happy hunting.

Note: a-t-f is shorthand for above-the-fold.

Example 1:

If you’d like to attach more CSS to the site-wide critical CSS:

Source

add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
 function my_ao_css_defer_inline($inlined) {
 if (strpos($_SERVER['REQUEST_URI'],'/gallery/')!==false) {
 return $inlined."some-new-CSS=here"; // use default a-t-f CSS, append some extra
 } else {
 return $inlined; // use default a-t-f CSS for all other types
 }
 }

Example 2:

Suppose you wanted different CSS for pages (http://yoururl.com/pages/xyz) and different CSS for blog post (http://yoururl.com/posts/123), you could use:

Source (second comment).

add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
 function my_ao_css_defer_inline($inlined) {
if (strpos($_SERVER['REQUEST_URI'],'/pages/')!==false) { 
return "your inline css for pages here"; // overwrite the default a-t-f CSS
} else if (strpos($_SERVER['REQUEST_URI'].'/posts/')!==false) { 
return "your inline css for posts here"; // overwrite the default a-t-f CSS
} else { 
return $inlined; // use default a-t-f CSS for all other types 
} 
}

Example 3:

Using inline and defer API to override global per page default:

  • Overwriting a the site-wide default with new CSS.
  • Appending to the the site-wide with new CSS.
  • Use default for all other types.

Source

add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
 function my_ao_css_defer_inline($inlined) {
 if (strpos($_SERVER['REQUEST_URI'],'/how-it-works/')!==false) {
 return "some-new-css"; // overwrite the default a-t-f CSS
} else if (strpos($_SERVER['REQUEST_URI'],'/other-url/')!==false) { 
return $inlined."some-new-css-to-append"; // use default a-t-f, append some extra
} else { 
return $inlined; // use default a-t-f CSS for all other types 
} 
}

Example 4:

This one is similar to Example 3 but uses conditional tags such as is_home() and is_single().  You could even try is_archive() or is_author().

In this example:

  • Overwriting the site-wide default with new CSS.
  • Appending to the the site-wide default with new CSS.
  • Use default for all other types.

Source

add_filter('autoptimize_filter_css_defer_inline','my_ao_css_defer_inline',10,1);
 function my_ao_css_defer_inline($inlined){
 if (is_home()) {
 $out="h2,h1{color:red !important;}"; // overwrite the default a-t-f CSS
 } else if (is_single()) {
 $out=$inlined."h2{color:blue;}"; // use default a-t-f- CSS, append some extra
 } else {
 $out=$inlined; // use default a-t-f CSS for all other types
 } return $out; }

Example 5:

Using the exclude filter (JavaScript example):

Source

add_filter('autoptimize_filter_js_exclude','ess_grid_exclude',10,1);
 function ess_grid_exclude($exclude) {
 if (strpos($_SERVER['REQUEST_URI'],'anew/gear')!==false) {
 return $exclude.",jquery.js";
 } else {
 return $exclude;
 }
 }

Conclusion

I hope this guide was informative and useful.  Leave a comment if you have any questions or additional information you’d like to share.

Inline Defer Render blocking CSS | Page Specific Using Autoptimize API Filters

Share the post by clicking one of the share buttons.

Leave a Reply

Your email address will not be published. Required fields are marked *