Questa guida è stata creata da David Fern, Social Security Administration

Utilizzo JavaScript, utilizzo CSS, dimensionamento di immagini e risorse, caching/utilizzo della rete e pop-up. Queste sono le migliori pratiche che i siti web governativi più visitati dovrebbero concentrarsi su al fine di essere più mobile-friendly. Ma come si può lavorare su ciascuna di queste aree per contribuire a garantire il vostro sito web mantiene gli utenti mobili felici e tornare?

Per sei mesi, dal 22 settembre 2017 al 22 marzo 2018, il Federal Crowdsource Mobile Testing Program ha testato i 26 siti Web del governo federale degli Stati Uniti più visitati sui dispositivi mobili (smartphone e tablet) utilizzando sette strumenti di test automatizzati per dispositivi mobili. I risultati hanno indicato che queste erano le pratiche comuni che rendono questi siti non come mobile-friendly come un utente potrebbe aspettarsi o desidera in un’esperienza mobile. La maggior parte di queste aree non riguardano direttamente i problemi di usabilità, ma riguardano invece il modo in cui il sito è costruito (il che può portare a prestazioni scadenti). Per ulteriori informazioni su come abbiamo condotto i test, vedere la sezione Metodologia alla fine.

Le informazioni qui delinea le prime cinque pratiche che abbiamo trovato in questi siti:

  1. Ottimizzare JavaScript
  • JavaScript Posizionamento
  • JavaScript Minify
  • Non Utilizzare JavaScript Inline
  • Ottimizzare i CSS
    • Evitare di Assoluta Dimensioni e Posizioni Direttive CSS
    • Usare i fogli di stile per Separare la memorizzazione nella Cache di CSS dal Contenuto
    • Combina CSS Attività in Sprite File
  • Ottimizzare le Immagini
    • Pagina limite di Dimensione e Peso
    • Abilitare la Compressione delle Risorse
    • Ottimizzare le Immagini
    • Specificare le Dimensioni dell’Immagine
  • Utilizza la cache
    • Sfrutta la cache del browser
    • Combina più file per migliorare le prestazioni
  • Evita i pop-up
  • Tieni presente che se un sito Web viene sviluppato utilizzando un content Management system (CMS) o un framework di sviluppo, non tutte queste impostazioni potrebbero essere configurabili. Tuttavia, suggeriamo agli sviluppatori di ricercare le capacità del sistema per determinare se possono essere. Alcune di queste raccomandazioni possono verificarsi nel livello del server Web, che può essere separato dal codice del programma.

    Ottimizzare JavaScript

    Il problema più comune trovato è l’uso di JavaScript. JavaScript viene utilizzato su molte applicazioni desktop e mobili perché estende la funzionalità delle pagine web, è un linguaggio relativamente facile da imparare e utilizzare, ed esegue in tempi relativamente brevi sul lato client. Tuttavia, se JavaScript non viene inserito ed eseguito da una posizione ottimale nel codice, non minimizzato, né utilizzato in linea, potrebbe influire negativamente sulle prestazioni dell’applicazione sui dispositivi mobili che dispongono tradizionalmente di risorse minime.

    Posizionamento JavaScript

    Problema: il raggruppamento di JavaScript alla fine del markup della pagina è ottimale per il caricamento della pagina. Quando la specifica HTTP inserisce JavaScript altrove nella pagina (ad esempio in alto), ciò potrebbe comportare il caricamento del blocco mentre i file JavaScript vengono scaricati. Inoltre, prima che il browser possa rendere una pagina, deve costruire l’albero DOM analizzando il markup HTML. Ogni volta che il parser incontra uno script, si ferma ed esegue lo script prima di continuare l’analisi. Questo rallenta le prestazioni del caricamento della pagina.

    Soluzione – inserisci gli script nel tag <head> e usa gli attributi async o defer, che consentono di scaricare gli script al più presto senza bloccare il browser.

    Gli script con l’attributo async vengono eseguiti in modo asincrono. Ciò significa che lo script viene eseguito non appena viene scaricato—senza bloccare il browser nel frattempo—e che il secondo script può essere scaricato ed eseguito prima del primo script.

    Gli script con l’attributo defer vengono eseguiti in ordine (cioè, prima script uno, poi script due). Anche questo non blocca il browser. A differenza degli script async, gli script defer vengono eseguiti solo dopo il caricamento dell’intero documento.

    • Posizionamento Fixit – JavaScript| https://mobiforge.com/design-development/fixit-javascript-placement
    • Rimuovere il blocco del rendering JavaScript| https://developers.google.com/speed/docs/insights/BlockingJS
    • Ridurre le dimensioni del contenuto sopra la piega| https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
    • Dove dovrei mettere i tag <script> nel markup HTML? | http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

    JavaScript Minify

    Problema-I file JavaScript devono essere sempre ridotti al minimo per ridurre i tempi di transito e accelerare il caricamento della pagina.

    Solution – Minification rimuove i dati non necessari o ridondanti senza influire sul modo in cui la risorsa viene elaborata dal browser. Lo strumento IDE (Integrated Developer Environment) utilizzato per sviluppare il sito può includere funzionalità che minimizzano il JavaScript durante il processo di compilazione. Puoi farlo anche con gli strumenti di chiusura di Google, incluso il compilatore di chiusura, un ottimizzatore che riscrive il tuo codice e riduce al minimo lo spazio morto per renderlo più veloce. È tipico minimizzare solo nell’ambiente di produzione, poiché la risoluzione dei problemi e il debug negli ambienti di sviluppo saranno più semplici con JavaScript non minificato.

    • Minify Risorse (HTML, CSS, e JavaScript) | https://developers.google.com/speed/docs/insights/MinifyResources
    • Come Minimizzare i Siti web CSS, HTML & JavaScript| https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

    Non Utilizzare JavaScript Inline

    Problema in linea di codice JavaScript non deve essere utilizzato perché è necessario che il browser passare il codice JavaScript di markup che rallenta l’elaborazione.

    Soluzione-sposta tutto il codice JavaScript in un singolo file minificato, che fornisce una separazione pulita di markup, stile e codice. Questo può anche essere ottenuto abilitando il filtro “JavaScript in linea” nei server Web Apache e Nginx.

    • Fixit-JavaScript in linea| https://mobiforge.com/design-development/fixit-inline-javascript
    • JavaScript incorporato| https://modpagespeed.com/doc/filter-js-inline
    • Perché il codice CSS e JavaScript in linea è una cosa così negativa| https://dzone.com/articles/why-inline-css-and-javascript-

    Risorse:

    • JavaScript: Vantaggi e svantaggi http://www.jscripters.com/javascript-advantages-and-disadvantages/

    Ottimizzare CSS

    Cascading Style Sheets (CSS) descrivono come gli elementi HTML devono essere visualizzati sullo schermo, può risparmiare un sacco di lavoro, e in grado di controllare il layout di più pagine web contemporaneamente.

    Tuttavia, i CSS possono aumentare il tempo di caricamento dell’applicazione se vengono specificate dimensioni e posizioni assolute nelle direttive CSS, i fogli di stile esterni non vengono utilizzati per separare il caching del CSS dal contenuto, le risorse delle immagini CSS non vengono combinate in file Sprite e/o c’è più di un tag H1 per pagina.

    Evitare dimensioni e posizioni assolute nelle direttive CSS

    Problema – Pixel e dimensioni e posizioni assolute nelle direttive CSS dovrebbero essere evitati, in quanto potrebbero non consentire al browser di adattare i contenuti per adattarsi al display o al rendering correttamente su tutti i tipi di dispositivo. Tuttavia, ci sono eccezioni a questa regola. Ad esempio, se si desidera che le immagini siano adattate per adattarsi a un particolare display, è più sensato specificare la dimensione in pixel. Inoltre, le misure dei pixel possono essere appropriate per margini, bordi e padding.

    Soluzione-Utilizzare misure relative come em, ex, bolder, larger, e thick dove possibile. Ad esempio, quando si specifica il carattere, utilizzare font-size: 1.5em invece di font-size: 12px.

    • Fixit – Misure| https://mobiforge.com/design-development/fixit-measures

    Usa fogli di stile esterni per separare il caching dei CSS dal contenuto

    Problema: i fogli di stile esterni dovrebbero essere usati per separare le istruzioni CSS dall’HTML. Questo caching CSS da un browser Web evita un altro viaggio al server e accelera il caricamento della pagina.

    Soluzione – Nella sezione <head> dell’HTML, usa il linguaggio per chiamare il file CSS esternamente, mantenendo le istruzioni CSS in un file separato dall’HTML (vedi sotto).

    <link rel="stylesheet" type="text/css" href="https://mysite.com/main.css" media="screen" title="style (screen)" />

    Avvertenza: l’utilizzo di molti fogli di stile CSS esterni può influire negativamente sulle prestazioni, quindi dovrebbero essere combinati in un unico CSS esterno.

    • CSS interno vs esterno| http://infoheap.com/internal-vs-external-css/
    • Ottimizza la consegna CSS| https://varvy.com/pagespeed/optimize-css-delivery.html

    Combina risorse di immagini CSS in file Sprite

    Problema: quando molte immagini vengono utilizzate in modo indipendente, richiede diverse richieste di rete per scaricarle ciascuna. Gli sprite CSS combinano più immagini in un unico file di immagine da utilizzare su un sito Web per accelerare la consegna e il tempo di caricamento. Il file può quindi essere tagliato usando i CSS.

    Soluzione-Puoi trovare molti strumenti per creare fogli sprite, tra cui Compass, Lemonade, SpriteMe, Fireworks CS6 e TexturePacker.

    • Fixit-Sprint immagine| https://mobiforge.com/design-development/fixit-image-sprites
    • Sprite CSS: cosa sono, perché sono fantastici e come usarli| https://css-tricks.com/css-sprites/
    • Fogli Sprite CSS: best practice, strumenti e applicazioni utili| https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications–webdesign-8340

    Risorse

    • Che cos’è il CSS? | https://www.w3schools.com/css/css_intro.asp

    Ottimizza le immagini

    Il peso della pagina, noto anche come “la gravità del Web”, riduce le prestazioni dell’applicazione aumentando il tempo di caricamento e riducendo l’utilizzo dei dati di rete. Comprendere il peso della pagina, la compressione delle risorse, l’ottimizzazione delle immagini e le dimensioni dell’immagine è fondamentale per una strategia Web di successo.

    Limita le dimensioni e il peso della pagina

    Problema: la dimensione totale del file della pagina, inclusi i file dipendenti, influirà sul tempo di caricamento e sul tempo necessario per valutare un crawler mobile. Le pagine pulite e leggere sono le migliori per il SEO mobile; i motori di ricerca mobili preferiranno classificare queste pagine. Sforzati di mantenere la dimensione del file di tutte le pagine mobili al di sotto di 25 kilobyte. Questa è la dimensione massima del file che l’iPhone memorizzerà nella cache per qualsiasi elemento scaricato.

    Soluzione-Esistono molti modi per ridurre il peso della pagina, tra cui l’ottimizzazione delle immagini, la compressione gzip, la minimizzazione, il caching, JavaScript e il consolidamento CSS. Altre soluzioni includono evitare quanto segue: incorpora e include, framework JavaScript e CSS, font personalizzati e confusione di pagine non necessaria. La soluzione migliore dipende dalle specifiche del tuo sito.

    • Fixit – Pagina Limite di Dimensione| https://mobiforge.com/design-development/fixit-page-size-limit
    • Comprendere il Peso della Pagina| https://mobiforge.com/research-analysis/understanding-web-page-weight
    • Ridurre il Peso della Pagina| https://mobiforge.com/design-development/reducing-page-weight

    Abilitare la Compressione delle Risorse

    Problema – la Compressione delle risorse con gzip o Deflate può ridurre il numero di byte inviati attraverso la rete.

    Soluzione-La maggior parte dei server può essere configurata per utilizzare la compressione gzip. Ad esempio, è possibile abilitare la compressione gzip su un server Apache utilizzando il file di configurazione .htaccess. Puoi anche usare mod_gzip per abilitare la compressione gzip e mod_deflate per comprimere l’output dal tuo server prima di inviarlo al tuo visitatore. Se il sito è ospitato su un server Windows, è possibile abilitare la compressione per i file statici e dinamici selezionando “Abilita compressione statica” nella gestione IIS (Internet Information Services).

    • Abilita compressione| https://developers.google.com/speed/docs/insights/EnableCompression
    • Abilita compressione gzip| https://varvy.com/pagespeed/enable-compression.html
    • Come abilitare la compressione gzip| https://www.giftofspeed.com/enable-gzip-compression/

    Ottimizzare le immagini

    Problema-Le immagini sulla pagina devono essere ottimizzate per ridurre le dimensioni del file senza influire in modo significativo sulla qualità visiva. La formattazione e la compressione delle immagini possono salvare molti byte di dati.

    Soluzione-Usa le app di compressione delle immagini per ridurre facilmente le dimensioni del file delle immagini. Questi strumenti rimuovono i dati nascosti nel file immagine, come profili colore e metadati aggiuntivi (ad es., geolocalizzazione di dove la fotografia è stata presa), che non sono necessari. Essi forniscono un modo semplice e veloce per ridurre le dimensioni dei file senza perdere alcuna qualità dell’immagine. Strumenti di compressione delle immagini includono TinyJPG, Compressor.io, Kraken, ImageOptimizer, ImageOptim, Crush Pics, e Minifier (Shopify Apps).

    • Ottimizza le immagini| https://developers.google.com/speed/docs/insights/OptimizeImages
    • Fixit-Crunch immagine| https://mobiforge.com/design-development/fixit-image-crunch
    • Ottimizzazione delle immagini per il Web: Una guida pratica| https://www.abetterlemonadestand.com/optimizing-images-for-web/
    • Come ottimizzare le immagini per il tuo sito Web WordPress| https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website

    Specificare le dimensioni dell’immagine

    Problema: le dimensioni dell’immagine devono essere sempre incluse e le immagini non devono essere ricampionate in fase di esecuzione, poiché ciò rallenterà il rendering della pagina. Quando le immagini vengono referenziate dall’interno del markup, è necessario elencare le loro dimensioni di visualizzazione per il browser. Specificare una larghezza e un’altezza per tutte le immagini consente un rendering più rapido eliminando la necessità di riflussi e ridipinture non necessari.

    Soluzione – Specificare la larghezza e l’altezza dell’immagine includendo gli attributi width e height quando si utilizza l’elemento img (vedere sotto).

    <img src="images/clown.jpg" width="50" height="50" />

    Se non sono specificate dimensioni nel documento contenente, o se le dimensioni specificate non corrispondono a quelle delle immagini reali, il browser richiederà un reflow e ridipingere una volta scaricate le immagini. Per evitare il riflusso, specificare la larghezza e l’altezza di tutte le immagini nel tag HTML <img> o in CSS.

    • Fixit-Specifica le dimensioni dell’immagine| https://mobiforge.com/design-development/fixit-specify-image-sizes
    • Specificare le dimensioni dell’immagine| https://gtmetrix.com/specify-image-dimensions.html

    Utilizzare il caching

    Riducendo il numero di volte in cui le richieste delle applicazioni e le risorse dei processi miglioreranno il tempo di caricamento e ridurranno l’utilizzo dei dati di rete. È possibile farlo in due modi: caching locale o riducendo al minimo l’uso di script e oggetti esterni.

    Sfrutta la cache del browser

    Il recupero delle risorse tramite la rete è lento e costoso e il download potrebbe richiedere più round – trip tra client e server, il che ritarda l’elaborazione e potrebbe bloccare il rendering del contenuto della pagina. Ciò può anche comportare costi di dati per il visitatore. Tutte le risposte del server devono specificare un criterio di memorizzazione nella cache per aiutare il client a determinare se e quando è possibile riutilizzare una risposta precedentemente recuperata.

    Soluzione-Sfrutta la cache del browser modificando le intestazioni delle richieste delle risorse per utilizzare la cache. È possibile aggiungere del codice al file di configurazione .htaccess sull’host/server Web o utilizzare l’intestazione HTTP Cache-Control di base (vedere sotto).

    Cache-Control: max-age=2592000, public
    • Sfrutta la cache del browser| https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
    • Fixit-Memorizzazione nella cache| https://mobiforge.com/design-development/fixit-caching
    • Sfrutta la cache del browser| https://varvy.com/pagespeed/leverage-browser-caching.html
    • Che cosa è .htaccess? | http://www.htaccess-guide.com/
    • Cache-Controllo| https://varvy.com/pagespeed/cache-control.html

    Combinare più file per migliorare le prestazioni

    Problema: ogni oggetto esterno scaricato in una pagina richiede una richiesta DNS (Domain Name Server) separata. Questo non è un grosso problema su un computer tradizionale con una connessione veloce, ma su reti mobili più lente può causare latenza. Ciò danneggerà le prestazioni dell’applicazione e il tempo di caricamento.

    Soluzione-Ridurre il numero e la dimensione delle risorse necessarie per il sito. Tuttavia, se ciò non è possibile, combinare tutti i file CSS esterni in un unico foglio di stile o tutti i file JavaScript in un unico file di grandi dimensioni per ridurre il numero di chiamate al browser.

    • Applicazione Mobile Web Best Practices – Ridurre al minimo le Risorse Esterne| https://varvy.com/pagespeed/cache-control.html
    • Come Ridurre le richieste HTTP per velocizzare il Tuo Sito WordPress| https://yoast.com/reduce-http-requests-wordpress/
    • semplici Passi per Migliorare i Tempi di Caricamento della Pagina| http://www.peachpit.com/articles/article.aspx?p=1431494&seqNum=5

    Evitare i Pop-up

    L’uso di pop-up che non è necessariamente un male di un’applicazione desktop. Tuttavia, se l’applicazione utilizza responsive design o viene utilizzata su un’applicazione mobile, i pop-up spesso ostruiscono e danneggiano l’esperienza dell’utente. Attirano l’attenzione dell’utente dalla pagina al pop-up e l’utente inesperto diventa rapidamente confuso e frustrato.

    Pop-up

    Problema – Le finestre pop-up non sono supportate su molti dispositivi mobili e il loro utilizzo può avere risultati imprevedibili

    Soluzione – Ci sono molte alternative ai pop-up visibili senza occupare l’intera finestra, come lightbox, espansione in linea e banner pubblicitari fissi.

    • Fixit – Finestre a comparsa| https://mobiforge.com/design-development/fixit-pop-windows
    • La morte di Mobile Pop-Up e cosa si può fare invece| http://searchengineland.com/death-mobile-pop-ups-can-instead-263390
    • Google è il giro di vite su intrusivi Pop-up mobili: Ecco cosa marketing hanno bisogno di sapere| https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf
    • Qual è la migliore alternativa a un pop-up? | https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up
    • 5 Regole UX essenziali per la progettazione di finestre di dialogo| https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116
    • 9 Alternative non così intrusive per Hover annunci pop-up| https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius

    La nostra metodologia per questo studio

    Abbiamo utilizzato i seguenti passaggi per condurre questo studio:

    1. Utilizzando le statistiche del programma di analisi digitale (DAP), abbiamo estratto i nomi dei primi 26 siti Web del governo federale degli Stati Uniti accessibili da dispositivi mobili.
    2. Abbiamo testato ogni sito utilizzando sette strumenti di test automatizzati per dispositivi mobili:
      • Google Mobile-Friendly Test| https://www.google.com/webmasters/tools/mobile-friendly/
      • Mobile Moxie| https://www.mobilemoxie.com/tools/site_analysis/
      • Mobi Pronto| http://ready.mobi/
      • Pagina Approfondimenti| https://developers.google.com/speed/pagespeed/insights/
      • W3C MobileOK Correttore| https://validator.w3.org/mobile/
      • Varvy SEO tool| https://varvy.com/
      • Gtmetrix – https://gtmetrix.com/
    3. Dopo aver guardato il fallito criteri indicati da ogni strumento, abbiamo compilato i risultati in un unico foglio di calcolo Microsoft Excel.
    4. Abbiamo raggruppato i problemi che abbiamo trovato su 15 o più siti nelle cinque categorie trattate in questa guida, che sono elencate in ordine di maggior numero di occorrenze (JavaScript) a meno occorrenze (pop-up).

    Articles

    Lascia un commento

    Il tuo indirizzo email non sarà pubblicato.