Nuove ottimizzazioni per i moduli di PageSpeed (in versione beta)

Di - 19 November 2013 - in
Post image for Nuove ottimizzazioni per i moduli di PageSpeed (in versione beta)

Continuano gli sviluppi del PageSpeed Team in grado di migliorare le performance delle nostre pagine web rendendole oggi fino a due volte più veloci, in particolar modo sui dispositivi mobili.
Vogliamo quindi parlarvi di queste nuove ottimizzazioni afferenti entrambi i moduli mod_pagespeed ed ngx_pagespeed, rispettivamente per i webServer Apache ed Nginx, che vanno ad aggiungersi a quelle già esistenti e che richiamiamo alla memoria:

  • defer_javascript previene che gli script javascript vengano eseguiti prima che la pagina sia stata caricata;
  • convert_jpeg_to_webp abilita la conversione, ed in seguito il download, delle immagini jpeg in webp (WebP), per i browser che le supportano.

Quest’incremento di velocità arriva grazie alle seguenti ottimizzazioni:

  • prioritize_critical_css effettua il parsing del CSS e lo rimpiazza con un CSS inline contenente solamente le regole che vengono usate nella pagina. Ciò evita il caricamento di quelle che non sono necessarie per il rendering iniziale, ritardandone appunto il download, e permettendo quindi al browser di effettuare prima il rendering della pagina. Le restanti regole vengono poi rese disponibili dopo il caricamento della pagina nell’ordine in cui erano state trovate.
    Un’applicazione di questo riscrittore è dato dal seguente esempio.
    Dato un siffatto file HTML:

    <html>
      <head>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <div class="red">Hello world!</div>
      </body>
    </html>

    ed il relativo style.css:

    .yellow {background-color: yellow;}
    .red {color: red;}
    .big {font-size: 8em;}
    .bold {font-weight: bold;}

    PageSpeed riscriverà, quindi, la pagina HTML in questo modo:

    <html>
      <head>
        <style>
          .red {color: red;}
        </style>
        </head>
      <body>
        <div class="red">Hello, world!</div>
      </body>
    </html>
    <noscript><link rel="stylesheet" href="style.css"></noscript>
  • lazyload_images e inline_preview_images si occupano della gestione delle immagini.
    Il primo riscrittore ne ritarda il caricamento fin quando non sono necessarie. Aggancia quindi alla pagina un handler “onLoad” che carica le immagini quando queste divengono necessarie.
    Il secondo filtro, invece, genera delle versioni di bassa qualità di tutte quelle immagini che sono nella pagina HTML. Queste vengono poi rimpiazzate da quelle originali non appena viene innescato l’evento “onLoad”.
    In questo modo gli utenti possono sperimentare il rendering della pagina più velocemente.

Abilitare le ottimizzazioni

Se utilizzate Apache webServer effettuate il download e l’installazione dell’ultima versione beta ed aggiungete le seguenti righe al file di configurazione:

ModPagespeedEnableFilters prioritize_critical_css,defer_javascript
ModPagespeedEnableFilters convert_jpeg_to_webp
ModPagespeedEnableFilters lazyload_images,inline_preview_images

Altrimenti, se siete utilizzatori di Nginx webServer, effettuate l’installazione degli ultimi sorgenti ed aggiungete queste righe al file di configurazione:

pagespeed EnableFilters prioritize_critical_css,defer_javascript;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters lazyload_images,inline_preview_images;

Se volete vedere i benefici di queste ottimizzazioni, lasciando inalterato il vostro file di configurazione, basta semplicemente aprire un nuovo tab o finestra del browser e concatenare all’url del vostro sito la stringa ?ModPagespeed=off

Via | Google Developers Blog

Foto | Sports Photography by Jerry Lodriguss

Leave a Reply

Fabrizio Variano Articolo scritto da

Laureato e specializzato in Informatica con il massimo dei voti, lavora come Software engineer con compiti di team leading progettando e sviluppando soluzioni in ambito web con tecnologie Java e “dintorni”.
Grande appassionato di tecnologia, negli ultimi anni si è avvicinato all’ambito mobile, sia hardware che software, con l’intento di far suo questo mondo affascinante.
Oltre a viaggiare, tra i suoi hobby ci sono: la moto, la cucina ed il cinema.

Contatta l'autore

Previous post:

Next post: