Come ottimizzare le prestazioni mobili

I migliori design bilanciano estetica e prestazioni lavorando pensando ai dispositivi mobili fin dall'inizio. Dall'impostazione di budget rigorosi per le prestazioni all'implementazione di tecniche di ottimizzazione lato client e server, condividerò gli attuali processi di ottimizzazione delle prestazioni mobili che utilizziamo in Cyber-Duck .

Diventa Mobile Minded

Le prestazioni sono una parte fondamentale dell'esperienza utente, quindi non possono essere un ripensamento alla fine del processo di sviluppo. È preferibile gestire i progetti attraverso una struttura mobile , con designer e sviluppatori che collaborano sin dall'inizio.

Revisione collaborativa

Per ogni progetto, rivedere l'ambito di progettazione e sviluppo con il team interno e definire gli obiettivi degli indicatori chiave di prestazione (KPI). Queste sono le metriche cardine che indicano il successo del progetto, in base agli obiettivi di business. Data la loro importanza, gli obiettivi relativi alle prestazioni dovrebbero apparire qui.

Non firmare tappe significative del progetto (come la direzione artistica e i wireframe) con le parti interessate fino a quando l'intero team interno non avrà esaminato l'output. In caso contrario, abbiamo scoperto che gli sviluppatori possono richiedere modifiche del design (per ridurre le dimensioni della pagina) durante l'implementazione. Con i progetti già firmati, le modifiche in questa fase possono creare complicazioni, aprendo ulteriori giri di approvazione dei clienti. Quando gli sviluppatori sono coinvolti fin dall'inizio, possono stimare la dimensione e la potenza di programmazione richiesta per le interfacce ed evitarlo.

Budget delle prestazioni

Il modo migliore per entrare nella mentalità mobile è impostare e aderire a un budget di prestazioni rigoroso : stabilire un obiettivo per la velocità e le dimensioni del sito Web finale. Quando il team sta lavorando per un chiaro obiettivo ad alte prestazioni, deve scegliere se implementare funzionalità costose come i caroselli.

Gli obiettivi aziendali specifici e i requisiti degli utenti determinano se impostiamo budget di prestazioni basati su cifre. Ad esempio, il rinnovamento del nostro sito Web mirava a migliorare notevolmente i tempi di caricamento su tutti i dispositivi e aumentare le conversioni da dispositivi mobili. Impostiamo limiti rigorosi di non più di 40 richieste HTTP o 500 KB di dati per dispositivi mobili. I dati di Google Analytics possono indicare quali obiettivi selezionare durante i rinnovamenti, poiché le interazioni storiche indicano il comportamento del tuo pubblico di destinazione.

Generalmente definiamo obiettivi per la dimensione della pagina, con un limite di 500 KB per le home page mobili. Le richieste del server sono più difficili da prevedere, quindi è meno probabile che impostiamo cifre esatte. Queste linee guida approssimative soddisfano le nostre esigenze per i progetti dei clienti. Ma Daniel Mall ha un'ottima guida pratica per aggiungere dettagli ai budget: dall'allocazione del peso per HTML e CSS, a JavaScript, immagini e caratteri web.

Tecniche di ottimizzazione

Sui dispositivi mobili, la velocità di caricamento del sito Web è determinata da fattori lato client e server. L'uso di tecniche di ottimizzazione mirate che affrontano entrambi questi fattori può aiutarti a soddisfare i budget di prestazione stabiliti per il tuo progetto.

Ottimizzazione lato client

Con un panorama mobile variegato - oltre 5.000 dispositivi smartphone unici nel 2014 - gli sviluppatori hanno un controllo significativamente inferiore sulle prestazioni dei singoli dispositivi rispetto ai fattori lato server. Quindi, l'ottimizzazione lato client è fondamentale. Le seguenti tecniche mirano a ridurre il tempo di elaborazione e la potenza richiesti dai dispositivi mobili per caricare i siti Web.

Ottimizza il codice

Molti sviluppatori cadono nella trappola di scrivere in jQuery per alimentare un sito web. Ma non esiste una cosa del genere. In effetti, stai scrivendo in JavaScript, mentre utilizzi una libreria di utili scorciatoie e funzioni. Sebbene ciò acceleri lo sviluppo, utile quando è necessario immettere rapidamente un prodotto sul mercato, può esserci un costo in termini di prestazioni. La libreria jQuery aggiunge peso e la flessibilità dei plugin (e delle funzioni) significa che spesso possono essere gonfiati.

Ecco un esempio, con JavaScript e jQuery utilizzati per la stessa funzione. Scrivere in JavaScript semplice evita di inserire un'altra libreria esterna nella tua applicazione e salverà un'altra preziosa richiesta HTTP.

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

Puoi ottimizzare ulteriormente i file CSS e JS utilizzando sistemi come Grunt o Gulp o con app di compilazione front-end come Prepos, Codekit o Hammer. Questi riducono le richieste HTTP e le dimensioni dei file eseguendo una varietà di attività: concatenare file, compilare Sass, Less o CoffeeScript, Uglify JS (comprime JavaScript) e minimizzare/comprimere file per uso di produzione.

Dai priorità above the fold

Google Pagespeed Insights (e strumenti simili) consiglia di dare la priorità alle dimensioni di caricamento e alla velocità dei contenuti above the fold. Separare prima il CSS utilizzato per rendere visibile la parte della pagina (above the fold); rimandare il caricamento del resto degli stili dopo che la pagina è stata renderizzata.

L'aggiunta del CSS superiore direttamente nell'intestazione della pagina può farlo. Tuttavia, tieni presente che questo non verrà memorizzato nella cache come il resto del file CSS, quindi deve essere limitato al contenuto chiave. Una varietà di strumenti può aiutarti a determinare il CSS da separare, inclusi Critical CSS di Scott Jehl e lo strumento Bookmarklet di Paul Kinlam.

Ottimizza le immagini

Considerando l'attuale preferenza per il design ricco, è un peccato che le immagini siano spesso colpevoli di pagine di grandi dimensioni. Ma la progettazione basata su immagini è ancora possibile se ciascuna viene ottimizzata e compressa prima e dopo l'esportazione nel formato corretto. Assicurati sempre di utilizzare il tipo di immagine appropriato. Le foto a colori pesanti funzionano meglio come file JPEG, mentre la grafica a colori piatti dovrebbe essere in PNG8. I gradienti e le icone più complesse funzionano meglio come PNG24/32 con trasparenza alfa o SVG.

Photoshop e Fireworks possono aiutarti a personalizzare i livelli di ottimizzazione in diverse aree dell'immagine. Ciò significa che il soggetto principale può rimanere di alta qualità, mentre il resto è ottimizzato per aumentare le prestazioni. Gli strumenti di compressione delle immagini senza perdita di dati come ImageOptim e TinyPNG possono ottenere il massimo dalle dimensioni del file, senza perdere la qualità dell'immagine.

Puoi anche utilizzare il nuovo elemento HTML5 <picture> e gli attributi srcset e size per le immagini. Queste due aggiunte al linguaggio ti aiutano a definire le immagini reattive direttamente nell'HTML, quindi il browser scaricherà solo l'immagine che corrisponde alla condizione specificata.

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

Tuttavia, questa tecnica dovrebbe essere utilizzata con attenzione. Solo pochi browser lo supportano: alcuni browser moderni (come Safari), browser Android e IE10/11 (e precedenti) no. Le alternative Polyfill possono far funzionare questo metodo su browser meno recenti, ma si tratta di librerie JavaScript esterne che devono essere caricate separatamente e potrebbero non valerne la pena dato che sono disponibili altre tecniche. Vale la pena considerare il tuo pubblico di destinazione e quali tecnologie utilizzeranno per vedere se è necessario il peso aggiuntivo del polyfill.

Gli URL di dati sono un'ultima opzione. Invece di collegarsi a un file immagine esterno, i dati immagine possono essere convertiti in una stringa codificata base64 (o ASCII) e incorporati direttamente nel file CSS o HTML. È disponibile un semplice strumento di conversione online. Gli URL dei dati sono utili, poiché salvano le richieste HTTP e possono trasferire file di piccole dimensioni più rapidamente. Ma, come dimostrato di seguito, la dimensione del codice incorporato è maggiore del collegamento a immagini esterne. La lunghezza aggiunta può rendere più difficile la manutenzione dei documenti HTML e CSS e le modifiche alle immagini dovranno essere ricodificate e incorporate ogni volta.

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

Automatizza l'ottimizzazione dei media CMS

L'applicazione delle tecniche di ottimizzazione degli asset della sezione precedente ci ha consentito di scegliere un design classico basato su immagini per BAM, consentendo loro di mostrare la fotografia di nuovi progetti di costruzione.

Ma dovevamo anche dare a BAM la libertà di aggiornare i contenuti senza doverci ottimizzare ogni immagine. Naturalmente, nessuna soluzione sarebbe efficace quanto l'ottimizzazione manuale, ma siamo riusciti a raggiungere un livello ragionevole di ottimizzazione automatizzata. Abbiamo riconfigurato il loro CMS Sitefinity esistente per creare flessibilità. Le opzioni standard sono state utilizzate per ridimensionare (e ottimizzare) le immagini automaticamente, adattandole al contesto di ciascuna pagina web:

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

Sitefinity può anche ridimensionare le immagini dall'URL utilizzando i parametri dell'URL e si può ottenere un rendering ancora più veloce memorizzando nella cache l'immagine ridimensionata, utilizzando la seguente opzione:

 /images/image-opt.jpg?size=480 

La maggior parte dei sistemi CMS consente un certo grado di ottimizzazione dei media. Ad esempio, puoi definire le impostazioni multimediali per garantire che gli utenti futuri aggiungano solo immagini che si adattano ai modelli del sito web. Ecco un rapido esempio da WordPress.

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

Semplifica i caratteri e le icone

I caratteri sono una parte importante dell'esperienza utente e del branding di un sito Web o di un'applicazione, ma potrebbero non essere la prima priorità per l'utente. Per questo motivo, i caratteri web possono essere un altro fattore da ottimizzare.

Rinviando il caricamento dei caratteri, il browser visualizzerà la copia in qualsiasi carattere abbia a disposizione per cominciare. Ciò significa che l'utente riceverà sempre il contenuto per primo. Il rinvio del caricamento dei caratteri può essere ottenuto separando la parte del CSS che si collega ai file dei caratteri e caricandola dopo che il resto della pagina è stato renderizzato. Si noti, tuttavia, che il testo potrebbe lampeggiare brevemente per cambiare quando viene caricato il carattere Web.

Allo stesso modo, le icone sono un'altra area da ottimizzare, poiché sono piccoli file che devono essere caricati frequentemente. Potresti anche prendere in considerazione l'utilizzo di file di font per le icone. Usa un servizio come Fontello per scegliere una varietà di icone e generare un file di font limitato alla tua selezione. Questa tecnica può creare icone vettoriali di alta qualità per tutte le risoluzioni dello schermo, con un leggero impatto sulle prestazioni.

In alternativa, gli sprite di immagini sono un'opzione ben nota. Combinano le immagini in un unico file (che utilizza una sola richiesta per il caricamento) e visualizzano solo la parte richiesta per la progettazione utilizzando la posizione dello sfondo. Paul Stamatiou descrive come questo viene fatto e delinea alcune limitazioni.

Tecnologie di caricamento

Le seguenti tecniche evitano di inviare l'intero contenuto di un sito Web ai browser mobili. Vengono invece scaricati solo i dati precisi necessari , ottimizzando per ogni punto di interruzione. La velocità di caricamento mobile è stata una considerazione chiave per il sito Web di Velocity Drive, che fornisce tecnologie per rimorchi. Le librerie JavaScript devono essere caricate a tutti i punti di interruzione, per testare le funzionalità del browser ed evitare problemi. Ma abbiamo ottimizzato attentamente le risorse per ogni punto di interruzione: la dimensione del caricamento della home page è di soli 323 KB su dispositivi mobili, salendo a 828 KB su desktop di grandi dimensioni.

Spingiti oltre con le tecniche di caricamento lento condizionale per aumentare la velocità della pagina percepita. Caricano sezioni visibili in più fasi, con contenuti chiave posizionati above the fold. Gli elementi costosi (come le immagini) trovati verso la fine delle pagine non vengono caricati, a meno che l'utente non scelga di scorrere il contenuto. Questa tecnica è stata fondamentale per la sezione "Insights" del sito Web di Niu Solutions, che copre le loro innovazioni IT. Abbiamo usato un piccolo plugin jQuery chiamato jScroll per caricare altri articoli mentre l'utente scorre verso il basso. Ecco un esempio di come configurare questo plugin, che richiede semplicemente il collegamento a più contenuti:

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

Le tecnologie di precaricamento presentano ulteriori opportunità. Possono anticipare e prepararsi per la prossima mossa dell'utente caricando la pagina che probabilmente visualizzeranno in seguito prima di farlo, per fornire un'esperienza più rapida. Tuttavia, scoprire la tipica struttura del traffico è più facile quando si rinnova un sito Web esistente, poiché puoi studiare le canalizzazioni del flusso comportamentale su Google Analytics.

Migliora da un'esperienza di base

Il Responsive News della BBC si riferisce all'idea di fornire all'utente l'esperienza di base richiesta, quindi valutare l'ambiente dell'utente e migliorare l'esperienza di conseguenza . Un semplice esempio di ciò è caricare inizialmente immagini a bassa risoluzione e quindi mostrare l'alta risoluzione a seconda della larghezza di banda dell'utente.

Questa idea fa parte del miglioramento progressivo, in cui le tecnologie Web sono stratificate per fornire la migliore esperienza in tutti gli ambienti. Il miglioramento progressivo può essere basato su una serie di fattori diversi. Questi includono la tecnologia a cui un utente ha accesso, come il browser, il sistema operativo e l'ambiente (come la velocità di Internet). Qui, definisci un insieme di funzionalità di base che devono funzionare sui browser meno capaci e aggiungi ulteriore complessità solo dopo aver verificato se i browser sono in grado di gestirlo.

Rilevare se il browser può supportare le funzionalità HTML5 e CSS ci aiuta a scrivere codice condizionale per coprire tutte le eventualità: migliorare e aggiungere funzionalità quando supportate, rimanendo al contempo sicuri e semplici per dispositivi e browser che non lo fanno.

Riduci i test delle funzionalità

L'integrazione di librerie di test delle funzionalità come Modernizr o has.js è una pratica comune consigliata. Ma troppi sviluppatori implementano l'intera libreria; verificano tutte le funzionalità, anche se è necessario solo un numero limitato di risultati per determinare se aggiungere funzionalità.

Tim Kadlec riporta il tempo di analisi e di esecuzione della stessa libreria (jQuery 2.1.1 ridotto al minimo) su una vasta gamma di dispositivi. Ciò dimostra che spesso l'implementazione di queste librerie comporta un costo maggiore per le prestazioni mobili (anche tra vecchi e nuovi dispositivi) rispetto al desktop. Tendiamo a personalizzare la libreria, testando solo le funzionalità del sito Web pertinenti . Ciò farà risparmiare tempo e preziosa potenza di elaborazione mobile.

Ottimizzazione lato server

Il tempo di risposta del server è un fattore chiave per la velocità del sito Web: molti puntano a meno di 200 ms. Ma la latenza di rete (il ritardo con cui i dati si spostano tra il server e il dispositivo) è il vero collo di bottiglia per le prestazioni mobili, lasciando agli utenti mobili un'esperienza più lenta.

Ciò è influenzato dalla velocità della rete. Secondo Ofcom, le velocità medie di download sulle popolari reti 3G e 4G erano 6,1 Mbps e 15,1 Mbps nel Regno Unito. Alcuni lo interpretano come un chiaro limite alla dimensione massima del sito web. Ma la realtà è più complessa, poiché la velocità varia a seconda della copertura e del contesto ambientale. Gli utenti si connettono spesso a Edge (E) e GPRS lenti quando sono fuori portata.

Sono disponibili diverse tecniche per migliorare le prestazioni del sito Web lato server.

Memorizzazione nella cache, prerendering e contenuto statico

Le pagine Web dinamiche richiedono più query al database, impiegando tempo prezioso per elaborare l'output e formattare i dati, quindi renderizzare in HTML leggibile dal browser. Si consiglia di memorizzare nella cache il contenuto precedentemente renderizzato per quel dispositivo. Per i visitatori di ritorno, invece di elaborare da zero, controllerà la cache e invierà solo aggiornamenti.

Molti scelgono anche librerie di modelli JavaScript come Handlebars e Moustache per gestire i contenuti web. Ma l'analisi e l'esecuzione di JavaScript richiede tempo e energia. I dispositivi mobili non possono elaborare queste librerie di modelli alla stessa velocità dei computer desktop e consumare le loro risorse di elaborazione. Il rendering delle pagine completamente sul server è molto più veloce. Twitter ha optato per questo approccio già nel 2012 e ne ha spiegato il valore sul proprio blog.

Di recente, il nostro sviluppatore front-end senior ha spinto i confini di questa tecnica per il suo portfolio personale. È stato creato con il CMS Statamic basato su file, che ha appena aggiunto il supporto html_cache. Una volta implementata, questa funzione ha ridotto il tempo di caricamento medio di tutte le pagine da circa 1,8 secondi a 225 millisecondi.

Memorizzazione nella cache del browser

L'ottimizzazione granulare può semplificare il caricamento del sito Web impedendo il trasferimento regolare di file che sai non vengono aggiornati spesso. Usa un gestore del server (come un file .htaccess ) per istruire il browser su quale tipo di contenuto archiviare e per quanto tempo devono conservarne le copie. Ecco come implementare la memorizzazione nella cache del browser sul server Apache:

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

Reti di distribuzione dei contenuti (CDN)

Puoi migliorare il caricamento delle risorse utilizzando una CDN come CloudFlare insieme al tuo solito servizio di hosting. Qui, il contenuto statico (come immagini, caratteri e CSS) è archiviato su una rete di server globali. Ogni volta che un utente richiede questo contenuto, la CDN rileva la sua posizione e fornisce le risorse dal server più vicino, riducendo la latenza. Aumenta la velocità consentendo al server principale di concentrarsi sulla distribuzione dell'applicazione invece di servire file statici.

Sebbene aggiunga una spesa, utilizza una CDN dedicata per migliorare la velocità di caricamento dei siti Web ricchi di risorse . A parte la configurazione iniziale, CloudFlare non richiede la configurazione manuale; la cache viene creata e aggiornata per te, in base al traffico storico e alle risorse migliori da servire. Ma implementalo tenendo presente la futura gestione indipendente dei contenuti: assicurati che tutte le risorse caricate da un CMS siano servite in modo trasparente anche tramite la CDN.

Un CDN è stata la scelta migliore per il nostro sito Web Eurofighter Typhoon, poiché la straordinaria fotografia ad alta risoluzione degli aerei da difesa era una caratteristica cruciale per mostrare le loro capacità. Negli ultimi 30 giorni, i rapporti indicano che CloudFlare ha risparmiato il 76% delle richieste e il 48% della larghezza di banda, aumentando la velocità del sito Web ricco di immagini.

Test

Non ci sono sostituzioni per i test durante la produzione. Cerca di utilizzare vari strumenti per testare il lavoro in corso simulando l'esperienza mobile e diagnosticando potenziali problemi di prestazioni.

Man mano che la produzione procede, tieni sempre d'occhio i numeri: dalla garanzia che le risorse di progettazione siano generate ed esportate correttamente, al controllo delle dimensioni del file di paging e della quantità di richieste HTTP tramite gli strumenti di sviluppo sul tuo browser. Qui, la scheda Rete offre una panoramica completa delle risorse caricate, della dimensione totale del file e del tempo di rendering:

Nota le linee verticali blu e rosse a destra della timeline in Chrome Inspector sopra. Questi rappresentano rispettivamente gli eventi DOM Ready e Page Load. Nella parte inferiore della finestra, mostra la quantità di richieste HTTP e la dimensione totale del file caricata al punto di interruzione corrente.

Altri strumenti includono:

• WebPagetest offre un'ampia varietà di opzioni per testare gli URL live: dalla scelta di qualsiasi posizione nel mondo, alla definizione di velocità e latenza di connessione 3G e 4G specifiche. Puoi anche sperimentare come viene caricato il sito Web per questi utenti, attraverso la visualizzazione della sequenza di filmati e il video.
• Pagespeed Insights di Google è uno strumento introduttivo più visivo per analizzare la velocità della pagina. Suddivide i risultati in desktop o dispositivi mobili e suggerisce tecniche per migliorare aree mirate del tuo sito: indicando risorse da memorizzare nella cache o immagini da ottimizzare.

Prova su dispositivi reali

Ma non fare affidamento solo sui simulatori. Testiamo anche i progetti durante la produzione su una varietà di dispositivi mobili reali.

Crea il tuo laboratorio per dispositivi o usa OpenDeviceLabs. Idealmente, avere un'idea della reale esperienza dell'utente evitando il potente Wi-Fi dell'ufficio. Crea un sito di prova in un server web (idealmente lo stesso del server live) a cui puoi accedere dall'esterno della rete dell'ufficio. Quindi, prova mentre sei in movimento in ambienti tipici come un bar o un hotel affollati, su una connessione di rete.

Riepilogo prestazioni mobili

Soprattutto, mira a creare un sito Web in grado di bilanciare estetica e prestazioni su dispositivi mobili e ottenere metriche di conversione reali. Un processo di ottimizzazione delle prestazioni collaborativo e iterativo ti aiuterà a raggiungere questo obiettivo.

Fin dall'inizio del progetto, incoraggia il team interno a lavorare insieme con una mentalità mobile, stabilendo un budget rigoroso per le prestazioni . Acquisisci una comprensione dei fattori lato client e server che determinano le prestazioni del sito Web su dispositivi mobili. Quindi puoi raggiungere l'obiettivo prefissato implementando una combinazione delle tecniche di ottimizzazione mirata che ho descritto. Naturalmente, c'è ancora un compromesso tra avere un design sorprendente, prestazioni elevate e sicurezza in alcuni casi; un team di progettazione e sviluppo collaborativo può decidere cosa è meglio per l'azienda, verificando con i project manager e le parti interessate pertinenti.

Il nostro progetto di ottimizzazione per una consulenza tecnologica globale dimostra come queste tecniche possono combinarsi per migliorare significativamente la velocità e le dimensioni di carico. Il progetto prevedeva la memorizzazione nella cache di modelli e pagine, l'ottimizzazione di risorse e caratteri e la riduzione dei test delle funzionalità, tra le altre tecniche. Finora, i test dimostrano che il rendering e il tempo di caricamento totale sono stati ridotti a meno di 1,4 secondi, da quasi 4 secondi prima dell'inizio del lavoro; allo stesso modo, la dimensione del file è stata ridotta a 1 MB da oltre 3 MB.

Ulteriori letture su SmashingMag:

• Elenco di controllo delle prestazioni front-end 2017
• Prepararsi per HTTP/2
• Tutto quello che devi sapere su AMP
• I (non così) poteri segreti del browser mobile