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.
Amazon Prime | Amazon Music Unlimited | Prime Video
Amazon Business | Kindle Unlimited | Amazon Wedding List | Prime Student