4 Tipy pro zlepšení výkonu stránky

Sep 12, 2025

jak

Web-performance expert Henri Helvetica sitting with his laptop

Analytik webu webového výkonu Henri Helvetica. Bude sdílet své PRO TIPY, jak posílit výkon vašeho webu na adrese Generovat New York 2018. Dostaňte svou letenku .

Výkon se konečně stává větší částí konverzace v oblasti designu a vývoje webu. Nicméně, to však může být výzvou dostat lidi, aby ve skutečnosti konzumovat velký obsah, který je tam venku, a přijmout výkonnostní přístup pravidelněji.

Naštěstí, vývojář na volné noze a analytik webového výkonu Henri Helvetica (Real Name Henri Brisard), je po ruce nabídnout jeho nejlepší tipy na polévání výkonu vašeho webu.

01. Endeavor na měření

Helvetica naznačuje, že nejprve musíte zajistit měření. "Nikdy nemůžeš zlepšit to, co neměřujete," vysvětluje. "Jakmile budete mít vaše měření a data stanovená, musíte zjistit, jaké důležité prvky měří. Dalo by se mít dvě stránky, které načíst za devět sekund, ale jeden může mít výřez naplněn mnohem rychleji, takže máte lepší uživatelské zkušenosti.

"Musíte měřit, co je důležité v procesu zatížení pro vaše stránky a obchodního podnikání. Přemýšlejte o tom, co je důležité pro vaši uživatelé komunikovat. Každý web má své vlastní individuální potřeby."

Jakmile se podíval na načtení stránky, což mu pomáhá vyzvednout, jak a když se určité položky zátěže, další krok Helveticy je obvykle ohrádat chrome devtools, aby přesně to, co se děje. Je to zjevná volba, protože je to tady a je to zdarma - nemusíte skočit do jiného nástroje, abyste se pokusili zjistit, proč může být stránka pomalá. Mnozí vývojáři ho sotva používají. "Devtools je trochu jako detektor kouře," argumentuje Helvetica. "Jestli je oheň, Devtools vám to řekne. Přinejmenším vám to ukáže, kde je kouř. "

02. Ztratit nějakou váhu stránky

Pak Helvetica se dívá na vodopád, která uvádí různé otázky, jako je velikost aktiva a latence, která byla zapojena do naložení. Pokud stránky obsahuje například špatně velikosti obrázků, obvykle uvidíte velmi dlouhý vodopád, který je jedním z jednodušší bolesti bolesti, aby se rychle zvedl. Snímky jsou jedním z největších vinotéčebných pachatelů pro pomalé místo načítání - problém, který lze snadno nastavit. Jakou jsou největší zdroj dat, obrázky jsou také největším zdrojem úspor dat.

"Vždycky bych zohlednil svou váhu," vysvětluje Helvetica. "Bez ohledu na to, jak to vy plaváte, pokud máte jeden obrázek, který je 3MB, nebo dokonce tři obrázky v 1MB, budete mít pravděpodobně, že budete mít uživatelskou výzvu.

Web-performance expert Henri Helvetica coding on his laptop

"Tato váha bude také obětí vaší sítě, protože mobilní síť nemůže být nikdy předvídána. Takže se chcete ujistit, že vaše aktiva jsou malé a optimalizované pro výřez, což znamená, že byste neměli být schopni vidět žádné aktiva velikosti desktopu na mobilním zařízení. "

Helvetica také doporučuje líný zatížení, techniku, která zpozdí načítání objektu, dokud není potřeba. "Ne všichni uživatelé to budou dělat na dno stránky," varuje. "Docela často můžete naložit aktiva, která nikdy nebude vidět. Zaměstnání líné zatížení bude velmi prospěšné, protože ukládáte na datech, jakož i pro správu paměti baterií nebo správu paměti. Pokud načtete obrázek, nebudete mít žádnou paměť na Usurp na zařízení. "

03. Podívejte se, jak se stáváte

Dalším důvodem, proč Helvetica laskavá devtools je proto, že nyní také poskytuje metriky jako první barva (čas, který vyžaduje uživatele, aby viděl první pixel obsahu) a první smysluplnou barvu (čas, který potřebuje pro primární obsah stránky, aby se stal viditelný ).

Pak je filmový pás (buď v Devtools nebo Performance Tool Webpagetest), který ukazuje inkrementální snímky prohlížeče vykreslování webu, takže můžete vidět, jaká stránka vypadá, když načte. Zkoumáním je můžete zjistit, který aktiva byla načtena, když a podívat se do způsobů, jak načíst některé z nich v dřívější době v časové ose.

V WebPagetestu, který Helvetica chválí pro svou inspirativní úroveň detailu - můžete také exportovat video zátěže a porovnat filmový pás s tímto konkurentem. "Jakmile budete připojit tečky, můžete prozkoumat, jak zlepšit zkušenosti uživatele tím, že tato aktiva do výřezu rychleji," vysvětluje Helvetica.

04. Vyjměte nepořádek

Helvetica zdůrazňuje, že rozhodnutí o návrhu mají dopad na výkon stejně, a že vaše první zatížení do výboru ideálně by nemělo být tak rychlé, jak je to možné, ale také jako nepořádek, jak je to možné.

Z tohoto důvodu budete muset pochopit sérii událostí, které se odehrávají, aby poskytly počáteční pohled na webovou stránku - kritickou dráhu vykreslování. Tyto události mohou být optimalizovány tím, že se vyhnete zatížení aktiv, které nejsou nezbytné a rozhodováním kolem výběru webových písem a obrazových formátů.

"Ujistěte se, že budete mít své SVG jako složitost, jak je to možné," navrhuje Helvetica formou příkladu. "Pak budete mít méně kód, když vykreslíte svg. Slyšel jsem to od vývojářů po celou dobu. Dostanou SVG od návrhářů a musí ho poslat zpět, protože by to ovlivnilo výkon. "

Tento článek byl původně publikován v čísle 303 sítě, nejprodávanější časopis na světě pro web designéry a vývojáře. Koupit Vydání 303. nebo Přihlásit se k odběru Net. .

Chcete dále vhled do polévky rychlosti vaší stránky?

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 dává jeho rozhovor planetě API: příběh výkonu & amp; Uživatelská zkušenost při generování New Yorku od 25 do 27. dubna 2018

Máte-li zájem o zajišťování vašich stránek Load Lightning rychle, ujistěte se, že chytíte jízdenku Generovat New York . Henri Helvetica bude konat dnešní a dokonce i experimentální postupy používané v měření webových aplikací a poskytováním výkonnějších zkušeností uživatelů, stejně jako nabízejí více informací o měření, jako je první barva, smysluplná barva a čas na interaktivní.

Generovat New York se koná od 25. do 27. dubna 2018. Dostaňte svou letenku .

Související články:

7 Expertní tipy pro přibíjení webového výkonu
3 Horní nástroje pro testování webového výkonu
Proč se výkon webu musí cítit rychle

4 Tipy pro zlepšení výkonu stránky

01. Endeavor na měření

02. Ztratit nějakou váhu stránky

03. Podívejte se, jak se stáváte

04. Vyjměte nepořádek

Chcete dále vhled do polévky rychlosti vaší stránky?

jak - Nejoblíbenější články

21 kroků k super rychlému javascriptu

Jak nakreslit asuka z evangelionu Neon Genesis

Vytvořte si vlastní kaligrafický kartáč v Illustrator

Začínáme s Babelem 7

Stáhnout soubory pro 3D Svět 232

Jak zdůraznit kontaktní místo obrazu

Strategie uživatelských uživatelů

Prozkoumejte kreativní kód s p5.js

Kategorie