I nostri amici di WP Engine hanno recentemente lanciato una bellissima nuova home page creata con Beaver Builder. Abbiamo condiviso un collegamento alla pagina nel gruppo Facebook di Beaver Builders e alcune persone hanno notato che il tempo di caricamento complessivo della pagina era piuttosto elevato. Il nostro buon amico e straordinario sviluppatore WordPress, Jon Brown, è venuto in soccorso con un’ottima spiegazione.

La conversazione su Facebook

Permettetemi di parafrasare la conversazione qui molto velocemente:

Preoccupato Beaver Builder: ho eseguito un test di caricamento della pagina con lo strumento di test XYZ e ci sono voluti quasi 10 secondi per caricarsi!

Jon: La velocità e le prestazioni sono una scelta di progettazione e sono fondamentali per le conversioni di vendita, ma ciò non significa che non siano un compromesso con altri strumenti PIÙ preziosi.

Vedo che le persone guardano i voti in lettere e il tempo di caricamento totale spesso senza capire la cascata. Questo ti porterà fuori strada a meno che tu non stia guardando siti molto semplici...

Quei gradi degli strumenti di test sono davvero rozzi e ignorano molte realtà pratiche. Diranno di evitare reindirizzamenti quando questi riguardano annunci, script di tracciamento e altre cose che necessariamente funzionano in questo modo. Spesso ignorano HTTP/2 e consigliano di ridurre le richieste e di concatenare risorse che non avrebbero importanza e potrebbero addirittura danneggiare... Non si concentrano sull'indice di velocità e sul rendering Above the Fold...

Il caricamento effettivo della pagina è <1,5 s

Scaviamo più a fondo

Ho chiesto a Jon se poteva accogliere qualche altra domanda sull'argomento della performance e lui ha accettato molto gentilmente. Queste sono le mie domande (di Robby) con le risposte di Jon.

Oh, ho già detto che Jon gestisce un negozio di sviluppo personalizzato chiamato 9seeds, quindi è disponibile a noleggio per aiutarti a ottimizzare le prestazioni del tuo sito Web WordPress!

1. Hai menzionato la "cascata". Puoi spiegare qualcosa in più su cos'è la cascata?

Esistono moltissimi strumenti per valutare le prestazioni di un sito web. Molti di questi forniscono un rapporto che include un voto in lettere di facile comprensione. Questi voti in lettere sono però strumenti piuttosto schietti, e sebbene sia bello quando ottieni tutto come, non è particolarmente approfondito, per non parlare di utile, quando non vedi direttamente come. L'unico voto in lettere che trovo utile è per la compressione delle immagini, che è una soluzione semplice, esegui le tue immagini tramite un ottimizzatore.

Troppo spesso vedo sviluppatori principianti e principianti rimanere accecati dalle lettere. Ci sono molti fattori che influiscono sulle prestazioni web del frontend e bisogna davvero guardare la “cascata” che è solo un grafico che mostra tutte le richieste HTTP, quando sono iniziate, quando sono state completate. Utilizzo WebPageTest.org per generarli.

La "cascata" è dove "vedi" qual è la risorsa specifica che impiega troppo tempo a caricarsi e/o che impedisce il caricamento di altre cose.

Infine, riconosci che la semplice A potrebbe richiedere scelte di progettazione (come la rimozione dei dispositivi di scorrimento) e l'eliminazione di risorse di terze parti (come Google Analytics, HotJar, ecc.) che sono più preziose per il proprietario del sito rispetto all'ottenimento di una A. Non tutti i siti possono essere realizzati per vai dritto come senza dolorosi sacrifici.

2. Hai consigliato WebPageTest come strumento di test preferito. Perché lo preferisci e in cosa differisce da strumenti come Pingdom, GTmetrix (e/o Google Page Speed?)?

Personalmente, non ho mai trovato niente di meglio e di più flessibile nel fare queste cose rispetto a WebPageTest.org. Tuttavia, in passato ho utilizzato anche GTMetrix, Pingdom, Google Page Speed ​​e altri e vanno benissimo. Alcuni di quelli nuovi come Lighthouse sono davvero interessanti per le app web progressive (non il 99% dei siti WordPress). Certamente non sto dicendo alle persone di cambiare strumento, di usare lo strumento che conosci e capisci. Se non conosci nessuno strumento, WPT è un ottimo strumento gratuito con cui imparare. Basta andare oltre i voti in lettere e iniziare a capire cosa sta causando quei voti in lettere.

3. Per quanto riguarda la "riduzione delle richieste e la concatenazione delle risorse", questa non è più una buona pratica? Perché?

Ai tempi in cui la maggior parte dei siti erano HTTP, anziché HTTPS, e i server Web utilizzavano tutti il ​​protocollo HTTP/1.1, i server Web potevano inviare solo un numero limitato di risorse in parallelo. Ogni risorsa (immagine, script, foglio di stile) è stata inviata separatamente e ciascuna aveva il proprio sovraccarico che ha rallentato le cose. Concatenare tutto il possibile insieme ha ridotto il numero di richieste HTTP e ha comportato enormi vantaggi in termini di prestazioni.

Negli ultimi due anni c’è stata un’enorme spinta verso HTTPS ovunque e i server web hanno iniziato a supportare il nuovo protocollo HTTP/2. HTTP/2 offre enormi vantaggi come il pre-lettura e il pre-caricamento, ma può anche inviare tutte quelle piccole risorse in parallelo, quindi non è necessario concatenarle. In effetti, potrebbe essere meglio non farlo in modo che ogni piccola risorsa possa essere memorizzata nella cache in modo indipendente.

È importante tenere presente che questo entra in gioco solo se il tuo server web supporta HTTP/2 e ciò è possibile solo se il tuo sito è HTTPS.

Detto questo, tutti i siti su cui lavoriamo in questi giorni sono HTTPS e girano su server compatibili con HTTP/2, quindi sono al punto in cui non penso nemmeno più a concatenare le risorse, e di certo non mi manca!

4. Ci sono altri "miti" o raccomandazioni sulle prestazioni obsolete che sconsiglieresti?

La cosa più importante è semplicemente che ogni sito può diventare subito As senza fare concessioni dolorose come modifiche al design o eliminare risorse di terze parti che non controlli. Tuttavia, va davvero bene perché dovresti iniziare a guardare qualcosa chiamato Indice di velocità! Il WPT ha scritto bene su questo, ma fondamentalmente sta considerando quando l'"above the fold" viene percepito come completamente caricato dall'utente. Riguarda l'esperienza dell'utente in termini di velocità, piuttosto che la pagina veramente completa. Questo era uno degli aspetti del nuovo design della prima pagina di WP Engine, l'indice di velocità era fantastico. Erano gli script differiti che impiegavano molto tempo per essere caricati e completati.

5. Hai altri strumenti, suggerimenti o trucchi per le prestazioni che consiglieresti a qualcuno?

Strumenti su cui ho imparato a fare affidamento nel corso degli anni:

• WebPageTest.org – Il mio preferito!
• ImageOptim – app desktop per comprimere JPG/PNG
• ImageAlpha: app desktop per comprimere PNG (principalmente riducendo il numero di colori)
• CloudFlare: gratuito come enorme CDN globale e WAF di base. Inoltre straordinarie funzionalità professionali a pagamento come l'ottimizzazione delle immagini al volo, l'ottimizzazione del percorso e altro ancora.

Plugin:

• WP Rocket – Anche su WP Engine utilizziamo WP Rocket, funziona e basta.
• Imagify.io – Ottimizzazione delle immagini basata su WordPress/cloud.
• BeaverBuilder – Non sono stato pagato per dirlo! Veniamo chiamati per eseguire controlli delle prestazioni su molti siti e spesso vediamo importanti problemi di frontend e backend con altri popolari page builder che non chiamerò per nome, ma non con Beaver Builder, motivo per cui lo usiamo sul nostro sito come BENE!

Grazie ancora, Jon, per aver dedicato del tempo a guidarci attraverso un approccio più moderno alla performance. Volevo dare un'ultima spinta all'agenzia di Jon, 9seeds. Se stai cercando aiuto con qualsiasi tipo di sviluppo WordPress personalizzato, fai un fischio!

A proposito di Jon Brown

Vagabondo. Sviluppatore WordPress. Fotografo. Fegato della Vita.