SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    moving css to head section for optimization

    To not block the rendering process on my small responsive site I should move my external stylesheet, a lot of which are css bootstrap overrides, into the head section. In the future I will move what 'above the fold' content I can inline.

    Is there anything important I need to know about in terms of changing the rendering process by moving it into the head? Thx.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by NoVex View Post
    Is there anything important I need to know about in terms of changing the rendering process by moving it into the head? Thx.
    It's inefficient. It means the same code has to be downloaded again and again, for each page view, instead of being cached on the first page view. It's also potentially harder to update the code, depending on how it's included on each page.

    This is the wrong way to go.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks, I understand that. Everything's sure got a trade off with optimizing for mobile. I was just following the recs on GooglePageSpeed insights. My site's probably not even slow. I guess a second opinion would be nice too.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by NoVex View Post
    To not block the rendering process on my small responsive site I should move my external stylesheet, a lot of which are css bootstrap overrides, into the head section. Thx.
    If the sheet you are in-ining is dependent on the main bootstrap files then wouldn't in-lining it give you no benefit as the elements can't display properly until the other dependecies have loaded?

    As I understood it you would want all the styles for the elements above the fold to be inline so that this section displays quickly. It won't have any benefit if the rules are dependent on other css files that are not loaded yet.

    I'm not sure this type of optimisation is worthwhile for small sites that are not 'speed critical' as it just makes things more awkward. In most cases just getting rid of 1 or 2 images can give you better results than hours of fiddling with the code.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •