Pagespeed Insights rimuovere Javascript non utilizzato

Salsomaggiore Terme (Programmazione) - 22/04/2021 - Pagespeed Insights rimuovere Javascript non utilizzato - Written by Mokik

Utilizzando lo strumento di Google pagespeed insights spesso ci è capitato nelle nostre pagine del sito di ottenere un valore molto basso perchè veniva richiesto di rimuovere il codice Javascript non utilizzato.

Lo strumento pagespeed insights serve per capire in che modo le tue pagine web vengano caricate velocemente su tutti i dispositivi.

Il messaggio visualizzato nella pagine di pagespeed insights era Rimuovi il codice JavaScript inutilizzato per ridurre i byte consumati dall'attività di rete.

Il tempo di attesa più lungo era quello riportato alla riga ...en_US/base.js(www.youtube.com) solo che non potevamo rinunciare ad inserire i video di YouTube all’interno della pagina ed essendo librerie di Javascript esterne non potevamo neanche modificarle.

guarda YouTube al costo più basso di sempre su

La soluzione che abbiamo adottato è la seguente, praticamente al caricamento della pagina visualizziamo solo l’immagine dei video di YouTube e poi tramite del Javascript all’evento click inseriamo iframe di YouTube per vedere il video.

Questa tipologia di soluzione è stata indicata anche in questo post The best way to put a youtube video into a website and get a good score from Google Page Speed Insight presente su stackoverflow.com ricercando remove unused javascript YouTube

guarda JavaScript al costo più basso di sempre su

Il codice da noi utilizzato è il seguente


<style>
.wrapper { max-width: 680px; margin: 1px auto; padding: 0 1px; }
.youtube { background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; }
.youtube img { width: 100%; top: -16.82%; left: 0; opacity: 0.7; }
.youtube .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; }
.youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; }
.youtube img,.youtube .play-button { cursor: pointer; }
.youtube img,
.youtube .play-button,
.youtube .play-button:before { position: absolute; }
.youtube .play-button,
.youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 ); }</style>

<div id="yutb(YouTubeCode)" class="wrapper">
<div class="youtube">
<img src="https://img.youtube.com/vi/YouTubeCode/sddefault.jpg" alt="YouTube Video" title="YouTube Video" />
<div class="play-button">
</div></div>
</div>
<script>document.addEventListener("DOMContentLoaded", (event) => { var elm = document.getElementById('yutb(YouTubeCode)'); elm.addEventListener("click", function() { this.innerHTML = '<iframe width="640" height="480" src="https://www.youtube.com/embed/YouTubeCode?autoplay=1" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'; }); });</script>

Attenzione che all’immagine che appare al posto del iframe di YouTube appena viene caricata la pagina non si può assegnare il tag loading="lazy" altrimenti non viene visualizzata e si vedrebbe solo un riquadro nero.

Con questa tipologia di soluzione il punteggio assegnato da pagespeed insights è cresciuto notevolmente.

Pagespeed Insights rimuovere Javascript non utilizzato

Altri articoli che potrebbero interessarti