4 sfaturi pentru a îmbunătăți performanța paginii dvs.

Sep 11, 2025
să
Web-performance expert Henri Helvetica sitting with his laptop

Analistul performanței web Henri Helvetica. va împărtăși sfaturile sale Pro Cum să stimulați performanța site-ului dvs. la Generați New York. 2018. Ia-ți biletul acum .

Performanța devine în cele din urmă o parte mai mare a conversației în web design și dezvoltare. Cu toate acestea, poate fi o provocare pentru a obține oamenii să consume de fapt marele conținut care este acolo și să adopte o abordare de performanță pe o bază mai regulată.

Din fericire, dezvoltatorul independent și analistul de performanță Web Henri Helvetica (nume real Henri Brisard), este la îndemână pentru a oferi sfaturi de top pentru a vă supune performanța site-ului dvs.

01. Încercarea de a măsura

Helvetica sugerează că mai întâi trebuie să vă asigurați că măsurați. "Nu puteți îmbunătăți niciodată ceea ce nu măsurați", explică el. "Odată ce ați stabilit măsurătorile și datele dvs., trebuie să vă dați seama ce elemente importante de măsurat. Ați putea avea două pagini care se încarcă în nouă secunde, dar se poate ocupa de vizualizare mult mai repede, deci aveți o experiență mai bună a utilizatorului.

"Trebuie să măsurați ceea ce este important în procesul de încărcare pentru site-ul dvs. și întreprinderea dvs. comercială. Gândiți-vă la ceea ce este important pentru ca utilizatorii dvs. să interacționeze. Fiecare site are propriile sale nevoi individuale".

Odată ce a avut o privire la o încărcătură de pagină, care îl ajută să ridice cum și când s-au înregistrat anumite articole, următorul pas al lui Helvetica este de obicei să declanșeze Chrome devtools pentru a evalua exact ceea ce se întâmplă. Este o alegere evidentă, deoarece este chiar acolo și este gratuit - nu aveți nevoie să sari într-un alt instrument pentru a încerca să descoperiți de ce o pagină poate fi lentă. Cu toate acestea, mulți dezvoltatori abia îl folosesc. "Devtools este un pic ca un detector de fum", susține Helvetica. "Dacă există un incendiu, devtools vă va spune. Se va arăta cel puțin unde este fumul. "

02. Pierde o greutate a paginii

Apoi Helvetica se uită la cascada, care va indica diverse aspecte, cum ar fi dimensiunea unui activ și latența implicată în încărcarea acesteia. Dacă site-ul conține imagini slab dimensiuni, de exemplu, veți vedea de obicei o cascadă foarte lungă, care este una dintre punctele mai ușoare de durere pentru a ridica rapid. Imaginile sunt unul dintre cei mai mari vinovați pentru un loc de încărcare lentă - o problemă care poate fi fixată destul de ușor. Pe măsură ce sunt cea mai mare sursă de date, imaginile sunt, de asemenea, cea mai mare sursă de economii de date.

"Întotdeauna aș lua în considerare greutatea paginii dvs.", explică Helvetica. "Indiferent de modul în care îl tăiați, dacă aveți o imagine care este 3MB, sau chiar trei imagini la 1MB fiecare, probabil că veți avea o provocare de experiență utilizator.

Web-performance expert Henri Helvetica coding on his laptop

"Greutatea paginii va fi, de asemenea, victima rețelei dvs., deoarece o rețea celulară nu poate fi niciodată prevăzută. Deci, doriți să vă asigurați că activele dvs. sunt mici și optimizate pentru ferestrele de vizualizare, ceea ce înseamnă că nu ar trebui să puteți vedea niciunul Active de dimensiuni desktop pe un dispozitiv mobil. "

Helvetica recomandă, de asemenea, încărcare leneșă, o tehnică care întârzie încărcarea unui obiect până când este necesar. "Nu toți utilizatorii vor ajunge la fundul unei pagini", avertizează el. "Destul de des puteți încărca active care nu vor fi văzute niciodată. Utilizarea încărcăturii leneș va fi foarte benefică deoarece economisiți pe date, precum și derularea bateriei sau gestionarea memoriei. Dacă nu încărcați imaginea, nu veți avea nici o memorie pentru usurp pe dispozitiv. "

03. Vedeți cum vă stivuiți

Un alt motiv pentru care Helvetica favorizează DevTools se datorează faptului că acum oferă metrici ca prima vopsea (timpul necesar utilizatorului să vadă primul pixel de conținut) și prima vopsea semnificativă (timpul necesar pentru conținutul primar al paginii pentru a deveni vizibil ).

Apoi, există filmul (fie în DevTools, fie în instrumentul de performanță WebPageTest) care prezintă imagini incrementale ale browserului, făcând un site, astfel încât să puteți vedea ce arată o pagină când se încarcă. Prin examinarea acestora, puteți afla ce active au fost încărcate atunci când ar trebui să analizeze modalitățile de încărcare a unora la un timp mai devreme în cronologie.

În WebPageTest - pe care Helvetica îl laudă pentru nivelul său de inspirație de detaliu - puteți exporta și un videoclip al încărcăturii și comparați filmul cu cel al unui concurent. "Odată ce ați conectat punctele, puteți explora modul de îmbunătățire a experienței utilizatorului prin aducerea acestor active în funcția de vizualizare", explică Helvetica.

04. Tăiați dezordinea

Helvetica subliniază faptul că deciziile de proiectare au și un impact asupra performanței și că prima dvs. încărcătură în fereastra de vizualizare nu ar trebui să fie cât mai rapidă posibil, ci și cât mai liber posibil.

Din acest motiv, trebuie să înțelegeți seria de evenimente care au loc pentru a face vizualizarea inițială a unei pagini web - calea de redare critică. Aceste evenimente pot fi optimizate prin evitarea activelor de încărcare care nu sunt necesare și prin luarea deciziilor în jurul selecției fonturilor web și a formatelor de imagine.

"Asigurați-vă că păstrați-vă SVG-urile ca fiind mai libere de complexitate", sugerează Helvetica printr-un exemplu. "Atunci veți avea mai puțin cod atunci când vă faceți SVG. Am auzit acest lucru de la dezvoltatori tot timpul. Ei vor primi un SVG de la designeri și vor să o trimită înapoi pentru că ar afecta performanța ".

Acest articol a fost publicat inițial în numărul 303 de net, cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpără Numărul 303. sau Abonați-vă la Net. .

Doriți o perspectivă suplimentară împotriva vitezei site-ului dvs.?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018

Henri Helvetica își dă planeta de discuții a API-urilor: o poveste de performanță & amp; Experiența utilizatorului la generarea New York de la 25-27 aprilie 2018

Dacă sunteți interesat să vă asigurați paginile de încărcare rapidă, asigurați-vă că ați luat un bilet pentru Generați New York. . Henri Helvetica va percepe practici actuale și chiar experimentale angajate în măsurarea aplicațiilor web și furnizarea de experiențe de utilizator performante, precum și oferind mai multă înțelegere a măsurătorilor, cum ar fi prima vopsea, vopsea semnificativă și timp pentru interactive.

Generarea New York are loc în perioada 25-27 aprilie 2018. Ia-ți biletul acum .

Articole similare:

  • 7 sfaturi de expert pentru performanța web
  • 3 instrumente de top pentru testarea performanței web
  • De ce performanța web trebuie să se simtă rapid

să - Cele mai populare articole

Creați un efect de anagnef vechi de școală

să Sep 11, 2025

(Credit Imagine: Travis Knight) Un efect anaglif este numele potrivit pentru stilul 3D clasic în care trebuie să pu..

Cum se structurează interogările media în SASS

să Sep 11, 2025

Practic, fiecare site este acum construit cu cel puțin un semn de design web receptiv. Modul în care structurăm aceste stiluri..

Cum să schițezi rapid mâinile

să Sep 11, 2025

Pentru a desena mâinile, trebuie să vă uitați trecând complexitatea anatomiei mâinii și să recunoașteți regulile simple..

Creați mișcare dinamică într-o compoziție

să Sep 11, 2025

Înainte de a începe desenul, este important să decideți ce tip de mișcare doriți să capturați. Încercați să o păstra�..

Cum se face 3D litere în Illustrator

să Sep 11, 2025

Săptămâna trecută, Adobe a lansat mai multe videoclipuri în cele mai utile să fie acum playlist, oferind creatorilor șansa de a ridica o serie de abilități practice în doar 60 de se..

Ghidul final pentru compozitarea imaginilor în Photoshop

să Sep 11, 2025

Dintre toate proiectele Photoshop, compozitarea imaginilor într-un cadru fantastic este probabil cea mai plăcută și mai creat..

Cum să obțineți mai mult din GIF-uri

să Sep 11, 2025

GIF-uri lucrează în cicluri fără sudură, care Rebecca mock. descrie ca "bucla perfectă". Această buclă ar trebui să ș..

Cum să combinați hărți sculptate și vopsite de deplasare

să Sep 11, 2025

Uneori este mai eficient să combinați diferite hărți de deplasare la timp, mai degrabă decât să le scufundați pe toți. U..

Categorii