4 Vinkkejä sivun suorituskyvyn parantamiseen

Sep 13, 2025
Miten tehdään
Web-performance expert Henri Helvetica sitting with his laptop

Web Performance analyytikko Henri Helvetica jakaa hänen pro-vinkkejä siitä, miten voit lisätä sivustosi suorituskykyä osoitteessa Luo New York 2018. Hanki lippu nyt .

Suorituskyky on vihdoin yhä suurempi osa Web-suunnittelun ja kehityksen keskustelua. Kuitenkin voi silti olla haaste saada ihmiset todella kuluttamaan suurta sisältöä, joka on siellä ja hyväksyä suorituskyky lähestymistapa säännöllisemmin.

Onneksi freelance-kehittäjä ja web-suorituskyvyn analyytikko Henri Helveticaa (todellinen nimi Henri Brisard) on kädessä tarjota huippuluokan vinkit keittämään sivuston suorituskykyä.

01. pyrkivät mittaamaan

Helvetica ehdottaa, että ennen kaikkea sinun on varmistettava, että mittaat. "Et voi koskaan parantaa mitä et mittaa:" Hän selittää. "Kun olet määrittänyt mittaukset ja tiedot, sinun on selvitettävä, mitkä tärkeät elementit mitataan. Sinulla voi olla kaksi sivua, jotka latautuvat yhdeksän sekunnin kuluttua, mutta näkymä on täynnä paljon nopeammin, joten sinulla on parempi käyttäjäkokemus.

"Sinun on mitattava, mikä on tärkeää sivuston ja kaupallisen yrityksen kuormitusprosessissa. Ajattele, mikä on tärkeää, että käyttäjät ovat vuorovaikutuksessa. Jokaisella sivustolla on omat yksilölliset tarpeet."

Kun hänellä oli katsella sivun kuormitusta, mikä auttaa häntä poimimaan miten ja milloin tietyt kohteet latautuvat, Helvetican seuraava vaihe on yleensä ampua kromi detools arvioida tarkalleen mitä tapahtuu. Se on ilmeinen valinta, koska se on siellä ja se on ilmainen - sinun ei tarvitse hypätä toiseen työkaluun yrittää löytää miksi sivu voi olla hidas. Silti monet kehittäjät tuskin käyttävät sitä. "Devools on vähän kuin savunilmaisin", Helvetica väittää. "Jos tulipalo, devtools kertoo sinulle. Se näyttää ainakin, missä savu on. "

02. menettää jonkin verran painoa

Sitten Helvetica tarkastelee vesiputousta, joka ilmaisee erilaisia ​​asioita, kuten omaisuuserän kokoa ja latenssin, joka oli mukana sen lataamiseen. Jos sivusto sisältää esimerkiksi huonosti kokoisia kuvia, näet yleensä hyvin pitkän vesiputouksen, mikä on yksi helpompi kipu osoittaa nopeasti. Kuvat ovat yksi suurimmista syyllisistä hitaasti kuormituspaikkaan - ongelma, joka voidaan korjata melko helposti. Koska ne ovat suurimmat tietolähteet, kuvat ovat myös suurin tietolähetyslähde.

"Haluaisin aina ottaa huomioon sivun painon", Helvetica selittää. "Ei ole väliä kuinka viipaloi sen, jos sinulla on yksi kuva, joka on 3 Mt, tai jopa kolme kuvaa 1 Mt: n jokaisella, sinulla on todennäköisesti käyttäjäkokemus haaste.

Web-performance expert Henri Helvetica coding on his laptop

"Tämä sivupaino on myös verkon uhri, koska solukkoverkkoa ei voi koskaan ennustaa. Joten haluat varmistaa, että omaisuutesi ovat pieniä ja optimoituja näkymäporttiin, mikä tarkoittaa, ettet pitäisi nähdä mitään Desktop-kokoiset varat mobiililaitteeseen. "

Helvetica suosittelee myös laiska kuormitusta, tekniikkaa, joka viivästyy esineen lataamista, kunnes se on tarpeen. "Kaikki käyttäjät eivät aio tehdä sitä sivun alareunaan", hän varoittaa. "Melko usein voit ladata varoja, joita ei koskaan näe. Laiska kuormituksen työllistyminen on erittäin hyödyllinen, koska säästät tietoja sekä akun tyhjennys- tai muistinhallinta. Jos et lataa kuvaa, sinulla ei ole mitään muistia USURP: lle laitteessa. "

03. Katso, miten pinotaan

Toinen syy Helvetica suosii devtools on siksi, että se myös antaa mittareille kuin ensimmäinen maali (aika, jonka käyttäjä voi nähdä ensimmäisen sisällön pikselin) ja ensimmäinen merkityksellinen maali (jolloin sivun ensisijaisen sisällön aika tulee näkyviin ).

Sitten on elokuvan (joko Devtools tai Performance Tool Web -geettestissä), joka näyttää sivuston esittämistä selaimesta, joten näet, mitä sivu näyttää lataaksi. Tutkimalla niitä voit selvittää, mitkä varat ladataan, kun ja tarkastellaan keinoja ladata joitakin niistä aikaisemmin aikajanalla.

Webpagetestissä - mikä Helvetica ylistää sen innostavaa yksityiskohdat - voit myös viedä kuorman videon ja verrata elokuvan kilpailijan kanssa. "Kun liität pisteitä, voit tutkia, miten voit parantaa käyttökokemusta tuomalla nämä varat näkymäporttiin nopeammin", Helvetica selittää.

04. Leikkaa sotku

Helvetican korostaa, että suunnittelupäätökset vaikuttavat myös suorituskykyyn ja että ensimmäinen kuormituksesi näkemykseen ei pitäisi vain olla mahdollisimman nopea kuin mahdollista.

Tästä syystä sinun on ymmärrettävä sarja tapahtumia, jotka tapahtuvat verkkosivuston alkuvuodesta - kriittinen renderointipolku. Nämä tapahtumat voidaan optimoida välttämällä lastausominaisuuksia, jotka eivät ole välttämättömiä ja tekemällä päätöksiä verkkofonttien ja kuvaformaattien valinnan ympärille.

"Varmista, että pidät SVG: t monimutkaisina kuin mahdollista," Helvetica ehdottaa esimerkin avulla. "Sitten sinulla on vähemmän koodia, kun teet SVG: n. Kuulen tämän kehittäjiltä koko ajan. He saavat SVG suunnittelijoilta ja on lähetettävä se takaisin, koska se vaikuttaisi suorituskykyyn. "

Tämä artikkeli julkaistiin alun perin liikkeeseen 303, maailman myydyin aikakauslehti Web-suunnittelijoille ja kehittäjille. Ostaa Issue 303 tai Tilaa Net .

Haluatko lisätietoa sivuston nopeuden keitosta?

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 antaa Talk Planet of AP: n: tarina suorituskyvystä & amp; Käyttäjäkokemus Generate New Yorkista 25.-27.4.2018

Jos olet kiinnostunut varmistamaan sivusi lataamaan salama nopeasti, varmista, että napasit lippuun Luo New York . Henri Helveticaa perustuu nykyisiin ja jopa kokeellisiin käytäntöihin, joita käytetään web-sovellusten mittaamisessa ja tarjoamalla esille käyttäjäkokemuksia sekä tarjoamaan enemmän tietoa mittauksista, kuten ensimmäisestä maalista, merkityksellisestä maalista ja vuorovaikutteisesta vuorovaikutteiseksi.

Luo New York järjestetään 25.-27. Huhtikuuta 2018. Hanki lippu nyt .

Aiheeseen liittyvät artikkelit:

  • 7 Asiantuntijavihjeet Web-suorituskyvyn naulata
  • 3 Top Tools Web-suorituskyvyn testaamiseen
  • Miksi Web-suorituskyvyn on oltava nopea

Miten tehdään - Suosituimmat artikkelit

Affinity Designer: Kuinka käyttää pikselin persoona

Miten tehdään Sep 13, 2025

Affinity Designer on suosittu vektori muokkaustyökalu Mac-, Windows- ja nyt iPad . Sovellus on taitavasti jaettu ..

Pidä täydellinen versionohjaus abstraktilla

Miten tehdään Sep 13, 2025

Versiohallinta oli alun perin tarkoittanut koodin kanssa työskenteleviä kehittäjiä, kun useat kehittäjät voivat työskennel..

Malli ulkomaalainen merirosvo olento Zbrushissa

Miten tehdään Sep 13, 2025

Auttaa sinua oppimaan luomaan 3D-ulkomaalainen merirosvo luonne, näytän sinulle, kuinka veuletin olennukseni kasvot, Worgrock (..

4 Helppo vaiheet parantamaan renderisi

Miten tehdään Sep 13, 2025

Dome valot ovat olleet yksi viime vuosikymmenien aikana viime vuosikymmenien suurimmista edistämisestä. Uiminen kohtaus jokaise..

Virta valikot käyttämällä animaatiota CSS: llä

Miten tehdään Sep 13, 2025

Se on animaation kautta, että meillä on tunne maailmasta: Ovet kääntyvät auki, autot ajaa heidän kohteisiinsa, huulet käpe..

Luodaan ornate laatat aineen suunnittelija

Miten tehdään Sep 13, 2025

Sivu 1/2: Suunnittelu ja tekstuuri 3D-lattialaatat Suunnittelu ja tekstuu..

Kuinka saada lisää digitaalisista tekstuureista

Miten tehdään Sep 13, 2025

Digitaalinen työskentely vapauttaa sinut tekemään niin paljon virheitä kuin haluat, työtilassa, jossa riskin elementti oteta..

5 tapaa hallita kassavirtausta tehokkaasti

Miten tehdään Sep 13, 2025

Cashflowin hallinta on avain freelance-menestykseen, ja on olemassa joitakin kovia ja nopeita sääntöjä varmistaaksesi, että ..

Luokat