Google Pagespeed Insight：“优化以下内容的CSS交付”。 如何？

Question

I tested my wordpress website on Google Page Speed Insight and it scored a 95/100. It suggested that I should "Optimize CSS Delivery" of 1 css file:

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />

Right now it's sitting in the footer along with all the javascript codes below it. I moved it back between the head tag and same results. How do I optimized the css delivery of the css file?

Answer 1

In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.

Taken from: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Its not best to actually put all the css together. You should call first the styling that is needed for the rendering and afterwards call that big stylesheet of yours.

And if you want to know how to defer stylesheets well this is how:

CSS delivery optimization: How to defer css loading?

Hope i got you covered :)

Answer 2

95/100 is a great score. You're at the point where more work to hit 100 is going to give you diminishing returns compared to the effort involved with getting there.

But if you're dead set on approaching 100/100 you'll need to remove the above the fold CSS from the file and include it in a <style> block within your theme. Then you can hold off on loading the CSS file until the rest of the page has loaded and it will no longer be render blocking.

Here's some info I wrote on handling above the fold CSS with the WordPress Autoptimize plugin including a JavaScript bookmarklet to get you started with finding your above the fold CSS.

Note: You should be using the wp_enqueue_style() function to include that script, rather than include it directly in the footer. Check out this article on my website to see how to enqueue scripts and styles properly.