Google PageSpeed Insights è uno degli strumenti di misurazione della performance web più utilizzati al mondo: i suoi suggerimenti possono darti degli indizi preziosi per migliorare le prestazioni del tuo sito. Peccato che il suo sistema di “punteggi e semafori“ tenda a far trarre conclusioni affrettate sullo stato di salute di un sito web.

1. Perché chiedere a PageSpeed
se il tuo sito è veloce
NON è una buona idea
WordCamp Bari - 18 maggio 2019Alice Orrù

2. Ciao!
Sono Alice Orrù 👋
Scrivo di web performance per WP Rocket, un
plugin di cache per WordPress.
Mi trovi su Twitter come @Alice_Ridice
2

3. 3
Qual è il più veloce?
1
2

4. PageSpeed Insights è
4
▰ Uno strumento di audit
▰ Misura diverse metriche di
performance web
▰ Usa Lighthouse per assegnare
un punteggio di performance
From Alberto Medina
https://developers.google.com/speed/pagespeed/insights/?hl=en

5. Lighthouse
5 Fonte: developers.google.com
Ora integrato in PageSpeed,
ma si può lanciare anche
autonomamente
dal Dev Tools o tramite
estensione Chrome

6. Page speed
6
PageSpeed
(strumento di audit)
(fattore ranking SEO)

7. < 3 sec.
Velocità di caricamento
< 50
Richieste HTTP
< 1,3 sec.
Time To First Byte
7
Un sito mobile veloce:
< 500 Kb
Peso medio di pagina
Fonte: Think With Google

8. 8 Fonte: Think With Google
Bounce rate:

9. Come leggere il report
PageSpeed
9
Punteggio totale:
il famigerato
“PageSpeed score“
Field Data
Lab Data

10. PageSpeed:
Field Data
10

11. “
The Chrome User Experience Report is powered by real user
measurement of key user experience metrics across the public web,
aggregated from users who have opted-in to syncing their browsing
history, have not set up a Sync passphrase, and have usage statistic
reporting enabled.
Fonte:
https://developers.google.com/web/tools/chrome-user-experience-report/#methodology
11

12. PageSpeed:
Field Data
12

13. PageSpeed:
Lab Data
13
Dettagli sulle singole metriche: https://developers.google.com/web/tools/lighthouse/

14. PageSpeed:
3 punti chiave
Connessione 3G
Simulazione di una
connessione mobile di
media velocità.
Location server N/P
Non sappiamo dove si
trova il server che
PageSpeed usa per i test.
Mobile medio livello
Come ad esempio un
Motorola G4.
14

15. La posizione geografica è importante!
Il mio sito
15

16. I suggerimenti di
PageSpeed
16

17. I suggerimenti di
PageSpeed
17

18. PageSpeed:
5 suggerimenti utili
18
1. Attiva la compressione GZIP (Enable Text Compression)
2. Attiva cache del browser (Serve static assets with an efficient
cache policy)
3. Minifica file CSS e JS
4. Riduci il tempo di risposta del server (Reduce server
response time)
5. Ottimizza le immagini
...per migliorare il tempo di caricamento del tuo sito:

19. 19
Qual è il più veloce?
1
2
2,70s
0,46s
Tempo di
caricamento:

20. 20
Qual è il più veloce?
1
2

21. Alternative e/o
Complementi
21 https://gtmetrix.com/https://tools.pingdom.com

22. Grazie!
22
Domande?
▰ @Alice_Ridice
▰ alice@wp-media.me

23. Risorse
23
1. Dettagli Lighthouse: https://developers.google.com/web/tools/lighthouse/
2. Benchmark velocità mobile:
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-p
age-speed-new-industry-benchmarks/
3. Chrome User Experience Report:
https://developers.google.com/web/tools/chrome-user-experience-report/
4. Dettagli sulle metriche di performance:
https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint
5. PageSpeed powered by LighThouse (articolo sul blog di WP Rocket):
https://wp-rocket.me/blog/pagespeed-insights-lighthouse-how-to-read-the-new-repo
rt/