Oltre 50 mila sviluppatori visitano Davidwalshblog ogni mese da tutto il mondo per imparare i trucchi JavaScript e risolvere i problemi nel loro codice. Sfortunatamente, alcuni di loro hanno un’esperienza lenta sul sito.
David tiene traccia delle prestazioni del suo core net vitali e delle prestazioni complessive con Richiedere metriche. Di recente, abbiamo notato che il suo punteggio di prestazione CLS period piuttosto lento sia per gli utenti desktop che per mobili.
Aspetta, cos’è CLS?
Shift di structure cumulativo (CLS) è uno dei Internet principale vitale Metriche di efficiency. Non misura il tempo di carico direttamente, invece misura quanto una pagina turni mentre viene caricato. Lo hai sicuramente visto e ne sei rimasto infastidito. Questi turni fanno un sito Tatto lento a un utente.
CLS e il resto dei vitali net core sono molto importanti. Non solo perché misurano l’esperienza dell’utente, ma anche perché influenzano la pagerank di un sito in cerca. E il traffico di ricerca è vita per blogger, siti di media, negozi di e-commerce e praticamente tutti con un sito Internet.
Se riusciamo a risolvere il problema CLS del sito, faremo ai lettori un’esperienza più veloce e aumenteremo la classifica di ricerca in modo che David possa aiutare ancora più persone. Sembra un grande incentivo, capiamolo.
Crash con Google Lighthouse
Per trovare un problema delle prestazioni, molti sviluppatori utilizzeranno uno strumento come Google Lighthouse. Ho eseguito un rapporto del faro sul sito di David, ed ecco cosa ho ottenuto.
Un punteggio perfetto! Facciamo le valigie e torniamo a casa.
Il problema è quello Google Lighthouse è una bugia. Gli utenti reali non avranno queste prestazioni. Quel punteggio rappresenta solo un singolo check, dal mio pc di fulmine, negli Stati Uniti, su una connessione a banda larga veloce.
I veri utenti di David provengono da tutto il mondo, su diversi dispositivi e reti e in ogni momento. La loro esperienza di efficiency è tutt’altro che perfetta. Ecco perché dobbiamo ottenere Monitoraggio degli utenti reali Per le prestazioni, altrimenti non potremmo mai sapere che c’è un problema.
Dove sono i problemi CLS?
David scrive da molto tempo e ha centinaia di publish sul suo sito. Richiedi Metrics traccia il punteggio CLS per pagina in modo che possiamo zero sui problemi.
La pagina del traffico più grande è la pagina radice e che ha un buon CLS. Ma molti dei suoi publish, come Gioca a Grand Poo World E Intervista di Pornhub avere punteggi CLS preoccupanti. Possiamo anche tracciare gli elementi responsabili del CLS e per la maggior parte dei publish fundamental > article > p. Ciò significa che il primo paragrafo dell’articolo è la cosa che si sposta. Perché dovrebbe farlo?
Cosa c’è di comune di questi publish con i peggiori punteggi CLS? Immagini. Le immagini sono una causa molto comune di problemi di CLS perché un browser non sa sempre quanto sia grande un’immagine fino a quando non viene scaricata. Il browser presuppone che sia 0x0 fino a quando non ha l’immagine, quindi turni Tutto intorno per fare spazio.
I publish con molte immagini si sposterebbero molte volte quando ogni immagine veniva scaricata e l’articolo si è spostato per fare spazio ai nuovi contenuti.
Usando le immagini correttamente per CLS
Per evitare i turni di structure quando si utilizzano le immagini, dobbiamo dare suggerimenti al browser su quanto saranno grandi le immagini. Il browser utilizzerà questi suggerimenti per riservare lo spazio nel structure per l’immagine al termine del obtain.
Si noti che la larghezza e l’altezza sono specificate come propri attributi, non parte di un tag di stile. Questi attributi impostano sia una dimensione di base dell’immagine sia le proporzioni da utilizzare. Puoi ancora usare CSS per rendere l’immagine più grande o più piccola da qui.
Si noti inoltre che non c’è no px unità specificata.
Dimensioni dell’immagine in wordpress
Davidwalsh.Title è ospitato su WordPress, dove ci sono alcuni strumenti integrati per farlo. Possiamo utilizzare wp_image_src_get_dimensions Per ottenere le dimensioni delle immagini che sta usando e aggiungerle al markup.
Dimostrando che funziona
David ha apportato le modifiche all’immagine qualche giorno fa e stiamo già assistendo a un miglioramento. CLS è sceso del 20% a 0,123. Ora siamo molto vicini alla gamma “buona” di CLS.
Ci sono ancora alcuni problemi da risolvere i caratteri, ma sarà una storia per un’altra volta e un altro publish.
Se stai cercando di migliorare le prestazioni reali del tuo sito o preoccupato di perdere il succo di search engine optimisation dai problemi vitali del Internet principale, dai un’occhiata Richiedere metriche. Ha gli strumenti per tenere traccia delle prestazioni e dei suggerimenti attuabili per risolvere effettivamente i problemi.
Inoltre è gratuito, quindi è quello di farlo.
Informazioni su Todd Gardner
Todd Gardner è un imprenditore e sviluppatore di software program che ha creato più prodotti redditizi. Spinge strumenti semplici, software program mantenibili e bilanciamento della complessità con il rischio. È il cofondatore di Trackjs e richiede metriche, in cui aiuta migliaia di sviluppatori a costruire siti Internet più veloci e affidabili. Produce anche la commedia software program PubConf.
