Search code examples
csspagespeedrender-blocking

Do I necessarily need to remove "Render Blocking CSS"

I put my homepage through Google's PageSpeed test and it gave me a score of 69 for Mobile and 95 for Desktop. The one and only issue being a Render Blocking CSS.

Now, all my web pages on my website are Above the Fold. i.e. There is no scroll involved anywhere. Given this, personally I feel I should not be doing anything special, since the CSS is required to view my page the way I designed it, right from the get go.

If I do asynchronous loading or something, it'll end up showing the content on a black and white un-organised page, just before the intended output.

Do I ignore Google? It would mean that I'd never score 100/100, and wouldn't that affect my SEO chances?

Solution

  • TL;DR — No, you don't have to. But in most cases, it helps, indirectly.

    Render blocking is in place to prevent FOUC.

    Ideally you should only load the CSS responsible for rendering the "above the fold" of your page as render blocking and all the rest of your styles using async methods.

    However, most sites load all their CSS as render blocking. Why? Because most websites do not afford a CSS specialist to customize their CSS loading for their specific case. They'll sometimes pay for a theme, but that's it.
    Themes are not typically optimized from this point of view because there is no way to know what elements the user will want in their above the fold area.

    Is this a huge problem?

    NO.

    First of all, all of this is only about when the user loads the very first page of your website. All the other pages will use the cached stylesheets (already loaded on first page visited) (unless you load different stylesheets for different pages).

    And second of all, the general idea that Google lowers your page's SEO score for having render-blocking CSS is, technically, wrong. They do penalize for a lot of other reasons (like accessibility, readability and responsiveness issues) but not for having render-blocking CSS.

    However, there is an indirect correlation between the two.
    Google Page Speed is a tool telling you how you can improve the loading speed of your page or to leave the impression the page loads faster.

    • if you fix the problems it identifies, the page will load faster or at least it will seem to load faster
    • if your page is or feels faster, there are less chances users will hit the back button while waiting for your page to load.
      THIS user behavior is where the SEO penalty comes in. Google registers any such behavior as a general "user did not find what he was looking for on that website" and lowers the page's SEO score for whatever the user searched for

    Any method of keeping users from hitting the back button in the first 30 seconds after they left for your website (that will keep the bounce rate down) is a good method to fight SEO penalties.
    And... it's true: one of the most efficient methods is to make your page load faster.

    Others include:

    • make the loading process look professional (place correctly sized placeholders for images, so the page doesn't jump around when loading);
    • keep FOUC as close to 0 as possible
    • render something, rather than nothing
    • if possible, give users a general idea of how much of the page has loaded (in %)
    • make the website loadup with some basic schema of what's on longer pages. users will read the schema, trying to figure out if they're on the right page and they won't notice the loading time - since you give them something to do while waiting
    • cut the "bla bla" and try to be honest about whatever your page has to offer

    I can't emphasize this enough: it really pays off to be honest. There is a huge difference in results, SEO wise:
    If your page is about A, but you want to show this to users looking for B, do not tell them you've got B and don't hide it from them. Just tell them:
    "Look, this is not B, it's A, but here are a few reasons why you should consider A instead of B."

    Most users will read those reasons. Especially if they're well written, they address real problems, and they don't look like they're just trying to buy time.
    A very good idea is to place your strongest argument second or third in the list (second if first is rather long, third if first two are not so long).
    The reasoning is: if you place it further down, many users don't read past three weak arguments - they label the entire list as unconvincing and go back.
    Also, if you place the arguments in the order of their importance, the user will realize it and, as soon as they reach two arguments that are not convincing, they'll assume it gets worse further down the list and, again, they'll hit back button. But if you place a second or third argument stronger than the previous ones, they will read through the entire list hoping to find another one.

    Now, if your arguments are compelling, the user will go for A instead of B => Win.
    If not, they will still go for B, but at least they'll do it later (after they read your reasons), and the penalty will be much smaller, if any (the longer time a user spends on your page, the less the penalty, should they press back) => No loss.

    If you can keep the user occupied for more than 30 seconds, you're typically in the clear SEO wise. And that's the really important SEO issue at hand, not render-blocking per-se.

    In the end, it is totally possible to create a page with a very low score on Page Speed while having a very high SEO score. It's unlikely, but totally possible.