Webbprestanda

Webbprestanda avser den hastighet med vilken webbsidor laddas ner och visas i användarens webbläsare . Webbprestandaoptimering (WPO) , eller webbplatsoptimering är kunskapsområdet för att öka webbprestanda.

Snabbare nedladdningshastigheter för webbplatser har visat sig öka besökarnas behållning och lojalitet och användarnöjdhet, särskilt för användare med långsamma internetanslutningar och de på mobila enheter . Webbprestanda leder också till att mindre data färdas över webben, vilket i sin tur sänker en webbplatss strömförbrukning och miljöpåverkan. Vissa aspekter som kan påverka hastigheten på sidladdningen inkluderar webbläsar-/servercache, bildoptimering och kryptering (till exempel SSL), vilket kan påverka den tid det tar för sidor att rendera. Webbsidans prestanda kan förbättras genom tekniker som flerskiktscache, lättviktsdesign av presentationslagerkomponenter och asynkron kommunikation med komponenter på serversidan.

Historia

Under det första decenniet eller så av webbens existens var förbättring av webbprestanda främst inriktad på att optimera webbplatskod och pressa hårdvarubegränsningar. Enligt boken Web Performance Tuning från 2002 av Patrick Killelea, var några av de tidiga teknikerna som användes att använda enkla servlets eller CGI, öka serverminnet och leta efter paketförlust och omsändning. Även om dessa principer nu utgör mycket av den optimerade grunden för internetapplikationer, skiljer de sig från nuvarande optimeringsteori genom att det var mycket mindre försök att förbättra webbläsarens visningshastighet.

Steve Souders myntade termen "webprestandaoptimering" 2004. Vid den tiden gjorde Souders flera förutsägelser angående den inverkan som WPO som en "framväxande industri" skulle medföra på webben, som att webbplatser är snabba som standard, konsolidering, webbstandarder för prestanda, miljöpåverkan av optimering och hastighet som en differentiator.

En viktig poäng som Souders gjorde 2007 är att minst 80 % av tiden som det tar att ladda ner och visa en webbplats styrs av front-end-strukturen. Denna fördröjningstid kan minskas genom medvetenhet om typiskt webbläsarbeteende, såväl som om hur HTTP fungerar.

Optimeringstekniker

Webbprestandaoptimering förbättrar användarupplevelsen (UX) när du besöker en webbplats och är därför mycket önskvärd av webbdesigners och webbutvecklare . De använder flera tekniker som effektiviserar webboptimeringsuppgifter för att minska webbsidans laddningstid. Denna process är känd som frontend-optimering (FEO) eller innehållsoptimering. FEO koncentrerar sig på att minska filstorlekarna och "minimera antalet förfrågningar som behövs för att en given sida ska laddas."

Utöver teknikerna som listas nedan är användningen av ett innehållsleveransnätverk – en grupp proxyservrar spridda över olika platser runt om i världen – ett effektivt leveranssystem som väljer en server för en specifik användare baserat på nätverksnärhet. Vanligtvis väljs servern med snabbast svarstid.

Följande tekniker är vanliga webboptimeringsuppgifter och används ofta av webbutvecklare:

Webbläsare öppnar separata TCP-anslutningar ( Transmission Control Protocol) för varje HTTP-förfrågan (Hypertext Transfer Protocol) som skickas när en webbsida laddas ner. Dessa förfrågningar sammanlagt antalet sidelement som krävs för nedladdning. En webbläsare är dock begränsad till att endast öppna ett visst antal samtidiga anslutningar till en enda värd. För att förhindra flaskhalsar reduceras antalet enskilda sidelement med hjälp av resurskonsolidering där mindre filer (som bilder) buntas ihop till en fil. Detta minskar HTTP-förfrågningar och antalet "tur och retur" som krävs för att ladda en webbsida.

Webbsidor är konstruerade av kodfiler som JavaScript och Hypertext Markup Language (HTML). I takt med att webbsidor växer i komplexitet, ökar även deras kodfiler och därefter deras laddningstider. Filkomprimering kan minska kodfiler med så mycket som 80 procent, och därigenom förbättra webbplatsens lyhördhet.

Webbcacheoptimering minskar serverbelastning, bandbreddsanvändning och latens . CDN:er använder dedikerad programvara för webbcache för att lagra kopior av dokument som passerar genom deras system. Efterföljande förfrågningar från cachen kan uppfyllas om vissa villkor gäller. Webbcacher finns antingen på klientsidan (framåt position) eller webbserversidan (omvänd position) av ett CDN. Webbläsare kan också lagra innehåll för återanvändning via HTTP-cachen eller webbcachen . Förfrågningar som webbläsare gör dirigeras vanligtvis till HTTP-cachen för att validera om ett cachelagrat svar kan användas för att uppfylla en begäran. Om en sådan matchning görs, uppfylls svaret från cachen. Detta kan vara till hjälp för att minska nätverkslatens och kostnader förknippade med dataöverföring. HTTP-cachen konfigureras med hjälp av förfrågnings- och svarsrubriker.

Kodminifiering skiljer skillnader mellan koder skrivna av webbutvecklare och hur nätverkselement tolkar kod. Minifiering tar bort kommentarer och extra mellanslag samt crunch variabelnamn för att minimera kod, vilket minskar filstorlekarna med så mycket som 60 %. Förutom cachning och komprimering tar förlustkompressionstekniker (liknande de som används med ljudfiler) bort icke-essentiell rubrikinformation och sänker originalbildkvaliteten på många högupplösta bilder. Dessa förändringar, såsom pixelkomplexitet eller färggraderingar, är transparenta för slutanvändaren och påverkar inte märkbart uppfattningen av bilden. En annan teknik är att ersätta rastergrafik med upplösningsoberoende vektorgrafik . Vektorsubstitution är bäst lämpad för enkla geometriska bilder. ^{[ citat behövs ]}

Lat inläsning av bilder och video minskar den initiala sidladdningstiden, initial sidvikt och systemresursanvändning, vilket alla har positiva effekter på webbplatsens prestanda. Den används för att skjuta upp initieringen av ett objekt tills det behövs. Webbläsaren laddar in bilderna på en sida eller ett inlägg när de behövs som när användaren rullar ner på sidan och inte alla bilder på en gång, vilket är standardbeteendet, och tar naturligtvis längre tid.

HTTP/1.x och HTTP/2

Eftersom webbläsare använder flera TCP-anslutningar för parallella användarförfrågningar, kan överbelastning och webbläsarmonopolisering av nätverksresurser uppstå. Eftersom HTTP/1-förfrågningar kommer med tillhörande overhead påverkas webbprestandan av begränsad bandbredd och ökad användning.

Jämfört med HTTP/1, HTTP/2

är binär istället för text
är helt multiplexerad istället för beställd och blockerad
kan därför använda en koppling för parallellitet
använder header- komprimering för att minska overhead
tillåter servrar att "pusha" svar proaktivt till klientcachar

Istället för en webbplatss värdserver används CDN tillsammans med HTTP/2 för att bättre kunna betjäna slutanvändaren med webbresurser som bilder, JavaScript-filer och Cascading Style Sheet- filer (CSS) eftersom en CDN:s plats vanligtvis ligger närmare närhet till slutanvändaren.

Metrik

Under de senaste åren har flera mätvärden introducerats som hjälper utvecklare att mäta olika aspekter av prestandan på sina webbplatser. Under 2019 introducerade Google mätvärden som Time to First Byte (TTFB), First Contentful Paint (FCP), First Paint (FP), First Input Delay (FID), Cumulative Layout Shift (CLS) och Largest Contentful Paint (LCP) tillåter för webbplatsägare att få insikter i problem som kan skada prestandan på deras webbplatser, vilket gör att det verkar trögt eller långsamt för användaren. Andra mätvärden, inklusive laddningstid, anslutningstid, total sidstorlek, hjälper till att ge en korrekt bild av fördröjningar och fördröjningar som inträffar på nätverksnivå som kan sakta ner en webbplats.

Moduler för att mäta mätvärden som TTFB, FCP, LCP, FP etc är försedda med stora frontend-javascript-bibliotek som React , NuxtJS och Vue . Google publicerar ett bibliotek, core-web-vitals-biblioteket som möjliggör enkel mätning av dessa mätvärden i frontend-applikationer. Utöver detta tillhandahåller Google även Lighthouse, en Chrome-dev-tools-komponent och PageSpeed Insight, en webbplats som gör det möjligt för utvecklare att mäta och jämföra prestandan på sin webbplats med Googles rekommenderade minimi- och maximivärden.

Utöver detta hjälper verktyg som Network Monitor från Mozilla Firefox att ge insikt i nedgångar på nätverksnivå som kan uppstå under överföring av data.