Cum să optimizați performanța mobilă

Cele mai bune modele echilibrează estetica și performanța lucrând cu dispozitivul mobil încă de la început. De la stabilirea de bugete stricte de performanță până la implementarea tehnicilor de optimizare la nivel de client și server, voi împărtăși procesele actuale de optimizare a performanței mobile pe care le folosim la Cyber-Duck .

Deveniți mobil

Performanța este o parte cheie a experienței utilizatorului, așa că nu poate fi o idee ulterioară la sfârșitul procesului de dezvoltare. Este de preferat să gestionați proiecte printr-o structură orientată spre mobil , cu designeri și dezvoltatori colaborând de la început.

Revizuire în colaborare

Pentru fiecare proiect, revizuiți sfera de proiectare și dezvoltare împreună cu echipa internă și definiți obiectivele indicatorului cheie de performanță (KPI). Acestea sunt valorile de referință care indică succesul proiectului, pe baza obiectivelor de afaceri. Având în vedere importanța lor, obiectivele legate de performanță ar trebui să apară aici.

Nu semnați etapele importante ale proiectului (cum ar fi direcția artistică și wireframes) cu părțile interesate până când întreaga echipă internă nu a analizat rezultatul. În caz contrar, am descoperit că dezvoltatorii pot solicita ajustări de design (pentru a reduce dimensiunea paginii) în timpul implementării. Cu proiectele deja aprobate, modificările în această etapă pot crea complicații, deschizând runde ulterioare de aprobări ale clienților. Când dezvoltatorii sunt implicați de la început, ei pot estima dimensiunea și puterea de programare necesare pentru interfețe și pot evita acest lucru.

Bugetele de performanță

Cel mai bun mod de a intra în mentalitatea mobilă este stabilirea și respectarea unui buget strict de performanță : stabilirea unui obiectiv pentru viteza și dimensiunea site-ului final. Atunci când echipa lucrează la un obiectiv clar de înaltă performanță, trebuie să aleagă dacă implementează funcții costisitoare, cum ar fi carusele.

Obiectivele de afaceri specifice și cerințele utilizatorilor determină dacă stabilim bugete de performanță bazate pe cifre. De exemplu, propriul nostru site web a avut ca scop îmbunătățirea dramatică a timpilor de încărcare pe dispozitive și creșterea conversiilor mobile. Am stabilit limite stricte de cel mult 40 de solicitări HTTP sau 500 KB de date pentru mobil. Datele Google Analytics pot informa ce obiective să fie selectate în timpul renovărilor, deoarece interacțiunile istorice indică comportamentul publicului țintă.

În general, definim obiective pentru dimensiunea paginii, cu o limită de 500 KB pentru paginile de pornire mobile. Solicitările serverului sunt mai greu de anticipat, așa că este mai puțin probabil să stabilim cifre exacte. Aceste linii directoare se potrivesc nevoilor noastre pentru proiectele clienților. Dar Daniel Mall are un ghid practic excelent pentru adăugarea de detalii la bugete: de la alocarea ponderii pentru HTML și CSS, la JavaScript, imagini și fonturi web.

Tehnici de optimizare

Pe dispozitivele mobile, viteza de încărcare a site-ului web este determinată de factori de la nivelul clientului și al serverului. Utilizarea tehnicilor de optimizare direcționate care abordează ambii acești factori vă poate ajuta să îndepliniți bugetele de performanță stabilite pentru proiectul dvs.

Optimizare la nivelul clientului

Cu un peisaj mobil variat – peste 5.000 de dispozitive smartphone unice în 2014 – dezvoltatorii au un control semnificativ mai mic asupra performanței dispozitivului individual decât factorii de pe partea serverului. Deci, optimizarea la nivelul clientului este crucială. Următoarele tehnici urmăresc să reducă timpul și puterea de procesare necesare dispozitivelor mobile pentru a încărca site-urile web.

Optimizați codul

Mulți dezvoltatori cad în capcana scrierii în jQuery pentru a alimenta un site web. Dar nu există așa ceva. De fapt, scrieți în JavaScript, în timp ce utilizați o bibliotecă de comenzi rapide și funcții utile. Deși acest lucru accelerează dezvoltarea – util, atunci când trebuie să scoateți rapid un produs pe piață – poate exista un cost de performanță. Biblioteca jQuery adaugă greutate, iar flexibilitatea pluginurilor (și funcțiilor) înseamnă că acestea pot fi adesea umflate.

Iată un exemplu, cu JavaScript și jQuery folosite pentru aceeași funcție. Scrierea în JavaScript simplu evită introducerea unei alte biblioteci externe în aplicația dvs. și va salva o altă solicitare HTTP prețioasă.

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

Puteți optimiza fișierele CSS și JS în continuare utilizând sisteme precum Grunt sau Gulp sau cu aplicații de compilare front-end precum Prepos, Codekit sau Hammer. Acestea reduc cererile HTTP și dimensiunea fișierului prin efectuarea unei varietăți de sarcini: concatenarea fișierelor, compilarea Sass, Less sau CoffeeScript, Uglify JS (comprimă JavaScript) și minimizarea/comprimarea fișierelor pentru utilizare în producție.

Prioritizează deasupra pliului

Google Pagespeed Insights (și instrumente similare) recomandă prioritizarea dimensiunii și vitezei de încărcare a conținutului deasupra pliului. Separați mai întâi CSS-ul folosit pentru a reda partea vizibilă a paginii (de deasupra pliului); amână încărcarea restului stilurilor după ce pagina a fost redată.

Adăugarea CSS-ului de sus direct în antetul paginii poate face acest lucru. Dar, rețineți că acest lucru nu va fi stocat în cache ca restul fișierului CSS, așa că trebuie limitat la conținutul cheie. O varietate de instrumente vă pot ajuta să determinați CSS-ul de separat, inclusiv CSS critic al lui Scott Jehl și instrumentul Bookmarklet al lui Paul Kinlam.

Optimizați imaginile

Având în vedere preferința actuală pentru design bogat, este regretabil că imaginile sunt adesea vinovate de dimensiunea mare a paginii. Dar designul bazat pe imagini este încă posibil dacă fiecare este optimizat și comprimat înainte și după export în formatul potrivit. Asigurați-vă întotdeauna că utilizați tipul de imagine adecvat. Fotografiile cu culori intense funcționează mai bine ca fișiere JPEG, în timp ce graficele color plate ar trebui să fie în PNG8. Gradientele și pictogramele mai complexe funcționează cel mai bine ca PNG24/32 cu transparență alfa sau SVG.

Photoshop și Fireworks vă pot ajuta să personalizați nivelurile de optimizare în diferite zone ale imaginii. Aceasta înseamnă că subiectul principal poate rămâne de înaltă calitate, în timp ce restul este optimizat pentru a crește performanța. Instrumentele de compresie fără pierderi de imagine, cum ar fi ImageOptim și TinyPNG, pot profita la maximum de dimensiunea fișierului, fără a pierde calitatea imaginii.

De asemenea, puteți utiliza noul element HTML5 <picture> și atributele srcset și size pentru imagini. Aceste două completări la limbaj vă ajută să definiți imagini receptive direct în HTML, astfel încât browserul va descărca doar imaginea care se potrivește cu condiția dată.

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

Cu toate acestea, această tehnică trebuie utilizată cu atenție. Doar câteva browsere îl acceptă: unele browsere moderne (cum ar fi Safari), browsere Android și IE10/11 (și mai vechi) nu o acceptă. Alternativele Polyfill pot face ca această metodă să funcționeze în browserele mai vechi, dar acestea sunt biblioteci JavaScript externe care trebuie încărcate separat și ar putea să nu merite, având în vedere că sunt disponibile alte tehnici. Merită să luați în considerare publicul dvs. țintă și ce tehnologii vor folosi pentru a vedea dacă este necesară greutatea suplimentară a polifillului.

Adresele URL de date sunt o ultimă opțiune. În loc să fie conectate la un fișier imagine extern, datele imaginii pot fi convertite într-un șir codificat base64 (sau ASCII) și încorporate direct în fișierul CSS sau HTML. Este disponibil un instrument simplu de conversie online. Adresele URL de date sunt utile, deoarece salvează solicitările HTTP și pot transfera fișiere mici mai rapid. Dar, așa cum se demonstrează mai jos, dimensiunea codului încorporat este mai mare decât a legăturii către imagini externe. Lungimea adăugată poate face documentele HTML și CSS mai dificil de întreținut, iar modificările de imagine vor trebui să fie recodificate și încorporate de fiecare dată.

 <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==" />

Automatizarea CMS Media Optimization

Aplicarea tehnicilor de optimizare a activelor din secțiunea anterioară a însemnat că am putea alege un design clasic, bazat pe imagini, pentru BAM, permițându-le să prezinte fotografii de proiecte noi de construcție.

Dar mai trebuia să oferim BAM libertatea de a actualiza conținutul fără a fi nevoie să optimizăm fiecare imagine. Desigur, nicio soluție nu ar fi la fel de eficientă ca optimizarea manuală, dar am reușit să atingem un grad rezonabil de optimizare automată. Am reconfigurat CMS-ul Sitefinity existent pentru a crea flexibilitate. Opțiunile standard au fost folosite pentru a redimensiona (și optimiza) imaginile automat, potrivindu-se în contextul fiecărei pagini web:

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

Sitefinity poate, de asemenea, redimensiona imaginile de la adresa URL utilizând parametrii URL, iar randarea și mai rapidă poate fi realizată prin memorarea în cache a imaginii redimensionate, folosind următoarea opțiune:

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

Majoritatea sistemelor CMS permit un anumit grad de optimizare media. De exemplu, puteți defini setări media pentru a vă asigura că viitorii utilizatori adaugă doar imagini care se potrivesc șabloanele site-ului web. Iată un exemplu rapid de la WordPress.

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

Eficientizați fonturile și pictogramele

Fonturile reprezintă o parte importantă a experienței utilizatorului și a mărcii unui site web sau a unei aplicații, dar este posibil să nu fie prima prioritate pentru utilizator. Din acest motiv, fonturile web pot fi un alt factor de optimizat.

Amânând încărcarea fontului, browserul va afișa copie în orice font are disponibil pentru început. Aceasta înseamnă că utilizatorul va primi întotdeauna primul conținut. Amânarea încărcării fonturilor poate fi realizată prin separarea părții din CSS care face legătura cu fișierele cu fonturi și încărcarea acesteia după ce restul paginii a fost redat. Rețineți, totuși, că textul poate clipi scurt pentru a se schimba atunci când fontul web este încărcat.

În mod similar, pictogramele sunt o altă zonă de optimizat, deoarece sunt fișiere mici care trebuie încărcate frecvent. Ați putea lua în considerare și utilizarea fișierelor cu fonturi pentru pictograme. Utilizați un serviciu precum Fontello pentru a alege o varietate de pictograme și pentru a genera un fișier de font limitat la selecția dvs. Această tehnică poate crea pictograme vectoriale de înaltă calitate pentru toate rezoluțiile ecranului, cu un impact ușor asupra performanței.

Alternativ, sprite-urile de imagine sunt o opțiune binecunoscută. Acestea combină imaginile într-un singur fișier (care utilizează o singură solicitare pentru a încărca) și afișează doar partea necesară pentru proiectare utilizând poziția de fundal. Paul Stamatiou descrie cum se face acest lucru și subliniază câteva limitări.

Tehnologii de încărcare

Următoarele tehnici evită trimiterea întregului conținut al unui site web către browserele mobile. În schimb, sunt descărcate doar datele precise necesare , prin optimizarea pentru fiecare punct de întrerupere. Viteza de încărcare a dispozitivelor mobile a fost o considerație cheie pentru site-ul web Velocity Drive, care oferă tehnologii de remorcă. Bibliotecile JavaScript trebuie să se încarce la toate punctele de întrerupere, pentru a testa capabilitățile browserului și pentru a evita erorile. Dar am optimizat activele cu atenție pentru fiecare punct de întrerupere: dimensiunea de încărcare a paginii de pornire este de numai 323 KB pe mobil, crescând la 828 KB pe desktop-uri mari.

Continuați acest lucru cu tehnicile de încărcare leneșă condiționată pentru a crește viteza percepută a paginii. Ele încarcă secțiuni vizibile în etape, cu conținutul cheie plasat deasupra pliului. Articolele scumpe (cum ar fi imaginile) găsite la sfârșitul paginilor nu sunt încărcate, cu excepția cazului în care utilizatorul alege să defileze prin conținut. Această tehnică a fost cheia pentru secțiunea „Insights” a site-ului web Niu Solutions, acoperind inovațiile lor IT. Am folosit un mic plugin jQuery numit jScroll pentru a încărca articole suplimentare pe măsură ce utilizatorul derulează în jos. Iată o mostră despre cum am configura acest plugin, care necesită pur și simplu linkul către mai mult conținut:

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

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

Tehnologiile de preîncărcare prezintă oportunități suplimentare. Aceștia pot anticipa și se pot pregăti pentru următoarea mișcare a utilizatorului, încărcând pagina pe care probabil o va vedea înainte înainte de a face acest lucru, pentru a oferi o experiență mai rapidă. Cu toate acestea, descoperirea structurii tipice de trafic este mai ușoară atunci când renovați un site web existent, deoarece puteți studia canalele de flux de comportament pe Google Analytics.

Îmbunătățiți dintr-o experiență de bază

BBC’s Responsive News se referă la ideea de a oferi utilizatorului experiența de bază pe care o solicită, apoi de a evalua mediul utilizatorului și de a îmbunătăți experiența în consecință . Un exemplu simplu în acest sens este încărcarea inițială a imaginilor cu rezoluție scăzută și apoi afișarea de înaltă rezoluție, în funcție de lățimea de bandă pe care o are utilizatorul.

Această idee face parte din îmbunătățirea progresivă, în care tehnologiile web sunt stratificate pentru a oferi cea mai bună experiență în medii. Îmbunătățirea progresivă se poate baza pe o serie de factori diferiți. Acestea includ tehnologia la care are acces un utilizator, cum ar fi browserul, sistemul de operare și mediul (cum ar fi viteza internetului). Aici, definiți un set de bază de caracteristici care trebuie să funcționeze pe cele mai puțin capabile browsere și adăugați o complexitate suplimentară numai după ce ați testat dacă browserele se pot descurca.

Detectarea dacă browserul poate suporta funcții HTML5 și CSS ne ajută să scriem cod condiționat pentru a acoperi toate eventualitățile: îmbunătățirea și adăugarea de funcții atunci când sunt acceptate, rămânând în siguranță și simplu pentru dispozitivele și browserele care nu o fac.

Reduceți testarea caracteristicilor

Încorporarea bibliotecilor de testare a caracteristicilor precum Modernizr sau has.js este o practică obișnuită, recomandată. Dar prea mulți dezvoltatori implementează întreaga bibliotecă; ei testează toate capabilitățile, chiar dacă este nevoie doar de un număr mic de rezultate pentru a determina dacă să adăugați caracteristici.

Tim Kadlec raportează timpul de analiză și execuție al aceleiași biblioteci (jQuery minimizat 2.1.1) pe o serie de dispozitive. Acest lucru demonstrează că există adesea un cost de performanță mobil mai mare (chiar și între dispozitivele vechi și noi) pentru implementarea acestor biblioteci, în comparație cu desktop. Avem tendința de a personaliza biblioteca, testând doar funcțiile relevante ale site-ului web . Acest lucru va economisi timp și putere prețioasă de procesare mobilă.

Optimizare pe partea de server

Timpul de răspuns al serverului este un factor cheie în viteza site-ului web: mulți vizează mai puțin de 200 ms. Dar latența rețelei (întârzierea pe măsură ce datele se deplasează între server și dispozitiv) este adevăratul blocaj pentru performanța mobilă, lăsând utilizatorilor de telefonie mobilă o experiență mai lentă.

Acest lucru este influențat de viteza rețelei. Potrivit Ofcom, vitezele medii de descărcare pe rețelele populare 3G și 4G au fost de 6,1 Mbps și 15,1 Mbps în Marea Britanie. Unii interpretează aceasta ca o limită clară a dimensiunii maxime a site-ului web. Dar realitatea este mai complexă, deoarece viteza variază în funcție de acoperire și contextul de mediu. Utilizatorii se conectează adesea la Edge lent (E) și GPRS atunci când sunt în afara razei de acoperire.

Există o varietate de tehnici disponibile pentru a îmbunătăți performanța site-ului pe partea de server.

Memorarea în cache, redarea înainte și conținutul static

Paginile web dinamice necesită mai multe interogări în bazele de date, ceea ce necesită timp prețios procesării datelor de ieșire și formatării, apoi redării în HTML lizibil de browser. Este recomandat să stocați în cache conținutul redat anterior pentru acel dispozitiv. Pentru vizitatorii care revin, în loc să proceseze de la zero, va verifica memoria cache și va trimite doar actualizări.

Mulți aleg, de asemenea, biblioteci de șabloane JavaScript, cum ar fi Handlebars și Mustache, pentru a gestiona conținutul web. Dar analizarea și executarea JavaScript consumă energie și timp. Dispozitivele mobile nu pot procesa aceste biblioteci de șabloane la fel de repede ca computerele desktop și își pot consuma resursele de procesare. Redarea paginilor complet pe server este mult mai rapidă. Twitter a optat pentru această abordare încă din 2012 și a explicat valoarea pe blogul lor.

Recent, dezvoltatorul nostru senior front-end a depășit limitele acestei tehnici pentru portofoliul său personal. A fost construit cu CMS-ul Statamic bazat pe fișiere, care tocmai a adăugat suport pentru html_cache. Când a fost implementată, această funcție a redus timpul mediu de încărcare a tuturor paginilor de la aproximativ 1,8 secunde la 225 de milisecunde.

Memorarea în cache a browserului

Optimizarea granulară poate simplifica încărcarea site-ului web, împiedicând transferul regulat al fișierelor despre care știți că nu sunt actualizate des. Utilizați un handler de server (cum ar fi un fișier .htaccess ) pentru a indica browserului ce tip de conținut să stocheze și cât timp ar trebui să păstreze copiile. Iată cum puteți implementa memorarea în cache a browserului pe serverul 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>

Rețele de livrare de conținut (CDN)

Puteți îmbunătăți încărcarea activelor utilizând un CDN precum CloudFlare alături de serviciul dvs. obișnuit de găzduire. Aici, conținutul static (cum ar fi imagini, fonturi și CSS) este stocat pe o rețea de servere globale. De fiecare dată când un utilizator solicită acest conținut, CDN-ul îi detectează locația și livrează active de la cel mai apropiat server, ceea ce reduce latența. Mărește viteza, permițând serverului principal să se concentreze pe livrarea aplicației în loc de a servi fișiere statice.

Deși adaugă cheltuieli, utilizați un CDN dedicat pentru a îmbunătăți viteza de încărcare a site-urilor web cu multe active . În afară de configurarea inițială, CloudFlare nu necesită configurare manuală; memoria cache este creată și actualizată pentru dvs., în funcție de traficul istoric și de ce active sunt cel mai bine de servit. Dar implementați acest lucru ținând cont de viitorul management independent al conținutului: asigurați-vă că toate activele încărcate dintr-un CMS sunt, de asemenea, difuzate în mod transparent prin CDN.

Un CDN a fost cea mai bună alegere pentru site-ul nostru web Eurofighter Typhoon, deoarece fotografia de înaltă rezoluție a aeronavelor de apărare a fost o caracteristică crucială pentru a le prezenta abilitățile. În ultimele 30 de zile, rapoartele indică că CloudFlare a salvat 76% din solicitări și 48% din lățimea de bandă, crescând viteza site-ului web cu imagini grele.

Testare

Nu există niciun înlocuitor pentru testare pe parcursul producției. Încercați să utilizați diverse instrumente pentru a testa lucrările în desfășurare prin simularea experienței mobile și diagnosticarea potențialelor probleme de performanță.

Pe măsură ce producția progresează, fiți mereu cu ochii pe numere: de la asigurarea faptului că elementele de proiectare sunt generate și exportate corect, până la verificarea dimensiunii fișierului de pagină și a volumului de solicitări HTTP prin instrumentele de dezvoltare din browser. Aici, fila Rețea vă oferă o imagine de ansamblu completă a resurselor încărcate, dimensiunea totală a fișierului și timpul de randare:

Observați liniile verticale albastre și roșii din dreapta cronologiei în Chrome Inspector de mai sus. Acestea reprezintă evenimente DOM Ready și, respectiv, Page Load. În partea de jos a ferestrei, afișează cantitatea de solicitări HTTP și dimensiunea totală a fișierului încărcat la punctul de întrerupere curent.

Alte instrumente includ:

• WebPagetest oferă o mare varietate de opțiuni pentru testarea URL-urilor live: de la alegerea oricărei locații din lume, până la modelarea vitezei și a latenței specifice conexiunii 3G și 4G. Puteți chiar să experimentați cum se încarcă site-ul web pentru acești utilizatori, prin vizualizarea filmului și video.
• Pagespeed Insights de la Google este un instrument introductiv mai vizual pentru analiza vitezei paginii. Acesta împarte rezultatele în desktop sau mobil și sugerează tehnici pentru a îmbunătăți zonele vizate ale site-ului dvs.: indicarea resurselor de stocat în cache sau imagini de optimizat.

Testați pe dispozitive reale

Dar nu te baza doar pe simulatoare. De asemenea, testăm proiecte pe parcursul producției pe o varietate de dispozitive mobile reale.

Creați-vă propriul laborator de dispozitiv sau utilizați OpenDeviceLabs. În mod ideal, obțineți o idee despre experiența reală a utilizatorului evitând puternicul Wi-Fi de birou. Creați un site de testare pe un server web (în mod ideal, același cu serverul live) pe care îl puteți accesa din afara rețelei de birou. Apoi, testați în timp ce sunteți în mișcare în medii tipice, cum ar fi o cafenea aglomerată sau un hotel, pe o conexiune de rețea.

Rezumatul performanței mobile

Mai presus de toate, urmăriți să creați un site web care să echilibreze estetica și performanța pe mobil și să obțină valori reale de conversie. Un proces colaborativ, iterativ de optimizare a performanței vă va ajuta să realizați acest lucru.

Încă de la începutul proiectului, încurajați echipa internă să lucreze împreună cu o mentalitate mobilă prin stabilirea unui buget strict de performanță . Construiți o înțelegere a factorilor din partea clientului și serverului care determină performanța site-ului pe mobil. Apoi, puteți îndeplini obiectivul stabilit prin implementarea unui amestec de tehnici de optimizare vizate pe care le-am descris. Desigur, există încă un compromis între a avea un design izbitor, performanță ridicată și securitate în unele cazuri; o echipă de proiectare și dezvoltare colaborativă poate decide ce este mai bine pentru afacere, verificând cu managerii de proiect și părțile interesate relevanți.

Proiectul nostru de optimizare pentru o consultanță tehnologică globală demonstrează modul în care aceste tehnici se pot combina pentru a îmbunătăți viteza de încărcare și dimensiunea în mod semnificativ. Proiectul a implicat stocarea în cache a șabloanelor și paginilor, optimizarea activelor și fonturilor și reducerea testării caracteristicilor, printre alte tehnici. Până acum, testele demonstrează că timpul de redare și încărcarea totală a fost redus la mai puțin de 1,4 secunde, de la aproape 4 secunde înainte de a începe lucrul; în mod similar, dimensiunea fișierului a fost redusă la 1MB de la peste 3MB.

Citiți suplimentare despre SmashingMag:

• Lista de verificare a performanței front-end 2017
• Pregătirea pentru HTTP/2
• Tot ce trebuie să știți despre AMP
• Puterile (nu atât) secrete ale browserului mobil