Optimize website upload speed - Google Recommendations

0

Hello, I have a website and using the google speed testing tool, I'm giving you the following recommendations:

  
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content

  •   
  • Optimize images

  •   
  • Leverage browser caching

  •   

Could you explain the first? I can not understand it, I moved all the script of my page (js) from the head to the foot of the body, but it turned out that this was not the topic, I would appreciate your help.

    
asked by Cristofer Fuentes 09.07.2016 в 22:22
source

1 answer

2

With the render-blocking I think they refer to everything that makes it difficult to load a web page.

What you have done to move the js from the head to the foot of the body allows you to load the content before the scripts. This technique is included in a series of guidelines that are recommended to avoid render-blocking.

The most recommended techniques are the following:

  • That the page initially only loads the part that the user sees and then progressively loads the rest of the page.
  • If the page does not use large functionality of JS, it is advisable not to use libraries or frameworks that can increase the load time.
  • Also the technique you have used to move the call to the JS of the HEAD at the foot of the BODY is not enough. Ideally, the content of the page should be executed first and then the JS files. You can do this with an "onload" but it does not seem the most appropriate option because it ends up interfering with the page's performance.

I've been investigating and I've found this code.

<script type="text/javascript">
function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "defer.js";
 document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

The difference between this and an "onload", is that the "onload" loads the file and until the page is fully displayed it does not execute the code but in the meantime resources have been spent in loading it. The code solution waits for the page to be loaded to load and execute the file.

All this helps the page to go faster, without a doubt the most important pillar is a light and clean code.

I also leave the links where I have downloaded information in case you want to have an eye on them: link

link

    
answered by 10.07.2016 / 01:06
source