Chrome DevTools e WordPress

Chrome DevTools e WordPress

Perchè dedichiamo un articolo Chrome DevTools e WordPress? Chrome DevTools è infatti un set di strumenti per sviluppatori web integrato direttamente nel browser Google Chrome. Chrome DevTools e WordPress, due argomenti spesso non messi in correlazione. Invece DevTools può aiutarci a modificare le pagine al volo, a diagnosticare rapidamente i problemi e ci aiuta a costruire siti Web ottimizzati più velocemente attraverso una serie di strumenti per lo sviluppatore:

In questa dettagliata guida analizzeremo wpengine.com, un sito molto conosciuto basato proprio su WordPress. In questo modo comprenderemo perchè Chrome DevTools e WordPress sono assieme i nostri più validi alleati.

Accedere a Chrome DevTools

Esistono molti modi per accedere a DevTools:

  • clic con il pulsante destro del mouse su un elemento nella pagina e seleziona Ispeziona;
  • ControlShiftC (Windows, Linux, Chrome OS);
  • CommandOptionC(Mac) ;

Chrome DevTools e WordPress

I primi passi con Chrome DevTools

L’interfaccia utente di DevTools  è costituita da innumereboli schede, quelle in alto vengono dette pannelli.

DevTools_pannelli

Pannello Modalità dispositivo

E’ la prima scheda che troveremo in alto sulla sinistra, inoltre ci permette di simulare vari dispositivi (mobili e non) per poter fare dei test su specifici dispositivi o test per verificare lo stile responsive della nostra Web Application.

DevTools_responsive

Pannello Elements

Il pannello degli elementi è il secondo che incontriamo e inoltre permette essenzialmente di visualizza e modifica il DOM e il CSS, ovvero ispezionare e modificare le nostre pagine.

 pannello_DevTools

Pannello Console

La console ha 2 usi principali: visualizzazione dei messaggi registrati ed esecuzione di JavaScript .

DevTools_console

Qui nell’esempio la console mostra due messaggi di cui un errore e una segnalazione.

Pannello Sources

In questo pannello invece possiamo eseguire il debug del codice, modificare le pagine e ricaricarle per vederne il risultato e salvare le modifiche apportate su DevTools su disco. Infine possiamo analizzare anche porzioni di codice non utilizzato e quindi da eliminare.

DevTools_source

Pannello di Network

Attraverso una visualizzazione grafica e con dei riferimenti temporali, ci aiuta a comprendere se ci sono problemi di rete, di richieste in coda che creano tempi di inattività oppure scarse prestazioni del server. Ecco un esempio:

DevTools_network

Come si vede dal grafico precedente e anche quello successivo, detto di tipo Waterfall, prima della risposta ci sono 221 ms di attesa o di stallo, poi ci sono 1.27s di attesa per il primo bit e il contenuto successivamente viene scaricato in 2.65ms. Vediamo di capire più nel dettaglio ciò che succede.

DevTools WordPress  queue

In totale il tempo è dovuto alla somma di: richieste in coda, TTFB e download dei contenuti. Analizziamo separatamente ognuno di questi fattori scoprendone le cause e anche le possibili soluzioni.

Le Richieste in coda o bloccate sono richieste contemporanee che vengono, per questo motivo, messe in coda o bloccate. Le causa potrebbero essere che vengono fatte troppe richieste. Possiamo risolvere o tentare di tamponare questo problema rimuovedo o rinviando richieste non necessarie in modo che le richieste critiche possano essere scaricate in precedenza.

Il Time To First Byte (TTFB) può dipendere da una richiesta che rimane molto tempo in attesa di ricevere il primo byte dal server. Le cause del TTFB potrebbero essere:

  1. la connessione tra client e server è lenta.
  2. ll server è lento a rispondere. Per avere la certezza su questo punto l’ideale sarebbe quello di fare delle prove installando localmente la nostra web application e se si ottiene ancora un TTFB lento allora la causa non è la connessione ma il server particolarmente lento.

Quello che potremmo fare per migliorare questo parametro:

  • Se la connessione è lenta, conviene considerare l’idea di configurare i CDN oppure cambiare hosting.
  • Se il server è lento, dovremmo invece pensare ad ottimizzazione le query del database, l’implementazione di una cache oppure modificare la configurazione del server.

Il download dei contenuti  può richiedere molto tempo. Le cause più comuni sono:

  • connessione tra client e server lenta.
  • contenuti da scaricati numerosi o molto pesanti.

Per  migliorare questo fattore possiamo agire su:

  • ospitare i tuoi contenuti su una rete CDN
  • cambiare hosting
  • inviare meno byte ottimizzando le richieste del client e ottimizzando i contenuti.

In totale dopo 1.5s termina questa fase inizia una seconda fase (wpengine.com)

DevTools WordPress wpengine

Questa fase ha inizio dopo 1.71s e rimane in coda per 48.65ms e rimane in stallo fino a 1.9s.  La richiesta viene spedita in 1.26ms, il tempo di TTFB è di 1.03s e soli 4.35ms per scaricare i contenuti. In totale ho un’ulteriore attesa di 2.98s.

Google DevTools riassume questo come segue (notare i colori sulla Waterfall)

DevTools_summary
Ovvero un tempo totale di 4.47s, 1.4MB di dati trasferiti e 2.9MB di risorse scambiate in un totale di 60 richieste.

Pannello delle Performance

DevTools WordPress performance
DevTools_performance

Nella seconda parte della guida parleremo approfonditamente delle performance tentando di trovare delle soluzioni per migliorare le prestazioni del nostro sito.

Inoltre spiegheremo i restanti pannelli della memoria, dell’applicazione e della sicurezza.

Leggi anche:

    1. WordPress Lento? Aggiorna PHP

    2. Ottimizza le foto in WordPress
    3. WordPress REST API

    4. Pacchetti wordpressolutions.it

    5. Content Marketing con WordPress

    6. Area Privata con WordPress

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *