SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member inger's Avatar
    Join Date
    Feb 2009
    Location
    Norway
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with onload js needed

    I'm not sure if this is in the correct forum, but please bear with me.
    I have a client that I'm helping with his website. He is running it through Google's Page speed Insights and is not pleased with the result, and what he is asking me is, to do something about a rendering blockage. Google has some suggestions here: https://developers.google.com/speed/...izeCSSDelivery, but it seems to be lacking the onload code that is mentioned right after the three code blocks. And that is the problem. This is one of the pages in question: www.upholster.com/howto/index.html. What kind of code do I write, and where? I have searched for 'onload' and 'asynchonous css loading' and found a couple of things, but I don't know how to use them, and whether it is the right code for my purpose.
    Your help would be greatly appreciated! And please spell it out in detail, because I'm not familiar with js and don't know where or what I have to (possibly) change to adapt it to the site in question.

    Thanks in advance,

    Inger

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Your Google link is broken. Is this the page you meant? https://developers.google.com/speed/...izeCSSDelivery

    It's not really clear what that has to do with loading JS, but these days, there are three common recommendations for optimising JS delivery:

    • Minify your scripts. (That basically means removing all the unnecessary white space, and sometimes reducing the length of variables etc. There are plenty of free tools online for minifying scripts.)
    • Concatenate your scripts. (That means, join them all together into one file. Again, there are tools and processes for this, but if you don't have a lot of them, or if it's a one off, it's easy enough just to paste all the scripts into one file.)
    • Move scripts to the bottom of the page, just before the closing <body> tag. (This means that the rest of the HTML will load before your script(s), obviating the need for onload scripts etc.)


    E.g.

    Code:
    <script type="text/javascript" src="/scripts/my-one-big-mini-concat-script.js"></script>
    </body>

  3. #3
    SitePoint Member inger's Avatar
    Join Date
    Feb 2009
    Location
    Norway
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ralph.m
    It was the correct site you found. I have minified and compressed all that I can compress. I tried your code, changing it like this:
    <script type="text/css" src="/css/styles.css"></script>, was that correct? And I tried placing it in the head, in the body bottom, to no avail.

    @myty
    You are right, and I may end up doing that. This client is a friend, and I owe him a favour, so I don't want to give up until I have tried very hard.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by inger View Post
    I tried your code, changing it like this:
    <script type="text/css" src="/css/styles.css"></script>, was that correct?
    No, you are mixing a link to a CSS file with a link to a script. Are you linking to a CSS file or to a JS file?

    If you have a CSS file, you link to it like so, in the <head> section:

    Code:
    <link type="text/css" rel="stylesheet" href="/css/styles.css">
    If linking to a JS file, you link to it like this (whether in the <head> section or just before the </body> tag):

    Code:
    <script type="text/javascript" src="/scripts/script.js"></script>

  5. #5
    SitePoint Member inger's Avatar
    Join Date
    Feb 2009
    Location
    Norway
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph,
    I know how to link to a style sheet, but in this particular case Google's page speed Insights wand me to have the style sheet load asynchronously, and they have a code example on the page mentioned above, placing the css file at the bottom of the page, even below </html>, like this
    <noscript><link rel="stylesheet" href="small.css"></noscript>
    And below that code example they go on talking about 'The original small.css is loaded after onload of the page. '. Therefore I assumed there has to be some loading script in the document head that causes the page to start loading, with the css kicking in a bit later. Am I right in my understanding of this?
    Just placing the noscript at the bottom of the page, without a normal link to the css in the head, leads to nothing. Therefore there has to be some kind of script loading something when the css link is placed in the noscript. It's that script I'm trying to find, so far without success.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by inger View Post
    even below </html>, like this
    <noscript><link rel="stylesheet" href="small.css"></noscript>
    And below that code example they go on talking about 'The original small.css is loaded after onload of the page. '. Therefore I assumed there has to be some loading script in the document head that causes the page to start loading, with the css kicking in a bit later. Am I right in my understanding of this?
    Just placing the noscript at the bottom of the page, without a normal link to the css in the head, leads to nothing. Therefore there has to be some kind of script loading something when the css link is placed in the noscript. It's that script I'm trying to find, so far without success.
    Below the </html> tag is a completely invalid location for anything. The lowest place in the page that anything can be validly placed is just before the </body> tag.

    Also the <noscript> tag is long dead. A one line JavaScript in the head of the page to add or remove a class on the HTML tag is far more flexible for deciding how the appearance of the page should change based on whether JavaScript is or isn't supported than the noscript tag ever was.

    The only JavaScript that needs to test for the load event is one that is going to handle where files the page references failed to load. Any other JavaScript (with two exceptions - one the script mentioned above and the other a one line framebreaker) can simply be placed just before the </body> tag and run straight away.


    So instead of

    <noscript><link rel="stylesheet" href="small.css"></noscript>

    which is not allowed in the head of the page prior to HTML 5 because noscript is a block tag only allowed in the body. Simply get rid of the noscript tags and add a .nojs class reference to all the definitions in that file and change the html tag to <html class="nojs">

    Then add the following JavaScript in the head of the page:

    document.getElementsById('html')[0].className.replace(/\bnojs\b/,'');

    That way the class will be removed from the html tag if JavaScript is available and so none of the styles in small.css that have the class reference on the front will be applied.


    The other alternative is to add a .js to the front of all the styles you want to apply when JavaScript is available and use the following script instead.

    document.getElementsById('html')[0].className += ' js';
    Last edited by spikeZ; Jan 13, 2014 at 11:20. Reason: Removed inflammatory line :/
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thread cleaned up to reflect OP's question.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    And the factual errors?

  9. #9
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by myty View Post
    And the factual errors?
    Also removed potentially inflammatory comments.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  10. #10
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    Also removed potentially inflammatory comments.
    Check again.
    Not so dead is noscript, it is not: https://developer.mozilla.org/en-US/...ement/noscript
    We need reliable sources for definitive phrases like "long dead", do we not?

  11. #11
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    'long dead' may be interpreted as an opinion rather than stating of fact.
    At no point was it stated that the <noscript> tag had been deprecated and no longer in use.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by spikeZ View Post
    'long dead' may be interpreted as an opinion rather than stating of fact.
    At no point was it stated that the <noscript> tag had been deprecated and no longer in use.
    Long dead in the sense that there are simpler ways of achieving the same result in a small fraction of the code that <noscript> usually required.

    <noscript> is a block level tag and so every time you want a single character to disappear when JavaScript is enabled you need to repeat the entire block of code it contains in the script if you use noscript.

    With a single line of JavaScript you can style the entire page differently depending on whether JavaScript is enabled or not using CSS where you can apply any change to the p[age that CSS can apply rather than just hiding blocks of code as noscript does.

    Also by adding further one line tests you can change the appearance of the page using CSS based on whether the browser supports specific JavaScript commands - something noscript cannot do.

    I consider any command that has been replaced by a more powerful alternative that involves far less code to be effectively dead even if some people who like typing and making their pages way bigger than necessary decide to continue using it.

    In post 6 I gave two alternate one line JavaScripts that can replace all the noscript tags in the page and allow you to use CSS to select what should and shouldn't appear in each case instead. Why would anyone use noscript instead of that one line of JavaScript - particularly if you have nore than one noscript tag - given that noscript needs to at minimum wrap an entire block - unless of course they sdidn't realise that the simpler JavaScript alternative existed.

    For anyone who actually understands how to use JavaScript the noscript tag is dead as they'd never use it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    For anyone who actually understands how to use JavaScript the noscript tag is dead as they'd never use it.
    You mean people behind Modernizr, from where, coincidentally, you copied the code and technique, right?

    Code:
    document.getElementsById('html')[0].className.replace(/\bnojs\b/,'');
    Or the people behind html5-boilerplate? Some attribution links missing here, don't you think?

    Who also coincidentally, some of them are Google employees? But but... I thought... Yeah, you know what, never mind.

  14. #14
    SitePoint Member inger's Avatar
    Join Date
    Feb 2009
    Location
    Norway
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Felgall,

    I saw that you were trying to help with that line of js you mention. I need a much more detailed explanation, as I said in my first post.
    I may not have been able to explain properly what I need, sorry about that, but the fact is that I'm trying to get a grasp of what Google's PageSpeedInsight actually wants where they say something about rendering blockage and asynchronous loading of css. And since nobody here seems to have understoood my attempt to explain, it must be something very weird that Google wants anyway. I have asked other places and have been ridiculed because of trying something that would be of very little effect as regards page speed. Someone I asked downright refused to waste his time on this. This forum was kind of my last chance

    If you think that trying to mess with this asynchronous page loading is wasted efforts, then please tell me so and I'll shut up.

    Inger

  15. #15
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,276
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by inger View Post
    And below that code example they go on talking about 'The original small.css is loaded after onload of the page. '. Therefore I assumed there has to be some loading script in the document head that causes the page to start loading, with the css kicking in a bit later. Am I right in my understanding of this?
    That's a correct understanding, yes. The article, as it turns out, didn't specify that loading script. I presume they omitted it because there are many different choices. Modernizer is common. LazyLoad is a small and simple option I've used before. I think all the major frameworks come with it built in (Dojo, YUI, Closure, etc). Plus it's simple enough that you could conceivably roll your own (create a link element, set rel and href, and append it to the head).
    "First make it work. Then make it better."

  16. #16
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,184
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    I can understand the benefit of having a small bit of javascript calling up larger amounts of javascript thereby saving uneccessary BW if javascript is not enabled.

    And I can see how applying CSS onload can help with initial page load time (though maybe introducing re-rendering problems?).

    But I don't understand what Insight means by "rendering blockage".

    I know what rendering is, but do they mean blockage as in "preventing" or as in "chunks"?

  17. #17
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,276
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    But I don't understand what Insight means by "rendering blockage".
    Browsers won't paint anything to the screen until CSS files have downloaded. So if for whatever reason a CSS file tends to load slowly, then it should be faster to inline only those styles needed for above-the-fold rendering while the rest are loaded in a non-blocking way (that is, dynamically loaded with JS).
    "First make it work. Then make it better."


Tags for this Thread

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
  •