Dumb SEO Questions

(Entry was posted by Jay Lo on this post in the Dumb SEO Questions community on Facebook, Thursday, January 3, 2019).

Is it still a good idea to inline small CSS?

Is inlining small CSS still a good idea?

A while ago if you round the Lighthouse, Google might suggest you optimizing CSS delivery by inline small CSS.

But recently, it seems they deprecate this as the best practice, and suggest using multiple separate external CSS and use a media query in tag to specify what kind of devices will use that CSS.

https://developers.google.com/…/l…/audits/blocking-resources

That being said, is it still a good idea to inline small CSS? If so, why Lighthouse don`t suggest it anymore? Just because it`s hard to maintain?

Let me know your thought on this, thanks,

This question begins at 00:06:12 into the clip. Did this video clip play correctly? Watch this question on YouTube commencing at 00:06:12
Video would not load
I see YouTube error message
I see static
Video clip did not start at this question

YOUR ANSWERS

Selected answers from the Dumb SEO Questions G+ community.

  • Michael Martinez: I am not a fan of Lighthouse, which I regard to be poorly designed as an assessment tool. That said, inline CSS is preferable when used in moderation. Think about how many bytes you`re sending across the wire NEEDLESSLY and how you can reduce that. For example, if most visitors only look at 1 page per visit (regardless of how many visits they make throughout the year), is it better for them to fetch and download extra CSS files or to get it all in one fetch. Don`t assume that "HTTP/2 fixes that" because you don`t know if the browser supports HTTP/2. There is no hard-and-fast rule to provide proper guidance. You have to make a business decision and live with that until it`s time to make a new business decision. This is NOT an "SEO issue".
  • Jay Lo: Got it.

    Thank you so much, Michael!


    As always, your advice is really well explained and helpful! Really appreciated :)
  • Benj Arriola: The more you can put all CSS in a separate CSS file and all JS in a separate JS file, the smaller the HTML “file” will be. (I put file in quotes there because sometimes there is really no separate HTML file, but some server side language builds the HTM
  • Jay Lo: Thank you Benj, so overall you think the benefit of inline CSS is not worth it when you consider it`s downside right?
  • Dan Sylvester: We use gulp to make our css Inline. But the initial html may get heavier in the process( we do it for important pages which we found it actually improving speeds).It`s a balancing act consisting of if you have reoccurring visitors/ worth your effort what`s the goal. We improved our traffic and visitors to leads ratio by 30% after we made things faster. Mobile leads increased by 40%. It was worth the effort for us. But that`s mean it would be needed for everyone.
  • Jay Lo: Thank you Dan, so in your case inline CSS do work well. do you use media query in the tag and separate CSS code that only use in certain devices too? It is it new recommendation Google have to resolve render blocking CSS, I wonder how well it works~
  • Dan Sylvester: we actually over did it with a different jsp file serving for mobile and desktop. we dont have css files from a link tag so i haven’t tried it. We found something that worked so we stopped innovating over it. But our web developer will be very interested to try this out
  • Mal Ö Tonge: Inline CSS is good when its unique. If its only found on one specific page then inline is perfectly fine and will help speed up page load. however if the same CSS is found on multiple pages then its better to use external CSS so that the file can be cached in the users browser so that on every page load after will not need to load the CSS as its stored in the browser.
  • Jay Lo: That is really a good point! Thank you !

View original question in the Dumb SEO Questions community on G+, Thursday, January 3, 2019).

Reference Links