• Registered: 2016-11-28
  • Posts: 2

Topic: Google Developers PageSpeed Insights Tool

Hi,
How to solve my problem below
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:

    http://indahkaryabersaudara.biz.id/01/j … uicebox.js

Optimize CSS Delivery of the following:

    http://indahkaryabersaudara.biz.id/01/j … /theme.css

Prioritize visible content
Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
Leverage browser caching for the following cacheable resources:

    http://indahkaryabersaudara.biz.id/01/j … cebox.woff (2 days)

Thank you

Best Regard
M. Syafri Djamal

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Google Developers PageSpeed Insights Tool

Google's PageSpeed Insights tool can certainly be very helpful but it is also useful to remember that the results are just Google's ideal recommendations (without any knowledge of the content of the page or if any of their recommendations can even be implemented).

With regard to the 'render-blocking JavaScript and CSS' message, the results note:

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load.

That is correct but, knowing the content of your web page (the only content above-the-fold is your Juicebox gallery), it is absolutely necessary to wait for the 'juicebox.js' and 'theme.css' files to load before the gallery can be displayed and is visible.

The 'Prioritize visible content' message notes:

This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content.

That, again, is true. Additional resources (the gallery's 'config.xml' file and the JavaScript, CSS, image and font files in the 'jbcore' folder) are required due to the design and required structure of Juicebox. However, there is nothing that can be done to incorporate all these resources directly into the gallery's HTML embedding page and the message is really nothing to worry about.

Knowing the way that Juicebox works (requiring the 'juicebox.js' and 'theme.css' files to be fully loaded before the gallery can be displayed and also requiring an external XML file and the 'jbcore' folder) the two warnings above can be put into context. They are not truly problems but necessities for the gallery to be displayed and function correctly.

Try entering other popular websites (such as 'http://google.com' or 'http://amazon.com') into Google's own PageSpeed Insights tool and you'll see that the results are often similar to those reported for your own Juicebox gallery web page.

When using any library or package which requires a number of external resource files (such as Juicebox and its 'jbcore' folder), you'll find that the PageSpeed Insights tool gives similar results.

Leverage browser caching

You could certainly set HTTP cache headers within an .htaccess file if you like. Try a web search with terms such as 'http cache header htaccess' to find out more information.
However, such a decision (to force browser caching or not) is really up to the individual user (and not directly Juicebox dependent).

Incidentally, all these messages refer to the Speed section. The User Experience section for your Juicebox gallery page gives a score of 100/100 with the message "Congratulations! No issues found.".

I hope this helps to clarify things.

  • Registered: 2016-11-28
  • Posts: 2

Re: Google Developers PageSpeed Insights Tool

Steven wrote:

Google's PageSpeed Insights tool can certainly be very helpful but it is also useful to remember that the results are just Google's ideal recommendations (without any knowledge of the content of the page or if any of their recommendations can even be implemented).

With regard to the 'render-blocking JavaScript and CSS' message, the results note:

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load.

That is correct but, knowing the content of your web page (the only content above-the-fold is your Juicebox gallery), it is absolutely necessary to wait for the 'juicebox.js' and 'theme.css' files to load before the gallery can be displayed and is visible.

The 'Prioritize visible content' message notes:

This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content.

That, again, is true. Additional resources (the gallery's 'config.xml' file and the JavaScript, CSS, image and font files in the 'jbcore' folder) are required due to the design and required structure of Juicebox. However, there is nothing that can be done to incorporate all these resources directly into the gallery's HTML embedding page and the message is really nothing to worry about.

Knowing the way that Juicebox works (requiring the 'juicebox.js' and 'theme.css' files to be fully loaded before the gallery can be displayed and also requiring an external XML file and the 'jbcore' folder) the two warnings above can be put into context. They are not truly problems but necessities for the gallery to be displayed and function correctly.

Try entering other popular websites (such as 'http://google.com' or 'http://amazon.com') into Google's own PageSpeed Insights tool and you'll see that the results are often similar to those reported for your own Juicebox gallery web page.

When using any library or package which requires a number of external resource files (such as Juicebox and its 'jbcore' folder), you'll find that the PageSpeed Insights tool gives similar results.

Leverage browser caching

You could certainly set HTTP cache headers within an .htaccess file if you like. Try a web search with terms such as 'http cache header htaccess' to find out more information.
However, such a decision (to force browser caching or not) is really up to the individual user (and not directly Juicebox dependent).

Incidentally, all these messages refer to the Speed section. The User Experience section for your Juicebox gallery page gives a score of 100/100 with the message "Congratulations! No issues found.".

I hope this helps to clarify things.

Thank you Steven. I've tried looking http://google.com and http://amazon.com use google pagespeed tool. But they are not blocked javascript. While my problem is juicebox.js blocked. I need a solution that had escaped from google juicebox.js pagespeed tools
This is the test results

Amazon.com :
53 / 100Speed
Should Fix:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 3 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:

    https://images-na.ssl-images-amazon.com … L.css_.css
    https://images-na.ssl-images-amazon.com … L.css_.css
    https://images-na.ssl-images-amazon.com … T7Dj8L.css

Google.com:

92 / 100Suggestions Summary
Consider Fixing:
Avoid landing page redirects
Your page has 2 redirects. Redirects introduce additional delays before the page can be loaded.
Avoid landing page redirects for the following chain of redirected URLs.

    http://google.com/
    http://www.google.co.id/?gws_rd=cr& … 0gTio4D4CA
    https://www.google.co.id/…?gws_rd=cr,ss … 0gTio4D4CA

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Google Developers PageSpeed Insights Tool

While my problem is juicebox.js blocked. I need a solution that had escaped from google juicebox.js pagespeed tools

This is not a problem. Google does not know that the 'juicebox.js' file must be fully loaded for your Juicebox gallery (above-the-fold) to be displayed. (The only element on your web page that is blocked from being rendered while the 'juicebox.js' file is loaded is the gallery itself.)
Also, the 'juicebox.js' file must be loaded from within the 'jbcore' folder or the gallery will not function correctly. The JavaScript code cannot be copied and pasted elsewhere.

I only mentioned google.com and amazon.com to demonstrate that other popular websites have similar PageSpeed Ingights results. (They were just the first two websites that came to mind.)
google.com has a 'Should Fix' entry themselves and amazon.com has "Eliminate render-blocking JavaScript and CSS in above-the-fold content", "Prioritize visible content" and "Leverage browser caching" just like your own website.

The results of these tests are just recommendations for an ideal scenario.
They are not definitive problems (like HTML validation errors) which really should be fixed and, in the case of Juicebox, they are just notifications which are a direct result of how Juicebox works.