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)

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

    1.Optimize CSS Delivery of the following:


    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)

    In .htaccess I have this section:

    <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"

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

    deathshadow Acclaimed Member

    Likes Received:
    Best Answers:
    Trophy Points:
    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"
    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
    deathshadow, Feb 17, 2018 IP
  3. Blizzardofozz

    Blizzardofozz Well-Known Member

    Likes Received:
    Best Answers:
    Trophy Points:
    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 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Likes Received:
    Best Answers:
    Trophy Points:
    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 IP
  5. jainteq

    jainteq Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Nice post really very interested to read this blog.
    jainteq, Feb 26, 2018 IP
  6. Karolwf

    Karolwf Active Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Hi deathshadow.

    I've added code you provided. And no problems with the "leverage browser caching". Thanks.

    Latest version of script came with template made by zurb.com. Adopted it (mixed with old files).
    And I have what I have. Bunch of nonsense.

    Removed unnecessarily CSS and java scripts. And combined multiple stylesheets to a single file.

    Pagespeed insights is better (by 10-15 points).

    There is a strange thing.

    Main folder with front page:


    has much better score than:

    Both folders have same files and both are pointing to same database. Main folder is partially redirected to sub-folder (furniture)

    Front page score is: 94/94 (mobile/desktop).
    Second one has: 73/94 (mobile/desktop).

    I think this is not really important.

    Can you show me 3 worst problems with this site?

    So I can start improve it step by step.
    Karolwf, Feb 27, 2018 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Likes Received:
    Best Answers:
    Trophy Points:
    As both links are showing the same content, it is possible the one deeper into the site could be getting slapped for "duplicate content" -- though that's more of a search ranking issue than something pagespeed would/should be reporting... but again PageSpeed is a bit of a wonk right now getting pedantic about crap that has nothing to do with how fast or well developed the site is.

    Right now though I can't even get mobile results out of insights -- that's been a problem since the update in Janurary, but the hit on desktop (72/100) seems to be related to the server responding slower. This is likely a load issue given that the site in question is PAINFULLY slow due to too many separate files used in its construction. For some reason the response time to that subdirectory is MANY times slower than accessing the root, not sure what's causing that but that seems to be the real reason they're penalizing it.

    Though on both pages you can see one of my biggest problems -- they're dinging you a few points for PROBLEMS WITH THEIR OWN ADVERTISING AND TRACKING! -- when they're telling you to optimize their own advertising and tracking scripts, that's when you know they've travelled a bit deep into dipshit land.
    Seriously? THIS is why I stopped taking pagespeed seriously.

    Though an easy fix? STOP wasting time on the halfwitted google analytics bull. There's ZERO useful information provided by it you can't glean from the server logs using a tool like webalizer or analog, apart from pedantic little silly bits of nonsense only marketing wankers take seriously. ... and they do so only because it gives them sick buzzwords and information they can card stack to fake their own relevance! Kind of like the "magic keyphrase matching" scam SEO "experts" use to make it look like their bull actually works!

    Also if you're selling something, STOP showing ads for other people selling stuff. That fraction of advertising revenue generally isn't worth it on a site where you yourself are trying to make a sale! There's a reason you don't see many webstores selling physical products that have third party advertising. Best case you're just slowing down the page and making it less useful, worst case you're providing promotion for your competitors!

    As to problems insights isn't telling you about... well lemme just go down the list.

    1) blocking scripting in the <head>. Surprising it's bitching about the <link> to the stylesheet, but NOT the stupid malfing jQuery BS or lightbox script inside <head> which are far more of a concern. WHEN POSSIBLE move scripting to right before </body> to speed up page-loads. to that end GOOD scripting should NEVER be inside the markup inside <script>. Put it in your external scripting files so that it can be cached across multiple pages.

    2) you don't have to say type="text/css" on <link> if rel="stylesheet" anymore... and if you're going to <link> to a stylesheet use the media="" attribute to say what media that style is for -- sicne your screen media layout likely makes ZERO sense to aural and very little sense for print. Sending media="all" or omitting media kind-of defeats one of the reasons CSS even exists.

    3) Ad before the content -- no. Again, just kill the third party ads, long-run all you're doing is screwing yourself with them if the intent of the site is to sell something... but if you're going to have them the LAST place they should be is before your content in the source-order!

    4) Absolute URI's for NOTHING. You don't need that nonsense as it is a waste of bandwidth for zero benefit... use relative links instead. Pretty much your entire main menu can have it's code size cut in half by that simple change. A hair more perhaps if you apply <base> to the page.

    Your search form is incomplete -- nice to see a label, but where's your fieldset?

    5) DIV for nothing. Ever heard George Carlin's joke on how "not every ejaculation deserves a name"? Well, not every tag needs a DIV around it. Pretty much your DIV.bodyTop you aren't doing a blasted thing that couldn't be done on the H2 itself... in fact with the right semantics none of those child elements should even have classes... though honestly that first <h2> doesn't even look like it should be a heading given its content and the LACK of content that follows since the very next content bearing element is ALSO a H2. That treads into being semantic gibberish.

    6) STOP SHOVING WINDOWS DOWN THE USER'S GULLET! We've been told this for twenty blasted years, it's in the WCAG, it was in the HTML 4 specification, STOP USING target="_blank". The user wants a new window they can learn to middle-click or ctrl-click. Do NOT strip the user of the choice, breaking normal forward/back navigation in the process!

    7) Title's for nothing. There is NO reason for a <img> to ever have a title, in fact title="" only belongs on a handful of tags -- <a>nchor, <abbr>, <acronym>, <cite>, <area>, and in some cases <link>.... and as a rule of thumb if you're putting it on <a>nchor there may be something wrong with the contents of that anchor... AND if it matches the text content OF that anchor, epic /FAIL/ at web development!

    8) paragraphs around non-paragraph content. What makes a PRICE and two words a grammatical paragraph? Aka a sentence or more containing a complete thought?

    9) Clearing DIV -- what is this, 2002? If you 'need' that nonsense something is wrong elsewhere in your layout. Figure out the parent, put an overflow state on it (with haslayout if you care about older IE) and be done with it. That nonsense has NO business in the markup! That tutorials still even have it and entire frameworks damned near require it is a monument to the constinued stupidity of mainstream web development.

    10) non-breaking spaces and <br> doing padding's job... just say no.

    11) vertical breaks doing list's job. Your footer choices are a list, code it as such JUST like the main menu. You want them inline with separators, do it in the CSS!

    12) XML style closures -- just stop. You've got a 5 doctype, just <br> instead of <br />

    13) Presentational classes. Say what thing ARE, NOT what you want them to look like. To that end classes like "centre" and "clear" are utter and complete garbage.

    Now, for EVERYTHING I just said, this is still one of the CLEANER codebases I've seen on a website. It's got a lot of problems, but far, far, FAR less than I'm used to seeing. It IS relatively lean and now takes little real time to load. 326k in 19 files? I mean sure I'd be shaving a bit off the markup but still you're head and shoulders above a lot of the competition on the speed front... to the point worrying about what pagespeed is telling you is a waste of time.

    It just needs some accessibility and speed optimization tweaks.

    I AM seeing some telltales though of bad server-side practices -- the presence of single quotes in the output for example means slower doubles are being used server-side... which dimes to dollars also likely means string addition instead of comma delimits further wasting server memory and slowing the output; but I'd need to see the server-side code to say for sure on that.

    Likewise the responsiveness isn't exactly dialed in right, but I suspec that's from a lack of "large font" testing since right now I'm on a machine set to 20px/120dpi/125%/8514/windows Large/Windows V+ medium/pick a huffing name already.
    deathshadow, Feb 28, 2018 IP
  8. Karolwf

    Karolwf Active Member

    Likes Received:
    Best Answers:
    Trophy Points:
    Yes, this is 2002.
    Here is crap I had to transform to current time:

    The main problem is: I'm not a coder.
    I've read your posts and your website.
    I was able to learn a little bit about html and css.

    Clearing Div - I see it in 3 places. And I can remove them without any problems.

    In this page it is related to h2.

    If I remove <div class="clear"></div> I have problem with h2

    Can you suggest something specific to make it right?
    Karolwf, Feb 28, 2018 IP