Pagespeed Insights rimuovere Javascript non utilizzato

Tempo di lettura: min.
Pagespeed Insights rimuovere Javascript non utilizzato
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 Amazon

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 Amazon

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
Salsomaggiore Terme (Web) - 22/04/2021 - Pagespeed Insights rimuovere Javascript non utilizzato
Written by Mokik

ChatBot AI MrPaloma

Cerca più informazioni grazie alla nostra AI, prova a fargli delle domande utilizzando l'icona che vedi in basso a destra.
Utilizza la forza di ChatGPT per ricercare in tutti gli articoli di MrPaloma.com. Apri la chat.
Esplora MrPaloma con la nostra chat IA!. Domanda cosa vuoi trovare per cercare rapidamente.

Argomenti

Carte conto online raccontiamo la nostra esperienza

Carte conto online raccontiamo la nostra esperienza

Leggi l'articolo in cui parliamo delle nostre esperienze con varie carte di debito e conti online.

Scopri i vari modi per guadagnare soldi online dai giochi agli investimenti in criptovaluta

Scopri i vari modi per guadagnare soldi online dai giochi agli investimenti in criptovaluta

Leggi l'articolo in cui parliamo delle nostre esperienze con vari metodi per gudagnare online.

Editor di testo online

Editor di testo online

Editor di testo online. Modifica e crea con facilità con l'editor di testo online MrPaloma.

Giochi online

Link referral

In questo articolo, potrebbero essere presenti alcuni link referral, che sono speciali link che ci permettono di ottenere una piccola commissione se decidete di effettuare un acquisto o di registrarvi a un servizio dopo aver cliccato su di essi. I link referral sono comunemente utilizzati per sostenere il costo delle operazioni del sito web e per continuare a fornire contenuti di qualità agli utenti come voi.

Tuttavia, tenete presente che i link referral non influenzano il nostro giudizio o il contenuto dell’articolo. Il nostro obiettivo è fornire sempre informazioni accurate, approfondite e utili per i nostri lettori. Speriamo che questi link referral non compromettano la vostra esperienza di navigazione e vi invitiamo a continuare a leggere i nostri articoli con fiducia, sapendo che il nostro impegno è offrirvi sempre il meglio.

Aiuta MrPaloma.com a crescere, utilizza uno dei seguenti link per iscriverti a qualche sito così che noi possiamo ricevere un omaggio.
Amazon Sostieni MrPaloma facendo acquisti su Amazon partendo da questo link amazon.it.
Leonardo.ai Sostieni MrPaloma facendo l'iscrizione con il seguente link leonardo.ai.
Plutus Ricevi uno sconto del 100% in PLU su tutti i vantaggi basati su abbonamento. plutus.it.

Articoli precedenti

© MrPaloma 2024 - Viaggi - Foto - Forum -
Termini di servizio - Privacy