Hur du påskyndar din webbplats laddningstider
Vill du ha din webbplats att ladda snabbt? Den här artikeln kommer att lära dig hur du får din webbplats att ladda snabbare än du någonsin trodde var möjligt.
För att förstå varför en snabb webbplats är viktig, kolla in denna statistik: Den genomsnittliga smartphone-användaren lämnar en webbplats om den inte laddas inom 3 sekunder. Google anser nu sidhastighet ett viktigt övervägande för rankning av sökmotorer. 75% av internetanvändarna kom överens om att de inte skulle återvända till en webbplats om den inte laddades in inom 4 sekunder.
Att ha en snabb hemsida är oerhört viktigt för att hålla sig levande i den moderna eran av webbdesign. Det finns helt enkelt inget utrymme för långsamma webbplatser längre.
Förstå webbplatsens belastningstider
Belastningstiden för en webbplats är direkt korrelerad med efterfrågan på servern för att ladda webbplatsen. Ju fler HTTP-förfrågningar som görs till servern och de längre elementen tar för att göra, desto långsammare blir en webbplats.
Exempel på HTTP-förfrågningar är:
- laddar CSS stilark;
- laddningskript
- laddar bilder
- laddar HTML.
En annan faktor som spelar in i belastningstiden för en webbplats är storleken på enskilda filer och bilder. Stora högupplösta bilder kan ta 10x så lång tid att ladda som vanliga bilder och onödigt stora filer kan drastiskt sakta ner siddebilden.
Målet att göra en webbplats snabbt är att göra webbplatsen effektivare. Vi kan göra detta genom att göra en serie anpassningar till kodning, bilder och layout på vår hemsida.
Spårar sidhastighet
Vi kan spåra våra sidhastighetspoäng genom Googles sidhastighetsinsikt för sökning och Yahoo YSlow . Google har också en sidhastighets plugin som fungerar bra med Firefox när Pyroman är installerad.
Provwebbplats
Låt oss ta en webbplats som håller på att utvecklas och använda den som ett exempel för denna handledning. Den ursprungliga sidhastighetspoängen med Google är 48 av 100. Den körs på OS Commerce-plattformen.
Startsidans hastighetspoäng: 48 av 100
Steg 1: Komprimera bilder
Steg nummer ett är att komprimera alla bilder för webbaserad kvalitet. Det kan vi göra genom att använda standardbildskompressorn som är inbyggd i Googles Plugin för sidhastighet. Spara den komprimerade versionen av bilden i din lokala mapp på din dator och ladda upp bilden istället för den okomprimerade bilden.
Uppdaterad poäng: 61 av 100
Steg 2: skala bilder
Efter komprimering av bilder behöver vi sedan ändra våra bilder så att de skalas rätt för webbplatsen. Detta undviker serverlagring som behövs för att ändra storlek på bilder. Du kan skala bilder i Photoshop genom att justera dem till samma pixeldimensioner som de kommer att finnas i din HTML-kod.
Uppdaterad poäng: 72 av 100
Steg 3: Använd webbläsarens caching
Browser-caching-butiker cachade versioner av statiska resurser. Detta ökar sidhastigheten enormt och minskar serverns fördröjning. För att aktivera cachning vill du lägga till följande kod i din .htaccess-fil:
# BEGIN Expire headersExpiresActive OnExpiresDefault "access plus 1 seconds"ExpiresByType image/jpeg "access plus 2592000 seconds"ExpiresByType image/png "access plus 2592000 seconds"ExpiresByType image/gif "access plus 2592000 seconds"ExpiresByType text/css "access plus 604800 seconds"ExpiresByType text/javascript "access plus 604800 seconds"ExpiresByType application/javascript "access plus 604800 seconds"ExpiresByType text/html "access plus 2592000 seconds"# END Expire headersUppdaterad poäng: 78 av 100
Steg 4: kombinera bilder till CSS sprites
Bilder kan kombineras till CSS sprites för att minska antalet bilder som laddas på en given sida. CSS sprites är i grunden en stor bild som består av ett antal mindre bilder. Kombinera 5 bilder i en CSS-sprite är ett snabbt sätt att påskynda en webbplats genom att tillåta en webbläsare att ladda en bild istället för 5 bilder.
Det enklaste sättet att skapa CSS sprites är att använda Spriteme .
Var noga med att göra rätt ändringar i din CSS efter att ha skapat en bildsprite. Observera också installationsanvisningarna på webbplatsen. Detta program används genom att komma åt ett bokmärke via din webbläsare.
Uppdaterad poäng: 82 av 100
Steg 5: skjuta upp analys av JavaScript
Javascript som ligger längst upp i ett HTML-dokument kan blockera sidåtergivning som saktar en sida oerhört. För att skjuta upp tolkning av Javascript är det bäst att kalla dessa skript i slutet av ett HTML-dokument snarare än i början.
Du kan också skjuta upp tolkning av Javascript genom att använda uppskjutningsattributet. Uppskjutningsattributet används i HTML-koden för att skjuta upp parsing av javascript tills sidan laddas. Till exempel:
Uppdaterad poäng: 86 av 100
Steg 6: Minifiera HTML, CSS och JavaScript
HTML, CSS och JavaScript kan alla "minimeras" eller komprimeras för att påskynda laddningstiden. Det finns ett antal resurser på webben som minimerar dessa typer av filer, minifier är ett utmärkt exempel.
Uppdaterad poäng: 90 av 100
Övriga justeringar och överväganden
CDN s
Du kan också överväga att ladda statiska resurser från din webbplats på en CDN eller "Content Delivery Network". En CDN är ett annat sätt att drastiskt minska serverns fördröjning genom att lagra statiska resurser på ett nätverk av snabblastningsservrar. Noterbara användare av CDN: er inkluderar ESPN och NBA.com.
Kombinera JavaScript och CSS-filer
Att ladda flera JavaScript- och CSS-filer kan döda en webbplatsens laddningstid. Anpassade CMS-baserade webbplatser som använder plugins och temafunktioner kan ofta ha 15 eller fler JavaScript-filer och lika många Cascading Style Sheets. Dessa skript och stilark kan kombineras till en stor fil vardera. Att göra detta kommer att drastiskt påskynda sidladdningstiden och göra din webbplats besökare stolta över din webbplatss snabba belastningstider.
Mobil webbutveckling
När du bygger smartphoneapplikationer för smartphoneanvändare är det viktigt att du följer Google Googles riktlinjer för webbansvariga för smartphone-applikationer. Medan mobila webbplatser och appindexering fortfarande är ett pågående arbete från Google, är det viktigt att vara uppmärksam på Googles krav på smartphone-utveckling. Förvänta sig stora förändringar de närmaste 5 åren för hur Google indexerar mobila webbplatser och mobilappar. Bli inte förvånad om sidhastighet är ett viktigt övervägande i Googles indexering av mobila webbsidor.
Slutsats
Genom att göra flera justeringar för att påskynda vår hemsida halverade vi nästan vår hemsida laddningstid! Detta kan bokstavligen vara skillnaden mellan rankning på första sidan i Google eller den femte sidan. Det kan också vara skillnaden mellan att landa 200 kunder och att permanent förlora 75% av dina kunder på grund av långsam sidlastningstider.
Att ha en snabb hemsida är obligatorisk för framgång på webben. Som en allmän regel är det en bra idé att behålla en sidhastighet på 80 eller högre på alla sidor på en webbplats.
Hur mycket tid spenderar du på att förbättra webbplatshastigheten? Vilka tips skulle du dela med dig? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, hastighetsbild via Shutterstock.