När vi pratar om prestanda för en website pratar vi ofta om hastighet. Har din sida en dålig sidhastighet? En webbplats som tar lång tid på sig att ladda gör att du tappar sidvisningar, konverteringar och riskerar minskad kundnöjdhet.
Sidhastighet är ett mått på hur snabbt innehållet på din sida laddas. Sidhastighet förväxlas ofta med "websitehastighet", som faktiskt är sidhastigheten för ett exempel på sidvisningar på en webbplats. Sidhastigheten kan beskrivas antingen i "sidladdningstid" (den tid det tar att visa innehållet fullständigt på en viss sida) eller "tid till första byte" (hur lång tid det tar för din webbläsare att ta emot den första byte av information från webbservern).
Google har angett att webbplatsens hastighet (och som ett resultat sidhastighet) är en av de signaler som används av dess algoritm för att ranka sidor. Och forskning har visat att Google kan specifikt mäta tid till första byte som när det tar hänsyn till sidhastighet. Dessutom innebär en långsam sidhastighet att sökmotorer kan genomsöka färre sidor med sin tilldelade genomsökningsbudget, och detta kan påverka din indexering negativt.
Sidhastigheten är också viktig för användarupplevelsen. Sidor med längre laddningstid tenderar att ha högre avvisningsfrekvenser och lägre genomsnittlig tid på sidan. Längre laddningstider har också visat sig påverka konverteringar negativt.
Här är några av de många sätt att öka din sidhastighet:
Använd Gzip, ett program för filkomprimering, för att minska storleken på dina CSS-, HTML- och JavaScript-filer som är större än 150 byte.
Använd inte gzip på bildfiler. Komprimera dessa stället i ett program som Photoshop där du kan behålla kontrollen över bildkvaliteten.
Genom att optimera din kod (inklusive att ta bort blanksteg, kommatecken och andra onödiga tecken) kan du öka sidhastigheten dramatiskt. Ta också bort kodkommentarer, formatering och oanvänd kod. Google rekommenderar att du använder CSSNano och UglifyJS.
Varje gång en sida omdirigerar till en annan sida får din besökare extra tid att vänta på att HTTP-begäran-svar-cykeln ska slutföras. Till exempel om ditt mobilomdirigeringsmönster ser ut så här:
exempel.com -> www.exempel.com -> m.exempel.com -> m.exempel.com/hem
... var och en av dessa två ytterligare omdirigeringar gör att din sida laddas långsammare.
Webbläsare måste bygga ett DOM-träd genom att analysera HTML innan de kan återge en sida. Om din webbläsare stöter på ett skript under denna process måste den stoppa och köra det innan det kan fortsätta.
Google föreslår att man undviker och minimerar användningen av blockering av JavaScript.
Webbläsare cachar mycket information (formatmallar, bilder, JavaScript -filer och mer) så att när en besökare kommer tillbaka till din webbplats behöver webbläsaren inte ladda om hela sidan. Använd ett verktyg som YSlow för att se om du redan har ett utgångsdatum inställt för din cache. Ställ sedan in för hur länge du vill att informationen ska cachas. I många fall, om inte din webbdesign ändras ofta, är ett år en rimlig tidsperiod.
Din servers svarstid påverkas av mängden trafik du får, de resurser som varje sida använder, programvaran som din server använder och den värdlösning du använder. För att förbättra din servers svarstid, leta efter flaskhalsar för prestanda som långsamma databasfrågor, långsam routing eller brist på tillräckligt minne och åtgärda dem. Den optimala serverns svarstid är under 200 ms.
Innehållsdistributionsnät (CDN), även kallade innehållsleveransnätverk, är nätverk av servrar som används för att distribuera belastningen av att leverera innehåll. I huvudsak lagras kopior av din webbplats i flera geografiskt olika datacenter så att användarna får snabbare och mer tillförlitlig åtkomst till din webbplats.
Se till att dina bilder inte är större än de behöver vara, att de är i rätt filformat (PNG -filer är i allmänhet bättre för grafik med färre än 16 färger medan JPEG -bilder i allmänhet är bättre för fotografier) och att de är komprimerade för webben .
Använd CSS -sprites för att skapa en mall för bilder som du använder ofta på din webbplats som knappar och ikoner. CSS sprites kombinerar dina bilder till en stor bild som laddas på en gång (vilket betyder färre HTTP -begäranden) och visar sedan bara de sektioner som du vill visa. Det innebär att du sparar laddningstid genom att inte låta användare vänta på att flera bilder ska laddas.
Omslagsfoto av Mathew Schwartz på Unsplash