Pagespeed insights & dynamically loading external JS & CSS question

  • delta123

    (@delta123)


    10 years, 11 months ago

    Hi Everyone,

    I need your help.

    I’m trying to improve the performance of my wordpress/woocommerce site, by dynamically loading JS and CSS files after page loads.
    The terminology I’m using may not be totally correct, nor what I’m trying to do may be the best way to do this, however, If I could ask for your help implement this, I think this would give me the foundation and learning curve that I need to start making further improvements to my WordPress site in the future.

    Whilst I kind off can read what code is doing, I’m not too clued up when it comes to implement things properly in WordPress, and is here I think i need most help with, often I see code, but it does not say what wordpress file the code should into, i’m not asking how to edit the file but what file the code should go into.

    For those who are also not too clued up with wordpress code, here is my basic understanding, if someone tells you to put something after the <body> tag, this means the body tag opens inside the header.php file, if someone tells you to put something before the closing </body> tag, this means you need to edit the footer.php file.
    To edit such files you go into appearance>editor> choose your theme or child theme.

    Child themes, load/import the files from parent theme, and if you need to customize something you should create a new child theme file with the same name as the file in the parent theme and apply such changes to in the child theme file, this way if the theme is update at a later date, your changes will not be lost.

    I’m familiar with HTML/CSS but not as good with Javascripting…
    And my PHP coding skills are nearly non existent…

    With that out of the way, I’m stuck trying to adapt some code that I have found via Google in another website, which I believe could resolve my problem.

    I have 2 code options:

    1st option only defers CSS files, see original code I found:

    function loadStyleSheet(src){
    if (document.createStyleSheet) document.createStyleSheet(src);
    else {
    var stylesheet = document.createElement(‘link’);
    stylesheet.href = src;
    stylesheet.rel = ‘stylesheet’;
    stylesheet.type = ‘text/css’;
    document.getElementsByTagName(‘head’)[0].appendChild(stylesheet);
    }
    }

    I tried to put this code as in my child theme functions.php file, but this broke the file.

    1st question I have is this:
    Does the code above look correct to use as is in WordPress, if added to the child themes function.php file?

    If not, can you please help me adapt this code?

    I’m curious, is it critical that such functions are added to the functions.php file, or could it be added else where, for example before the function is called?

    Additionally, I do not know, how to call the function itself, i do suspect would be something along the following lines:
    loadStyleSheet(“myscript.css”)
    or
    loadStyleSheet(“http://www.domain.com/pathtocssfile/myscript.css&#8221;)
    Would either of the syntaxes be correct?

    I do know that the location where this function should be called should just be placed before the closing body tag line, that is in the footer.php file

    I have also located similar code for to defer JS files, but if someone could help me with the example above first, then I could workout how to implement the other.

    I wait attentively for your recommendations and advice.

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter delta123

    (@delta123)

    10 years, 11 months ago

    Simplified version:

    How can the function/code below be used/adapted to work on my WordPress website?

    function loadStyleSheet(src){
if (document.createStyleSheet) document.createStyleSheet(src);
else {
var stylesheet = document.createElement('link');
stylesheet.href = src;
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
}
    Lalit Nagrath

    (@laliz)

    10 years, 11 months ago

    hi, where from you got this code? please share URL.

    Thread Starter delta123

    (@delta123)

    10 years, 10 months ago

    I think i have partially resolved how this is done.
    Probably not the right way to do it…
    But I manage to leave the code in the line before the closing </body> tag, this is located in the theme footer.php file.

    <script type = "text/javascript">
function loadStyleSheet(src) {
    if (document.createStyleSheet) document.createStyleSheet(src);
    else {
        var stylesheet = document.createElement('link');
        stylesheet.href = src;
        stylesheet.rel = 'stylesheet';
        stylesheet.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet);
    }
}
loadStyleSheet("style.css");
loadStyleSheet("style1.css");
loadStyleSheet("style2.css");
/* etc, loadStyleSheet("style3.css"); */
</script>

    With this and another tweak i made to defer JS, my Google pagespeed insight score has gone up from around 49 to 69 for both mobile & desktop tests.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Pagespeed insights & dynamically loading external JS & CSS question’ is closed to new replies.