Sådan fremskynder du dine webstedsbelastningstider
Ønsker du, at dit websted skal indlæses flammende hurtigt? Denne artikel vil lære dig, hvordan du laver dit websted hurtigere, end du nogensinde troede var muligt.
For at forstå, hvorfor det er vigtigt at have en hurtig hjemmeside, skal du tjekke disse statistikker: Den gennemsnitlige smartphone-bruger vil efterlade en hjemmeside, hvis den ikke indlæses inden for 3 sekunder. Google betragter nu sidens hastighed en vigtig overvejelse for søgemaskinens placeringer; 75% af internetbrugerne var enige om, at de ikke ville vende tilbage til en hjemmeside, hvis den ikke blev indlæst inden for 4 sekunder.
At have en hurtig hjemmeside er yderst afgørende for at holde sig i live i den moderne æra af webdesign. Der er simpelthen ikke plads til langsomme hjemmesider længere.
Forståelse af webstedsbelastningstider
Belastningstiden for et websted er direkte korreleret med efterspørgslen på serveren for at indlæse hjemmesiden. Jo flere HTTP-anmodninger, der er foretaget til serveren og de længere elementer, der skal gøres, desto langsommere er et websted.
Eksempler på HTTP-anmodninger er:
- indlæser CSS stilark;
- indlæsning af scripts;
- indlæser billeder;
- indlæser HTML.
En anden faktor, der spiller ind i belastningstiden for et websted, er størrelsen af individuelle filer og billeder. Store billeder med høj opløsning kan tage 10 gange så lang tid at indlæse som normale billeder, og unødigt store filer kan drastisk sænke sidegengivelsen.
Målet med at lave et websted hurtigt er at gøre hjemmesiden mere effektiv. Vi kan gøre dette ved at foretage en række tilpasninger til kodning, billeder og layout på vores hjemmeside.
Sporing af sidens hastighed
Vi kan spore vores sidehastighedsscorer gennem Googles sidehastighedskendskab til søgning og Yahoo's YSlow . Google har også en sidehastighedstast, der fungerer godt med Firefox når Firebug er installeret.
Prøvewebsted
Lad os tage et websted, der er under udvikling, og bruge det som et eksempel til denne vejledning. Dens oprindelige Page Speed score med Google er 48 ud af 100. Den kører på OS Commerce platformen.
Start side Speed score: 48 ud af 100
Trin 1: Komprimere billeder
Trin nummer et er at komprimere alle billeder til web-baseret kvalitet. Vi kan gøre dette ved at bruge standard billedkompressor indbygget i Googles Page Speed-plugin. Gem den komprimerede version af billedet i din lokale mappe på din computer og genoplæs billedet i stedet for det ukomprimerede billede.
Opdateret score: 61 ud af 100
Trin 2: Skal billeder
Efter komprimering af billeder skal vi derefter ændre vores billeder, så de skaleres korrekt for hjemmesiden. Dette undgår serverlag, der er nødvendigt for at ændre størrelsen på billeder. Du kan skalere billeder i Photoshop ved at justere dem til de samme pixeldimensioner, som de vil være i din HTML-kode.
Opdateret score: 72 ud af 100
Trin 3: Brug browser caching
Browser caching butikker cached versioner af statiske ressourcer. Dette fremskynder sidens hastighed enormt og reducerer serverlag. For at aktivere caching, vil du gerne tilføje følgende kode til 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 headersOpdateret score: 78 ud af 100
Trin 4: kombiner billeder i CSS sprites
Billeder kan kombineres til CSS sprites for at reducere antallet af billeder, der er indlæst på en given side. CSS sprites er stort set et stort billede, der består af en række mindre billeder. Kombination af 5 billeder til en CSS-sprite er en hurtig måde at fremskynde et websted ved at tillade en browser at indlæse et billede i stedet for 5 billeder.
Den nemmeste måde at oprette CSS sprites på er at bruge Spriteme .
Sørg for at foretage de korrekte ændringer i din CSS efter oprettelse af et billedsprit. Vær også opmærksom på installationsvejledningen på hjemmesiden. Dette program bruges ved at få adgang til et bogmærke via din browser.
Opdateret score: 82 ud af 100
Trin 5: Udsky parsering af JavaScript
Javascript, der er placeret øverst i et HTML-dokument, kan blokere sidegengivelse, hvilket sænker en side enormt. For at udsætte parsing af Javascript, er det bedst at kalde disse scripts i slutningen af et HTML-dokument snarere end i starten.
Du kan også udsætte parsing af Javascript ved hjælp af udsættelsesattributten. Udskyderattributten bruges i HTML-koden til at udsætte parsing af javascript, indtil siden er indlæst. For eksempel:
Opdateret score: 86 ud af 100
Trin 6: Reducer HTML, CSS og JavaScript
HTML, CSS og JavaScript kan alle "minimeres" eller komprimeres for at fremskynde deres indlæsningstid. Der er en række ressourcer på nettet, der reducerer disse typer af filer, minifier er et glimrende eksempel.
Opdateret score: 90 ud af 100
Andre tilpasninger og overvejelser
CDN s
Du kan også overveje at indlæse statiske ressourcer fra dit websted på et CDN eller "Content Delivery Network". En CDN er en anden måde at drastisk reducere serverforsinkelsen ved at gemme statiske ressourcer på et netværk af hurtige indlæsningsservere. Noterbare brugere af CDN er ESPN og NBA.com.
Kombinerer JavaScript og CSS filer
Indlæsning af flere JavaScript- og CSS-filer kan dræbe en websteds belastningstid. Brugerdefinerede CMS-baserede hjemmesider, der bruger plugins og temafunktioner, kan ofte have 15 eller flere JavaScript-filer og lige så mange Cascading Style Sheets. Disse Scripts og Style Sheets kan kombineres i en stor fil hver. Gør dette vil drastisk fremskynde sideindlæsningstiden og gøre din hjemmeside besøgende begejstrede med din hjemmeside hurtige belastningstider.
Mobil hjemmeside udvikling
Når du opbygger smartphoneapplikationer til smartphone-brugere, er det vigtigt at holde sig i Googles retningslinjer for webmastere for smartphone-applikationer. Mens mobilwebsites og appindeksering stadig er et arbejde i gang fra Google, er det vigtigt at være opmærksom på Googles krav til smartphoneudvikling. Forvent store større ændringer i de næste 5 år for, hvordan Google indekserer mobile websteder og mobilapps. Bliv ikke overrasket, hvis sidens hastighed er en vigtig betragtning i Googles indeksering af mobilwebsiteapplikationer.
Konklusion
Ved at foretage flere tilpasninger for at fremskynde vores hjemmeside halverede vi næsten vores websteds load time! Dette kan bogstaveligt talt være forskellen mellem placering på første side af Google eller den femte side. Det kan også være forskellen mellem at lande 200 kunder og tabe 75% af dine kunder permanent på grund af langsom sideindlæsningstider.
At have en hurtig hjemmeside er obligatorisk for succes på internettet. Som en generel regel er det en god ide at opretholde en sidehastigheds score på 80 eller højere på alle sider på et websted.
Hvor meget tid bruger du til at forbedre hjemmesiden hastighed? Hvilke tip vil du dele? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, hastighed billede via Shutterstock.