Hvordan øke hastigheten på nettstedet ditt
Vil du at nettstedet ditt skal lastes raskt? Denne artikkelen vil lære deg hvordan du lager nettstedet ditt raskere enn du noensinne trodde mulig.
For å forstå hvorfor å ha en rask nettside er viktig, sjekk ut denne statistikken: Den gjennomsnittlige smarttelefonbrukeren vil legge ut et nettsted hvis det ikke lastes inn innen 3 sekunder; Google vurderer nå sidens hastighet en viktig vurdering for søkemotorrangeringer; 75% av Internett-brukere ble enige om at de ikke ville gå tilbake til et nettsted hvis det ikke ble lastet inn innen 4 sekunder.
Å ha en rask nettside er svært viktig for å holde seg i live i den moderne tiden med webdesign. Det er ganske enkelt ikke noe rom for sakte nettsteder lenger.
Forstå nettstedets belastningstider
Lastetiden til et nettsted er direkte korrelert med etterspørselen på serveren for å laste nettstedet. Jo flere HTTP-forespørsler som gjøres til serveren og jo lengre elementer tar for å gjengjøre, desto langsommere blir et nettsted.
Eksempler på HTTP-forespørsler er:
- laster CSS stilark;
- lasting skript;
- laster bilder
- laster inn HTML.
En annen faktor som spiller inn i lastetiden til et nettsted er størrelsen på individuelle filer og bilder. Store bilder med høy oppløsning kan ta 10 ganger så lang tid å laste som vanlige bilder, og unødvendig store filer kan drastisk redusere sidegengivelsen.
Målet med å lage et nettsted raskt er å gjøre nettsiden mer effektiv. Vi kan gjøre dette ved å gjøre en rekke tilpasninger til kodingen, bildene og utformingen av nettstedet vårt.
Sporer sidens hastighet
Vi kan spore våre sidens hastighetsscorer gjennom Googles sidehastighetsinnsikt for søk og Yahoo YSlow . Google har også en sidehastighetstillegg som fungerer bra med Firefox når Firebug er installert.
Eksempel nettsted
La oss ta et nettsted som er under utvikling, og bruk det som et eksempel for denne opplæringen. Den første siden Speed-poengsum med Google er 48 av 100. Den kjører på OS Commerce-plattformen.
Startspor Speed score: 48 av 100
Trinn 1: Komprimere bilder
Trinn nummer ett er å komprimere alle bilder for nettbasert kvalitet. Vi kan gjøre dette ved å bruke standardbildekompressoren som er innebygd i Googles Page Speed-plugin. Lagre den komprimerte versjonen av bildet i din lokale mappe på datamaskinen din, og last opp bildet i stedet for det ukomprimerte bildet.
Oppdatert poengsum: 61 av 100
Trinn 2: Skala bilder
Etter å ha komprimert bilder må vi da endre bildene våre slik at de skaleres riktig for nettsiden. Dette unngår serverlagring som trengs for å endre størrelse på bilder. Du kan skalere bilder i Photoshop ved å justere dem til de samme pixeldimensjonene som de vil være i HTML-koden din.
Oppdatert poeng: 72 av 100
Trinn 3: bruk nettleservaching
Nettleservifter lagrer cached versjoner av statiske ressurser. Dette øker hastigheten på sidens hastighet enormt og reduserer serverforsinkelsen. For å aktivere caching, vil du legge til følgende kode i .htaccess-filen din:
# 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 headersOppdatert poeng: 78 av 100
Trinn 4: kombinere bilder til CSS sprites
Bilder kan kombineres til CSS sprites for å kutte ned antall bilder lastet på en gitt side. CSS sprites er i utgangspunktet ett stort bilde som består av en rekke mindre bilder. Kombinere 5 bilder til en CSS-sprite er en rask måte å øke hastigheten på et nettsted ved å la en nettleser legge et bilde i stedet for 5 bilder.
Den enkleste måten å lage CSS sprites er å bruke Spriteme .
Pass på at du gjør de riktige endringene i CSS etter at du har opprettet et image sprite. Vær også oppmerksom på installasjonsinstruksjonene på nettstedet. Dette programmet brukes ved å få tilgang til et bokmerke via nettleseren din.
Oppdatert poeng: 82 av 100
Trinn 5: Utsett parsing av JavaScript
Javascript som er plassert mot toppen av et HTML-dokument, kan blokkere sidegengivelse som reduserer en side enormt. For å utsette parsing av Javascript, er det best å ringe disse skriptene på slutten av et HTML-dokument i stedet for i begynnelsen.
Du kan også utsette parsing av Javascript ved å bruke deferattributtet. Utsettelsesattributtet brukes i HTML-koden for å utsette parsing av javascript til siden er lastet inn. For eksempel:
Oppdatert poeng: 86 av 100
Trinn 6: Rediger HTML, CSS og JavaScript
HTML, CSS og JavaScript kan alle bli "minifisert" eller komprimert for å øke sin belastningstid. Det finnes en rekke ressurser på nettet som reduserer disse filtypene, minifier er et utmerket eksempel.
Oppdatert poeng: 90 av 100
Andre justeringer og overveielser
CDN s
Du kan også vurdere å laste statiske ressurser fra nettstedet ditt på en CDN eller "Content Delivery Network". En CDN er en annen måte å drastisk redusere serverlagring ved å lagre statiske ressurser på et nettverk av hurtiglastingsservere. Merkbare brukere av CDN er ESPN og NBA.com.
Kombinerer JavaScript og CSS-filer
Lasting av flere JavaScript- og CSS-filer kan drepe et nettsteds ladetid. Egendefinerte CMS-baserte nettsteder som bruker plugin og temafunksjoner, kan ofte ha 15 eller flere JavaScript-filer og like mange Cascading Style Sheets. Disse skript og stilark kan kombineres til en stor fil hver. Å gjøre dette vil drastisk øke hastigheten på sidetiden, og gjør nettstedet ditt besøkende begeistret med nettstedets hurtige belastningstider.
Mobil nettsideutvikling
Når du bygger smarttelefonprogrammer for smarttelefonbrukere, er det viktig å holde fast i Googles retningslinjer for nettredaktører for smarttelefonprogrammer. Mens mobile nettsteder og appindeksering fortsatt er et arbeid pågår av Google, er det viktig å være oppmerksom på Googles krav til smarttelefonutvikling. Forventer store endringer de neste 5 årene for hvordan Google indekserer mobilnettsteder og mobilapper. Ikke bli overrasket om sidens hastighet er et viktig hensyn i Googles indeksering av mobilwebsite-applikasjoner.
Konklusjon
Ved å gjøre flere tilpasninger for å øke hastigheten på nettstedet vårt, halverte vi nesten vår nettsidelastetid! Dette kan bokstavelig talt være forskjellen mellom rangering på første side av Google eller den femte siden. Det kan også være forskjellen mellom å lande 200 kunder og permanent miste 75% av kundene dine på grunn av langsom sidelastningstid.
Å ha en rask nettside er obligatorisk for suksess på nettet. Som en generell regel, er det en god idé å opprettholde en sidehastighet på 80 eller høyere på alle sider på et nettsted.
Hvor mye tid bruker du økt nettsidehastighet? Hvilke tips vil du dele? Gi oss beskjed i kommentarene.