Failed to solve the errors indicated by Google developers pagespeed js + css [closed]

3

I am working on a web page and it is already uploaded to the hosting (but since I have to fix some things still, I have closed the access). The issue is that I opened it a moment to see what google used to tell me in its tools for uploading a web, and I have made some mistakes that I have not been able to solve. It is the first time that I make a web project. It tells me to delete the scripts although I solved it mostly using async between the script and the src. The issue is that with the script of the googlemaps API, if I use the async, I do not load the map (the script v in index.php instead of in header.php as the others go to avoid that in the other pages it leaves an error for not having the map). The code I have is this:

<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzYZmy7TTQ0alw5b2QDJpMp-YssOdlH9M"></script>

He also tells me about the css:

He tells me to prioritize the visible content but I imagine that it disappears when I solve the above.

Thank you very much for the help and I am waiting for an answer:)

P.D: By privacy issues I hid the link to the page in the css.

    
asked by Dianne 28.05.2016 в 20:54
source

1 answer

0

The issue is where to place the <script ... /script> . The recommendation is to put them completely inside the body before closing it:

<html>
  <head>
    <meta...
       no poner script acá salvo que haya una razón de peso
  </head>
  <body>
    <... poner acá el contenido sin script
    ...
    <script ... acá sí van los scripts /script>
  </body>
</html>

The reason for recommending that is that the browser, when finding a tag <script> has to stop (ie it is blocked) in its task of displaying the page to load, process and execute the js. In contrast to doing so at the end of everything, you can do several things in parallel by accelerating the speed at which the content is displayed.

Optimize CSS and / or upload external files

Another thing to keep in mind is that each link implies a connection to bring the other file. One possibility (in the case of wanting to accelerate the loading and showing of the page) is to put the content inside the html. That's easy when you're working with PHP. Simply instead of showing

<link src="archivo.css" ...

the file should be opened with a file_read_content or similar command and send all the content within a pair of tags <script> , </script> . The ideal is to have a version of the .css file that only contains the styles used (or have a preprocessor of it).

Each one should evaluate, in the different stages of their project, if it is worthwhile to take up this task and how many milliseconds would be saved.

    
answered by 28.05.2016 в 21:23