Menu
I have a web page that references Bootstrap 4 from a CDN. In the head of my HTML page, I have the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
That is the only CSS that I'm referencing. Yet, when I run Google's PageSpeed tool, I get the following error:
Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Optimize CSS Delivery of the following:
https://maxcdn.bootstrapcdn.com/…trap/4.0.0-alpha.2/css/bootstrap.min.css
I feel like this is a chicken-and-egg issue. If I move this stylesheet reference to the bottom of my body element, the page jumps from unstyled to styled when I visit the page. As a human, its quite jarring. Yet, when I do that, my PageSpeed score increases significantly.
Are there any alternative approaches? I always thought using a CDN was a good thing because it enabled you to take advantage of some caching features. But, this penalty seems to be quite significant.
403
By default, CSS is treated as a render blocking resource, which means that the browser won't render any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.
How do I eliminate render-blocking resources without a WordPress plugin? Without a WordPress plugin, you will need to defer JavaScript, generate critical CSS, and inline CSS manually. You should also host fonts locally and preload them.
How To Identify Render-Blocking Resources. To identify the critical rendering path and analyze critical resources: Run a test using webpagetest.org and click on the “waterfall” image. Focus on all resources requested and downloaded before the green “Start Render” line.
Render-blocking resources are portions of code in website files, usually CSS and JavaScript, that prevent a web page from loading quickly. These resources take a relatively long time for the browser to process, but may not be necessary for the immediate user experience.
No worries, this is not that of a big issue and you should definitely keep your CSS in the head. Moving it to the bottom will cause much greater problems (unstyled content, referenced resources in the css like images are loaded even later, etc.)
What PageSpeed tries to tell you, is a (imho very progressive) approach of serving all CSS needed to display "above-the-fold"-content (everything you see before you start scrolling down the site) and delivering the rest async/later to ensure, that the first correct view on the website is asap. As this CSS-file is "only" 22kB, i don't think, that taking actions into separating it into 2 different files is worth the effort, especially as this causes an additional http-request or requires you to inline the css (which might get complex and error-prone)
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
