1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Optimize CSS Delivery, Eliminate render-blocking JavaScript and CSS

Discussion in 'HTML & Website Design' started by Karolwf, Feb 13, 2018.

  1. #1
    Info from PageSpeed Insights (Google)
    https://developers.google.com/speed/pagespeed/insights/?url=https://www.furniturefinder.biz/furniture&tab=mobile

    Website: https://www.furniturefinder.biz/furniture/

    1.Optimize CSS Delivery of the following:

    https://www.furniturefinder.biz/Lightbox2/css/lightbox.min.css
    https://www.furniturefinder.biz/furniture/default.css
    https://www.furniturefinder.biz/furniture/html/vendor/foundation.min.css
    https://www.furniturefinder.biz/furniture/html/vendor/jquery-ui.min.css
    https://www.furniturefinder.biz/html/vendor/foundation-icons.css

    2. Leverage browser caching

    https://www.furniturefinder.biz/Lightbox2/js/lightbox-plus-jquery.js (expiration not specified)
    https://www.furniturefinder.biz/Lightbox2/js/lightbox.js (expiration not specified)
    SEMrush
    In .htaccess I have this section:

    ## EXPIRES CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 10 days"
    ExpiresByType image/jpeg "access plus 10 days"
    ExpiresByType image/gif "access plus 10 days"
    ExpiresByType image/png "access plus 10 days"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"

    ExpiresDefault "access plus 10 days"
    </IfModule>

    How to solve these problems?
     
    Karolwf, Feb 13, 2018 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,501
    Likes Received:
    1,515
    Best Answers:
    223
    Trophy Points:
    515
    #2
    Pagespeed insights often has to be taken with a grain of salt, PARTICULARLY as they continue to dumb down what it does for the sole purpose of trying to sell you something (like their pagespeed service that does anything but make pages speedy, or a CDN)

    A STUNNING example of this is the bitching about "blocking CSS" message that comes up if you so much as have a single <link rel="stylesheet"> on a page, and they go full retard suggesting you move the style into the markup -- the OPPOSITE of sound advice.

    That said on that one, you have multiple separate stylesheets meaning more handshakes, an easy optimization would be to combine them to a single file. They have no media target or are set to "all", so it's sent to "all" -- which your screen layout is likely gibberish nonsense to print and aural. That's why you should have media="screen" at minimum, "screen,projection,tv" for full and proper screen media even IF HTML 5 also goes full retard complaining about it.

    Combine those separate CSS files to a single file to reduce "handshaking" making the page slower to load REGARDLESS of connection speed, and put a media type on them. Pagespeed won't ding you AS HARD for having a LINK even though they will STILL hit you for it out of stupidity and ignorance on their part. Yes, I dare to call the folks currently maintaining Google Pagespeed ignorant and stupid! The mere PRESENCE of <link rel="stylesheet"> gets you a down-rank? Well F*** that bullshit and F*** the people who came up with it!

    The "leverage browser caching" is another bit of hoodoo-voodoo that seems to miss that cache is a limited resource that is likely to get flushed to make room regardless of what you set in the control headers -- this is only made worse by their insistance you set bat-shit insanely high expirations. In your case, that's what they're bitching about, to them ten days or a month is "too short"... and if that's too short to them, f**** that noise.

    As if there's something horribly and terrifyingly wrong with how browsers handle it by default.

    Basically to shut them up on that one, they are expecting THIS:

    
    <IfModule mod_headers.c>
      <FilesMatch "\.(ico|jpg|jpeg|png|gif|swf|avi|wmv|mp4|ogg|js|css)$">
        Header set Cache-Control "max-age=2592000, public"
      </FilesMatch>
    </IfModule>
    
    Code (markup):
    An actual HTTP cache control header, not that "expiresByType" thing that often fails to send headers at all... and they EXPECT that (30 day) over-the-top batshit nutters max-age at MINIMUM... which... well... DERP!

    Sometimes Pagespeed insights is insightful -- other times it is pointlessly pedantic trying to shoe-horn every site into a fixed algorithym even when it makes no sense, which is why it is ENTIRELY possible to make a multi-megabyte endless handshake mess that ranks 90/100 in insights desipite a load time measured in minutes, and at the same time have a 90k page built from 3 files that loads near instantaneously get 5/100 just because it's not screwing with cache-control headers, isn't using a CDN, dares to have a <link> tag in the <head>, and didn't waste time minifying its CSS or JavaScript...

    ... and the first time I saw results like that, that's when I started calling bullshit on "insights". Hell, you want ot know how much BULLSHIT insights is? It will ding you for things Adsense -- their own huffing advertising service -- adds to YOUR page!

    What has happened is they pulled a bait and switch -- six or seven years ago it was a great and useful tool with some sound advice, but over time that advice became more utterly insane based on zero actual facts, resulting in it now being nothing more than another of Google's marketing tools instead of a legitimate aid to webmasters.

    All that said, that site's got WAY bigger problems than what insights is telling you -- like accessibility failings galore like fixed metric fonts, and coding issues like static scripting in the markup, a lack of semantics, JavaScript doing CSS or HTML's job, JavaScript for nothing, too many separate files, etc, etc.

    Even so, I've seen far, FAR worse.
     
    Last edited: Feb 17, 2018 at 12:41 AM
    deathshadow, Feb 17, 2018 at 12:08 AM IP
  3. Blizzardofozz

    Blizzardofozz Active Member

    Messages:
    124
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #3
    I agree with deathshadow about above the fold issue but if you want to resolve the "render-blocking JavaScript and CSS in above-the-fold content" warning, you should put the link for your CSS file in the bottom of your HTML. You can put important CSS rules for the content in <style> tag.
     
    Blizzardofozz, Feb 19, 2018 at 2:59 AM IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,501
    Likes Received:
    1,515
    Best Answers:
    223
    Trophy Points:
    515
    #4
    Where it is invalid. Remember, <link> can/should ONLY exist inside <head>, anyone telling you otherwise isn't qualified to code HTML.

    Where it isn't cached, making the loading of sub-pages SLOWER and wasting bandwidth since you SHOULD already HAVE an external stylesheet.

    This whole "move the CSS into the markup" BULL is stupid, shortsighted, and does dick-all to improve speed or bandwidth use -- part of why I think <style> should be stricken from HTML entirely. IT HAS NO BUSINESS IN THE MARKUP!

    But as I'm always saying if people stopped using 60-120k of HTML to do 8 to 24k's job, and stopped using 100-512k of CSS to do 16-32k's job, they wouldn't have these problems... but no, people have to crap together pages incompetently using frameworks and presentational markup.
     
    deathshadow, Feb 19, 2018 at 9:09 AM IP