Help with jquery and pagespeed

3,252 views
Skip to first unread message

Miguel García Sánchez - Colomer

unread,
Jun 23, 2014, 4:08:34 PM6/23/14
to pagespeed-ins...@googlegroups.com
Hi, i'm trying to defer or to make async my jquery code to get a correct speed (i can reach 93 deleting all jquery script)... 

i have done the google developers instructions to avoid payload https://developers.google.com/speed/docs/best-practices/payload?csw=1#DeferLoadingJS but i can't...

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {

 var element = document.createElement("script");
 element.src = "https://googledrive.com/host/0Bwgc28XHjPA2Mkw4b3lYZDVzcGM"; //MY DEFERRED CODE
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

What can i do to use jquery and get a good pagespeed score... i have tryed all...

Carlos Lizaga Anadon

unread,
Jun 23, 2014, 5:07:53 PM6/23/14
to pagespeed-ins...@googlegroups.com
you can use something like this:


Regards.

Miguel García Sánchez - Colomer

unread,
Jun 23, 2014, 5:44:10 PM6/23/14
to pagespeed-ins...@googlegroups.com
Hi Carlos,
thank you very much for your help. I have solved it with this (from Google Developers):

<script type="text/javascript">
  (function() {
alert("hola1");
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?onload=OnLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
 <body onload="function()">

But now, i'm having troubles with two scripts, could you help me please? i'm doing my testing in this Testing Blog: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Faprendeblogdesdecero.blogspot.com.es%2F

thank you very much.

Miguel García Sánchez - Colomer

unread,
Jun 23, 2014, 5:53:00 PM6/23/14
to pagespeed-ins...@googlegroups.com
This is my problem now...: <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>

Carlos Lizaga Anadon

unread,
Jun 23, 2014, 7:39:28 PM6/23/14
to pagespeed-ins...@googlegroups.com
You are using jquery before calling it, that's causing your issue, i'd rather use my script to load jquery and then perform deferred actions.

Regards.

Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 6:56:24 AM6/24/14
to pagespeed-ins...@googlegroups.com
Hi Carlos,
i have fixed it making async calls to those scripts. But i have a problem, calling the jquery library in the onload:

<head>
<script type="text/javascript">
  (function() {
alert("hola1");
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?onload=OnLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</head>
 <body onload="function()">

only performs correctly one time (in blogger) but if i inline all the code inside https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js i don't jave any problems. 

I don't know exactly, could you make a "mini-sample" with the code that you have passed me in the past link?

Thank you very much.



2014-06-24 1:39 GMT+02:00 Carlos Lizaga Anadon <carlos...@gmail.com>:
You are using jquery before calling it, that's causing your issue, i'd rather use my script to load jquery and then perform deferred actions.

Regards.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/b33228ee-faa2-4aea-8a93-acc810d5b8d9%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 7:38:38 AM6/24/14
to pagespeed-ins...@googlegroups.com
Hi again Carlos,
i have founded that this javascript it's always in the cache (except first time)... do you know what to do to avoid caching?. If i inline all the jquery i get less mobile score...

Carlos Lizaga Anadon

unread,
Jun 24, 2014, 10:01:10 AM6/24/14
to pagespeed-ins...@googlegroups.com
To force js or css reload and avoid caching those resources you should add anything in the uri like "http://uritoyourresource.js?v=1"

You should avoid that in the future but should do the trick for a test sandbox. After your test you should remove that "long tail" from the uri in order to load and cache the original js file.

About the code that I gave to you before, what is your question exactly?

Regards. 


Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 10:30:35 AM6/24/14
to pagespeed-ins...@googlegroups.com
I've tryed that:

<head>

<script type='text/javascript'>
  (function pepe() {
alert("hello");
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</head>

<body onInit='pepe()'>

but continue the caching problem... what am i doing wrong?

Carlos Lizaga Anadon

unread,
Jun 24, 2014, 11:42:08 AM6/24/14
to pagespeed-ins...@googlegroups.com
https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?v=1&onload=OnLoadCallback

Anyway, why are you calling the callback?

Please, try the code above that I wrote, there you have an onLoad event that will trigger jquery include and after that any other js resource jquery-dependent and then trigger the performDeferredActions function where you can place all the inline jquery usage such as $.ajax() or any other method.

Yogi ingin tau

unread,
Jun 24, 2014, 1:03:25 PM6/24/14
to pagespeed-ins...@googlegroups.com
stopped at my blogspot [http://adakomentar.blogspot.com]



--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/256d0331-6197-42da-8f28-7a99d4073c52%40googlegroups.com.

Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 1:07:55 PM6/24/14
to pagespeed-ins...@googlegroups.com
Ok Carlos,
thank you for your help, support and patience.

That code with OnLoadCallBack it's from Google Developers, to make a call to a .js asynchronous. With that way to make the call to jquery library i have gained 93 in desktop and mobile... but only performs well 1 time (because of the caching issue).


With your method above: could you please correct me in the code in what i'm wrong (my code is in red):

<head>

<script type='text/javascript'>

function pepe(){
var dfLoadStatus = 0;
var dfLoadFiles = [
    [
        "blabla..."
    ]
];

function downloadJSAtOnload() {
    if (!dfLoadFiles.length) return;

    var dfGroup = dfLoadFiles.shift();
    dfLoadStatus = 0;

    for (var i = 0; i < dfGroup.length; i++) {
        dfLoadStatus++;
        var element = document.createElement('script');
        element.src = dfGroup[i];
        element.onload = element.onreadystatechange = function () {
            if (!this.readyState || this.readyState === 'complete') {
                dfLoadStatus--;
                if (dfLoadStatus === 0) {
                    if (dfGroup.length === 1) { //if jquery was loaded, then load other js
                        downloadJSAtOnload();
                    } else { //all is already loaded, perform deffered actions
                        performDeferredActions();
                    }
                }
            }
        };
        document.body.appendChild(element);
    }
}

if (window.addEventListener) {
    window.addEventListener("load", downloadJSAtOnload, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", downloadJSAtOnload);
} else {
    window.onload = downloadJSAtOnload;
}

function performDeferredActions() {

    //do anything after all the resources are loaded.

<script type='text/javascript'>
var test= {
    displayimages: true,
    imagePosition: &#39;left&#39;,
    Widthimg: 200,
    Heightimg: 0,
    SummaryWords: 40,
    wordsNoImg: 40,
    skipper: 0,
    DisplayHome: true,
    DisplayLabel: true
};
</script>

<script type='text/javascript'>
var maxresults=3;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;What&#39;s Related?&quot;;
</script>
    
});}
</script>

</head>

<body onInit='pepe()'>

Thank you very much... i'm very beginner with these javascript deferred or async executions...

Carlos Lizaga Anadon

unread,
Jun 24, 2014, 3:34:47 PM6/24/14
to pagespeed-ins...@googlegroups.com
That's a mess Miguel,

To begin with, you shouldn't attach any script on header since you're not loading any script on the first 16kb of the page, so i'd rather place it just before </body> tag. So It should look something like this:

<html>
    <head></head>
    <body>
        blablabla....
        <script></script>
    </body>
</html>

On the script node you have to include the script that I wrote without any function enclosed, (you used pepe)

So it should looks like this:

<script>

var dfLoadStatus = 0;
var dfLoadFiles = [
    [
        "blabla..."
    ]
];

function downloadJSAtOnload() {
    if (!dfLoadFiles.length) return;

    var dfGroup = dfLoadFiles.shift();
    dfLoadStatus = 0;

    for (var i = 0; i < dfGroup.length; i++) {
        dfLoadStatus++;
        var element = document.createElement('script');
        element.src = dfGroup[i];
        element.onload = element.onreadystatechange = function () {
            if (!this.readyState || this.readyState === 'complete') {
                dfLoadStatus--;
                if (dfLoadStatus === 0) {
                    if (dfGroup.length === 1) { //if jquery was loaded, then load other js
                        downloadJSAtOnload();
                    } else { //all is already loaded, perform deffered actions
                        performDeferredActions();
                    }
                }
            }
        };
        document.body.appendChild(element);
    }
}

if (window.addEventListener) {
    window.addEventListener("load", downloadJSAtOnload, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", downloadJSAtOnload);
} else {
    window.onload = downloadJSAtOnload;
}

function performDeferredActions() {

    //do anything after all the resources are loaded.

}

</script>

With this part you're calling to downloadJSAtOnload function after page load:

if (window.addEventListener) {
    window.addEventListener("load", downloadJSAtOnload, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", downloadJSAtOnload);
} else {
    window.onload = downloadJSAtOnload;
}

So here is where the deferred script starts and calls to the function that will load first jQuery and then any other library dependent or not of jQuery.
Once the array dfLoadFiles has been shifted, there are no more external scripts to load so it will call performDeferredActions functions where you should place all your scripts by:

A) using:

$.ajax({
    type: "GET", 
    url: "http://js.js", 
    dataType: "script", 
    cache: true /* or false if you don't want to cache it*/ 
}); 

B) using directly any js script that shall be executed once all the other external libraries and js has been loaded in a deferred way.

So here's the full code:

<html>
    <head></head>
    <body>
        blablabla....
        <script>

var dfLoadStatus = 0;
var dfLoadFiles = [
    [
        "blabla..."
    ]
];

function downloadJSAtOnload() {
    if (!dfLoadFiles.length) return;

    var dfGroup = dfLoadFiles.shift();
    dfLoadStatus = 0;

    for (var i = 0; i < dfGroup.length; i++) {
        dfLoadStatus++;
        var element = document.createElement('script');
        element.src = dfGroup[i];
        element.onload = element.onreadystatechange = function () {
            if (!this.readyState || this.readyState === 'complete') {
                dfLoadStatus--;
                if (dfLoadStatus === 0) {
                    if (dfGroup.length === 1) { //if jquery was loaded, then load other js
                        downloadJSAtOnload();
                    } else { //all is already loaded, perform deffered actions
                        performDeferredActions();
                    }
                }
            }
        };
        document.body.appendChild(element);
    }
}

if (window.addEventListener) {
    window.addEventListener("load", downloadJSAtOnload, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", downloadJSAtOnload);
} else {
    window.onload = downloadJSAtOnload;
}

function performDeferredActions() {

   $.ajax({
        type: "GET", 
        url: "http://js.js", 
        dataType: "script", 
        cache: true /* or false if you don't want to cache it*/ 
    }); 

              console.log("I've loaded all the external js and now i'm using console log to see that everything loads in the right order."); 

}

        </script>
    </body>
</html>

Regards.

Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 3:43:17 PM6/24/14
to pagespeed-ins...@googlegroups.com
Excellent Carlos, thank you very much for your indications. I'll put them in action now and i'll tell you the results. Thank you very much.

Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 4:45:55 PM6/24/14
to pagespeed-ins...@googlegroups.com
I've do it but i put an alert and that code doesn't execute... thank you very much or your support. I don't know why... it's blogger...

Carlos Lizaga Anadon

unread,
Jun 24, 2014, 4:52:38 PM6/24/14
to pagespeed-ins...@googlegroups.com
Yeah, probably blogger ins't the best sandbox to try it out.

Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 4:53:10 PM6/24/14
to pagespeed-ins...@googlegroups.com
But i have moved all my code with your indications and now i'm at 89 in mobile and 93 in desktop :))


--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/bc51263e-9f94-4c9a-ad89-f13e124ccf77%40googlegroups.com.

Miguel García Sánchez - Colomer

unread,
Jun 24, 2014, 4:58:41 PM6/24/14
to pagespeed-ins...@googlegroups.com
But i'm near to fix it... :) moving the code before it's going to be used i've get better score and more speed. I have to do A LOT of changes to make that Blogger can support css inline and avoid css and javascript render blocking... I'm trying to explain in my web to help people to make better Blogs but it's difficult. You help me a lot. My "only" issue now it's to fix my 17% of "prioritize visible content"... i think that is for the slider calculations. 

Do you think that if i set fixed values for the slider's css parameters i'll get a better content priorization? (bacause i've moved all my code to his correct place)...

Carlos Lizaga Anadon

unread,
Jun 24, 2014, 6:05:04 PM6/24/14
to pagespeed-ins...@googlegroups.com
In essence that rule has to be clarified yet as there are not much documentation about what google really wants.

Anyway, you need to stick inbuilt all the CSS rules that has to do anything with rendering top to mid page render. That might mean using min-height min-width values to some elements that might be blocking the page load itself. Also there are some other practices that can be done in order to boost all that, for example using base64 code to show images or loading them with lazy image loading (http://css-tricks.com/snippets/javascript/lazy-loading-images/). Pagespeed isn't the best tool at this time to give you hits for this so i'd suggest and encourage you to use the chrome extension "pagespeed" that will give you more clues about what else to optimize. And of course you can still use audits in the developer tools area of chrome to seek more hints such as serve cookieless static resources and parallel resource download which can be done by using another domain or CDN or other domain without cookies.

Also, for high traffic pages or high database CMS you can use APC and Nginx to boost server performance and reduce reply ms for 100-200 or even 300 ms.

Check out pingdom page speed tool here: http://tools.pingdom.com/fpt/

Keep in mind that Google might be famous in Europe as the most used Search Engine but in other countries yahoo, bing or Baidu will be the most used so, the highest ratting you reach in performance in all the available page speed test will mean better indexation in all other SE.

It's up to you to collect all the available data and modify your code / server architecture to have a high quality webpage in what performance refers.

As a final hint, don't hesitate to mess with your inbuilt CSS to make sure that you aren't using repeated rules and use CSS minifiers (http://www.csscompressor.com/) and js closure (http://closure-compiler.appspot.com/home) to leverage page size. 

Regards.

Miguel García Sánchez - Colomer

unread,
Jun 25, 2014, 4:24:49 AM6/25/14
to pagespeed-ins...@googlegroups.com
Interesting. But, always when i'm using css compressors i loose al my styles when the page renders... don't know why (in another pages i don't have this problem, it's with this template). It has a lot of css code and it's difficult to have a good head size. Is it ok if i "cut" the css and put it before it's going to be used in the body?. What options you check in the css compressors to don't "break" your css rules?.

Thenk you Carlos.

Carlos Lizaga Anadon

unread,
Jun 25, 2014, 8:11:41 AM6/25/14
to pagespeed-ins...@googlegroups.com
You can use a php lib made by tubal martin:


And here's how it shall be used:


Please, note that I used smarty there but isn't necessary, also I used relative paths so that's why I replaced them to fit the correct path in an inbuilt CSS. Of course that cannot be used in blogspot, as It's written in python (or I think so, not really sure anyway). This will compress your CSS and then you can assign it to whatever you want: a variable, etcétera.

Your issue with those minifiers that I linked yesterday might be related with the media queries and 3rd party vendor rules so, in fact, you could avoid those rules in your minification in order to ensure the right CSS behavior. 

Also, it seems that loading external CSS after the </html> tag won't work as google suggested as chrome will detect it as a wrong code and auto-move it before the </html> tag which will trigger a pagespeed error. 

I've tried to load the CSS using JS in a deferred way with the same result, so, you might want to use <style scoped></style> with any other rules not related with your mid-top page rendering anywhere in your document as that should do the trick.

Try it and let me know if you have any other issue.

Regards.

Miguel García Sánchez - Colomer

unread,
Jun 25, 2014, 10:07:52 AM6/25/14
to pagespeed-ins...@googlegroups.com
I'll try it this night. I'm now in 92 desktop and 90 mobile... but i have to make a lot of changes in mobile version. I'll tell you the results.

Thank you Carlos, you are a "4x4 web programmer", it's amazing all that you know, congratulations.

Carlos Lizaga Anadon

unread,
Jun 25, 2014, 10:14:41 AM6/25/14
to pagespeed-ins...@googlegroups.com
Oh, i'm only a student, but thank you for the compliment.

Keep me informed.

Regards,
Carlos Lizaga.

Miguel García Sánchez - Colomer

unread,
Jun 25, 2014, 1:39:59 PM6/25/14
to pagespeed-ins...@googlegroups.com
Carlos,
student but you'll have a great knowledge and talent for this.


i'm wondering why in Blogger i can't make the deferred loading... i'll test this night the css utility that you've passed me and retest the deferred call with httpwatch to debug the call and see what it's happening. I'll keep you informed.

Best regards,



--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/70930388-3638-4237-b410-e86298afd401%40googlegroups.com.

Miguel García Sánchez - Colomer

unread,
Jun 25, 2014, 7:19:26 PM6/25/14
to pagespeed-ins...@googlegroups.com
Hi Carlos,
i've tested it... but i can't... look at the code here: http://aprendeblogdesdecero.blogspot.com.es/

i've inserted all the script befor the </body> and i've inserted "alerts" to see if something happens but not...

it's amazing because the pass code that i've used only performs well one time because the caching problem, bu with that i can't get nothing.

Could you please take a look?... 

Thank you very much!!!

El miércoles, 25 de junio de 2014 19:39:59 UTC+2, Miguel García Sánchez - Colomer escribió:
Carlos,
student but you'll have a great knowledge and talent for this.


i'm wondering why in Blogger i can't make the deferred loading... i'll test this night the css utility that you've passed me and retest the deferred call with httpwatch to debug the call and see what it's happening. I'll keep you informed.

Best regards,

2014-06-25 16:14 GMT+02:00 Carlos Lizaga Anadon <carlos...@gmail.com>:
Oh, i'm only a student, but thank you for the compliment.

Keep me informed.

Regards,
Carlos Lizaga.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

Carlos Lizaga Anadon

unread,
Jun 25, 2014, 7:59:18 PM6/25/14
to pagespeed-ins...@googlegroups.com
Don't use CDATA and...

$.ajax({ cache: true, async: true, dataType: "script", url: 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' }); }); <--- Remove this

}

And why are you loading 3 times jquery?

My code will load jquery once, your $.ajax call makes no sense as it's async already and should look like this:

$.ajax({
    type: "GET", 
    url: "http://js.js", 
    dataType: "script", 
    cache: true /* or false if you don't want to cache it*/ 
}); 

And you are loading jquery again here:

//<![CDATA[ (function() { var s=d ocument.createElement('SCRIPT'), s1=d ocument.getElementsByTagName('SCRIPT')[0]; s.type=' text/javascript'; s.async=t rue; s.src=' https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'; s1.parentNode.insertBefore(s, s1); })(); //]]>

Again with no need of CDATA usage.

Lets try this, go to Chrome, right click on any element and inspect, open console and paste this:

var dfLoadStatus = 0; var dfLoadFiles = [ ["https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"], [ "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" ] ]; function downloadJSAtOnload() { if (!dfLoadFiles.length) return; var dfGroup = dfLoadFiles.shift(); dfLoadStatus = 0; for (var i = 0; i < dfGroup.length; i++) { dfLoadStatus++; var element = document.createElement('script'); element.src = dfGroup[i]; element.onload = element.onreadystatechange = function () { if (!this.readyState || this.readyState === 'complete') { dfLoadStatus--; if (dfLoadStatus === 0) { if (dfGroup.length === 1) { //if jquery was loaded, then load other js downloadJSAtOnload(); } else { //all is already loaded, perform deffered actions performDeferredActions(); } } } }; document.body.appendChild(element); } } if (window.addEventListener) { window.addEventListener("load", downloadJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", downloadJSAtOnload); } else { window.onload = downloadJSAtOnload; } function performDeferredActions() { alert("llego a ejecutar deferred"); $.ajax({ cache: true, async: true, dataType: "script", url: 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' }); }
Press enter, and then write:

downloadJSAtOnload();
And press enter again. And then to test if jQuery was loaded properly try this:

$.fn.jquery;
You should get a return with your jquery version by then.

Also, I'd get the latest jquery version which is //ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js

Using no http/https will mean that it will automatically fit with your current protocol (if you use http it will load it from http, and if you use https it will load it from https to avoid https issues). 





Carlos Lizaga Anadon

unread,
Jun 25, 2014, 8:03:36 PM6/25/14
to pagespeed-ins...@googlegroups.com
Please, check your console, you will see there all your errors with detailed hints like any other compiler.

Regards.
screen.png

Miguel García Sánchez - Colomer

unread,
Jun 25, 2014, 8:30:08 PM6/25/14
to pagespeed-ins...@googlegroups.com
WoW amazing job Carlos, you would be a student but you know more javascript than a lot Professionals.

I'll try this tomorrow adn i'll tell you... Thank you again.

Miguel.

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 4:36:27 AM6/26/14
to pagespeed-ins...@googlegroups.com
Ok Carlos,
i've done it, reporting results:

- I've deleted the first jquery call that i've donde incorrectly.
- Blogger it's HXTML and i'm only can use that javascript with CDATA (if you know the way to do it in xhtml it would be great).
- If i use the Chrome console i load correctly the jquery (i've get the result $.fn.jquery; "1.5.1").

I'm going to make more testing to view what's the problem. The code it's in the page corrected... but i think that i can't make a good execution...

Thank you very much.

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 5:44:34 AM6/26/14
to pagespeed-ins...@googlegroups.com
After new testing i have debugged the code and i'm not sure if it's reaching the jquery call):

1) If i use the "jquery deferred call" before </body>, i have various functions that i've "inlined" in the "middle" of the body, just before they need to be placed to use (thumbnail makers, slider, etc...).

2) Only for test i have placed your deferred call before these inlined functions (you can see it in my code) to test if the jquery loads.

3) With debugger i've detected that the script reach the method  performDeferredActions()

4) In performDeferredActions() i've try to load the jquery library but i think that there i have to load the .js that i must use (if i understanded the code well). How can insert inlined as functions those javascript methods that i need there?

Best regards,

Carlos Lizaga Anadon

unread,
Jun 26, 2014, 8:29:39 AM6/26/14
to pagespeed-ins...@googlegroups.com
Of course you need to include those inline functions in performDeferredActions or in an external JS file that you might load with an ajax call.

Regards.

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 8:50:43 AM6/26/14
to pagespeed-ins...@googlegroups.com
Yes, i know, but the problem it's that i'm in Blogger and i don't want to use Drive or skydrive to put there those code inside a .js... The best "js delivery" for Blogger it's to inline the little .js in the code (because we can't upload .js or .css...).

But, i think that i can make a better optimization job if i could load the jquery .js like you are trying to explain me for the other scripts (because jquery it's "huge" to inline it in the XHTML).

When i try to load the .js with this method (like analytics.js for example, the async mode explained in Google Developers):

<script type='text/javascript'>
  (function() {
alert("hello");
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script> 

I have the cache problem.

Maybe you could make that your deferred script with the jquery loading only. If i can do this (without caching), i'll load the jquery in async or deferred without the need of inline it.

Something like use the same code but to load the jquery async... :

var dfLoadStatus = 0; var dfLoadFiles = [ ["DON'T LOAD HERE THE JQUERY"], [ "" ] ]; function downloadJSAtOnload() { if (!dfLoadFiles.length) return; var dfGroup = dfLoadFiles.shift(); dfLoadStatus = 0; for (var i = 0; i < dfGroup.length; i++) { dfLoadStatus++; var element = document.createElement('script'); element.src = dfGroup[i]; element.onload = element.onreadystatechange = function () { if (!this.readyState || this.readyState === 'complete') { dfLoadStatus--; if (dfLoadStatus === 0) { if (dfGroup.length === 1) { //if jquery was loaded, then load other js downloadJSAtOnload(); } else { //all is already loaded, perform deffered actions performDeferredActions(); } } } }; document.body.appendChild(element); } } if (window.addEventListener) { window.addEventListener("load", downloadJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", downloadJSAtOnload); } else { window.onload = downloadJSAtOnload; } function performDeferredActions() { alert("llego a ejecutar deferred"); $.ajax({ cache: true, async: true, dataType: "script", url: 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' /*TRY TO LOAD HERE*/ }); }

could you please modify that code to load the jquery library? i must use all the other scripts inlined in my code, i'm only need to load jquery without "inlining". 

Thank you very much Carlos.

Carlos Lizaga Anadon

unread,
Jun 26, 2014, 9:08:25 AM6/26/14
to pagespeed-ins...@googlegroups.com
What is exactly your issue with cache and query?

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 10:25:33 AM6/26/14
to pagespeed-ins...@googlegroups.com
Ok, i'll try to explain in steps all the things that i've tried:

THE PROBLEM:

I need to load de jquery .js without "inlineing" the code in my HTML.

If i make a "sync call" like this <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script> i loose speed (and obviously pagespeed score ).

Because i'm in Blogger, i can't upload my ,js or .css to the server. And i don't want to use Drive or another cloud service to upload the .js to make deferred calls with the script that you have passed.


THE ATTEMPTS

1) When i have used this Google Developer's way to make async call:

<script type="text/javascript">
  (function() {
alert("hola1");
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?onload=OnLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

only works well only onece because the other times the jquery.min.js it's cached. I've tried the ?v=1 method and random values to call the .js but always it's cached.

2) The only way the jquery performs fast it's "inlined" in my HTML (but i have a big HTML)

3) I can't use your Deferred call with Ajax because i can't call to external .js (don't want to use cloud services).

I don't know if you can try to make that deferred call to load the jquery.min.js with part of that sample script that you have explained me.

Thank you very much!!!

Carlos Lizaga Anadon

unread,
Jun 26, 2014, 12:43:35 PM6/26/14
to pagespeed-ins...@googlegroups.com
You totally misunderstood what jQuery or other 3rd party js libraries are for. 

Since you're loading jQuery and jQuery is a "static" script that won't change (at least for that version) it should be cached in order to minify request and download.
There is no reason to avoid caching jQuery, even in blogspot as you're not loading a custom script that may vary in order to fit in.

Loading jQuery the way I told you will make your navigator cache it. 

I think that I can't get why do you want to stop caching a static library, and I can't understand why are you using and argument as callback since you don't need it.

Let's take it with examples, make a jsfidlle with all your inlined JS functions that shall be called after jQuery is loaded. I'll make it for you, test it and then publish it back with the changes explained.

Regards. 

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 12:51:00 PM6/26/14
to pagespeed-ins...@googlegroups.com
Oh, of course Carlos, i'm not an expert... that is why i'm asking you. Thank your for explain it.

- I'm doing that sample because in google developers explain that to make the async call here:

"https://developers.google.com/+/web/api/javascript?hl=es" in "Cómo cargar el API de JavaScript de forma asíncrona"

How can i do the jsdfile?

Thank you very much and thank you for your explanations and patience.

Carlos Lizaga Anadon

unread,
Jun 26, 2014, 12:57:52 PM6/26/14
to pagespeed-ins...@googlegroups.com
You can use pastebin as it will be easier and faster.


Remember to set the expiration for at least one week.

I apologize if I meant to be rude by saying that you misunderstood it, wasn't my intention.

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 1:32:51 PM6/26/14
to pagespeed-ins...@googlegroups.com
Carlos!!!, i've got it!!!

making a debug with httpwatch i have seen that the jquery it's loading correctly but i have two things bad:

1- Bad placement of one of my javascripts that uses jquery.
2- I've used a script that place the call in head and body using a Google Developers sample:

<body>

<script type='text/javascript'>
(function(){
  var bsa = document.createElement(&#39;script&#39;);
     bsa.type = &#39;text/javascript&#39;;
     bsa.async = true;
  (document.getElementsByTagName(&#39;head&#39;)[0]||document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bsa);
})();
</script>

with this script and this call i've got better results but i have the caching problem.

I think that i have bad placement of some script.

please add me to google talk so we can speak about it this night and finish it.

When i finish i'll try to explain it in my blog so more people can do it for their webs.

Thank you very much.

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 3:53:24 PM6/26/14
to pagespeed-ins...@googlegroups.com
Don't worry Carlos, i know, it's normal, i'm a beginner (older but beginner ;)

I can't do it... i have something bad in my code because not always performs ok... 



El jueves, 26 de junio de 2014 18:57:52 UTC+2, Carlos Lizaga Anadon escribió:

Carlos Lizaga Anadon

unread,
Jun 26, 2014, 4:35:52 PM6/26/14
to pagespeed-ins...@googlegroups.com
Please, use pastebin to give me your inline scripts so I can set it up.

Regards.

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 4:41:26 PM6/26/14
to pagespeed-ins...@googlegroups.com

Ok, but i'll send it to your gmail account because they are private. I'm on it.

Thank you Carlos

El 26/06/2014 22:35, "Carlos Lizaga Anadon" <carlos...@gmail.com> escribió:
Please, use pastebin to give me your inline scripts so I can set it up.

Regards.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/1650a9f5-5f50-4254-9a9c-d1c648e82484%40googlegroups.com.

Miguel García Sánchez - Colomer

unread,
Jun 26, 2014, 5:48:30 PM6/26/14
to pagespeed-ins...@googlegroups.com
i've sent it to your gmail account.

Carlos Lizaga Anadon

unread,
Jun 26, 2014, 6:16:33 PM6/26/14
to pagespeed-ins...@googlegroups.com
Try the code I sent to you.

Regards. 
Reply all
Reply to author
Forward
0 new messages