7 sätt att göra din webbplats eller blogg ladda snabbare för besökare
Långsam sidlastningshastighet är en av de främsta anledningarna till att din webbplats inte får de träffar den förtjänar.
Eftersom publikens uppmärksamhet är helt låg är här några tips för att påskynda din webbplats för att se till att dina besökare håller fast.
1. Minska den faktiska storleken på din webbplats
Om din webbplats laddas långsammare än tre sekunder, kommer det troligtvis att överge det även innan hemsidan laddas. Att använda fel format för dina bilder kan enkelt uppblåsa din webbplats och förstöra en annars bra webbläsarupplevelse.
Över 70% av de mobila webbsidorna är över 1 MB och 12% över 4 MB! Tänk på att det krävs sju sekunder att ladda ner 1,5 MB på en bra 3G-anslutning. Den bästa praxisen är att behålla varje sida under 0,5 MB.
Lär dig skillnaden mellan JPG, PNG och GIF, och se till att du använder den upplösning du behöver.
Enligt GlobalStats är dessa de mest använda skärmupplösningarna för 2018:
- 22,55% använd en upplösning av 360 x 640 (mobil)
- 11,73% använd en upplösning av 1366 x 768
- 8,26% använd en upplösning av 1920 x 1080
- 4,91% använd en upplösning av 375 x 667 (mobil)
- 2,94% använder en upplösning av 1440 x 900
Detta är över 50% av alla användare, så överväga detta när du lägger till bilder på din webbplats.
2. Designa din webbplats för mobil
Enligt forskning som gjordes av Google förra året på mobil sidhastighet:
Den genomsnittliga tiden som krävs för att ladda en mobil målsida fullt ut är 22 sekunder, enligt en ny analys. Ändå lämnar 53% av de mobila besökarna en sida som tar längre tid än tre sekunder att ladda. Det är ett stort problem.
Över 75% av mobila webbplatser tar 10 sekunder eller mer att ladda över 3G. Tja över hälften av all trafik är via mobila enheter, och det här kommer inte troligen att gå ner. Så håll ett litet hemsidaavtryck för att göra mobila internetanvändare glada och se till att de håller fast!
Om du använder ett CMS som WordPress, Joomla eller Drupal Drupal vs Wordpress: Vad är det bästa Open Source-CMS? Drupal vs Wordpress: Vad är den bästa Open Source-CMS? Planerar du att skapa en webbplats men kan inte välja rätt öppen källkod? Så här väljer du mellan WordPress och Drupal. Läs mer, det finns plugins för att göra din webbplats mer mobilvänlig.
Alternativt kan du använda verktyg som bMobilized eller Duda Mobile för att konvertera din stationära webbplats till mobilen. Med detta sagt är det ofta bäst att designa en separat webbplats för att säkerställa den bästa upplevelsen för dina mobila användare.
Du bör också överväga att erbjuda en förenklad version av din webbplats med hjälp av projektet Accelerated Mobile Pages (AMP). Användning av AMP-sidor förbättrar sidladdningshastigheten på mobilen. Det finns strikta riktlinjer för JavaScript och CSS, men fördelarna är mätbara.
Oavsett vilken väg du bestämmer dig för att gå ner, se till att din mobilwebbplats är ett lättalternativ. Och försök att hålla under 0,5 MB rekommendationen per sida.
3. Se till att din webbplats är förminskad
Om du skriver din egen webbplats från början, redigera den regelbundet. När ditt projekt utvecklas lär du sannolikt mer effektiva sätt att göra saker, så se till att du går tillbaka genom din kod när du förbättrar.
Minifiera och kombinera din CSS, HTML och JavaScript. Om du till exempel använder en CDN som Cloudflare finns det en specifik flik för hastighetsförbättringar, där det första alternativet är Auto Minify. Om du använder en webbplatsbyggare (som Squarespace eller Weebly) är detta troligtvis gjort för dig som standard.
Se till att du testar din webbplats efter att ha aktiverat någonting som kombinerar eller minskar din webbplatss resurser. Experimentera med de olika alternativen för att se vad som är bäst för din webbplats, eftersom vissa funktioner kan bryta med Minify enabled.
4. Undvik att ladda skript när det inte behövs
Att behöva ladda flera JavaScript-filer innan de behövs sänker hastigheten på hela sidan i onödan. Undvik att ladda skript från tredje parts servrar om du kan.
Begär dessa, sänker din lasthastighet ytterligare och kan potentiellt utgöra en säkerhetsrisk. Håll dem på din webbplats server när det är möjligt.
Du kan använda uppskjuta eller async fördröja laddningen av specifika JavaScript-filer för att minska belastningen på besökarens enheter och förbättra hastigheten på dina sidor. Alternativt, för små skript kan du i kö JavaScript direkt i HTML-dokumentet.
Async kommer att berätta för webbläsaren att fortsätta att analysera HTML samtidigt som JavaScript-filerna hämtas. Pausen kommer sedan att hända efter att filen har laddats ner helt.
Under tiden kommer uppskjutningen att berätta för webbläsaren att utföra JavaScript-filer efter webbläsaren har slutat analysera hela HTML-dokumentet.
En webbläsare stannar som standard pausar HTML-filer medan några JavaScript-filer hämtas och exekveras.
Inlining JavaScript i HTML-dokumentet hjälper till genom att minska antalet filer som en webbläsare måste ladda ner innan du visar en sida. Du kan inline JavaScript genom att lägga till innehållet i en extern JavaScript-fil mellan skript taggar.
Du kan på ett säkert sätt använda uppskjutning och asynk på Google Analytics, Facebook Pixel och andra verktyg för analys och felrapportering utan att påverka sidans funktionalitet.
Slutligen, överväga om spårningskoder, analyser, extrafunktioner och annonser du har kört på din webbplats är nödvändiga. Använd mer lätta alternativ när det är möjligt, och skrapa dem om de inte lägger till något av värde för dig eller dina besökare.
5. Använd Caching och en CDN
Ett Content Delivery Network (CDN) kopierar din webbplats till servrar över hela världen och minskar datas resetid genom att ansluta besökare till en server geografiskt närmare dem. Statiskt innehåll kommer också att cachas och levereras av CDNs servrar.
Cloudflare är troligen den CDN du vet bäst, men Akamai och Amazon CloudFront är väl etablerade alternativ.
Se till att du också utnyttjar webbläsarens caching Detta är hur din webbläsare kompromissar din integritet Det här är hur din webbläsare kompromissar din integritet Din webbläsare avslöjar massor av information om vem du är, vart du än går och vad du vill. Här är detaljerna som läcker ut när du går online. Läs mer för att förbättra hastigheten på din webbplats för upprepade besökare. Browserkachning fungerar genom att hämta dessa filer från servern till användarens enhet.
Vid ytterligare sidvisningar eller besök laddas dessa filer lokalt från användarens enhet istället för att begära dem från den externa servern (beroende på filens utgångsdatum).
6. Bli av med icke-väsentliga plugins
Plugins ska endast användas vid behov. Detta är sant om du använder Wix, Weebly, WordPress eller Squarespace Squarespace vs. Wordpress: 7 Skillnader som kan överraska dig Squarespace vs Wordpress: 7 Skillnader som kan överraska dig I världarna av webbhotell och webbplatsbyggnad är få namn större än WordPress och Squarespace. Men hur bestämmer du vilken du ska använda? Läs mer eller något annat. Alla funktioner du kan göra genom att lägga till enkla CSS istället för ett plugin, borde du. Använd kodinjicering på Squarespace, använd CSS Customizer i WordPress och Custom CSS på Wix.
Plugins kan orsaka hög CPU eller minne på din server, vilket kan sakta ner eller till och med stoppa din webbplats från att ladda.
Om du använder WordPress är det troligt att du inte använder alla dess inbyggda funktioner. Inaktivera dessa med ett plugin som Clearfy.
Tänk alltid på de plugins du använder. Om du använder några funktioner i plugins som JetPack, överväga att ta bort dem helt och ersätt dem med mer lätta plugins som gör samma jobb.
7. Serverinställningar för att påskynda din webbplats
Serverfördröjning kommer att ha stor negativ inverkan på sidhastigheten och din PageRank.
Google rekommenderar att tiden till första byte (TTFB) är 1,3 sekunder eller mindre. Det här är den längsta förseningen innan en enhet börjar ladda ner en sida efter att ha kontaktat servern. Med det sagt har den genomsnittliga sidan en TTFB på över 2 sekunder, långt över deras rekommendation.
Delade värdar är vanligtvis orsaken till detta, men det finns några inställningar du kan konfigurera för att förbättra din serverkonsvarstid.
- Använd den senaste versionen av PHP som din webbplats är kompatibel med. Den senaste versionen (PHP 7.2) har massiva hastighetsförbättringar.
- Slå på “Håll vid liv”
- Aktivera HTTP / 2
- Dra nytta av HTTP Strict Transport Security (HSTS)
- Ställ in dina backup för att slutföra på natten
Om din webbplats är gjord i WordPress, se till att du använder en värd som specialiserat sig på WordPress-värd, som Bluehost. Detta gör att serverns inställningar konfigureras specifikt för WordPress-prestanda.
Färdig Tweaking? Testa din webbplats nu
Nu när du känner till den ideala sidladdningstiden, storleken och Time to First Byte (TTFB) som du ska sikta på, hur vet du vad din är?
Här är några av våra favoritverktyg för att testa din webbplats:
- varvy.com: Dessa verktyg testar din hastighet och prestanda på skrivbords- och mobilsidan och ger dig värdefulla guider om hur du förbättrar din webbplats
- Google PageSpeed Insight: Nyligen uppdaterad, Google PageSpeed-verktyget testar din hastighet och ger dig förbättringsförslag
- GTmetrix: ett bra verktyg med användbara råd
- WebPageTest: testa din webbplats på olika enheter, operativsystem och platser
- Pingdom: ett mycket populärt verktyg, som liknar WebPageTest med ett snyggare gränssnitt
Du kan testa din mobila webbplats med länkarna ovan, och även ThinkWithGoogle Mobile Test (drivs av WebPageTest). Resultaten ger dig specifika tips om vad du kan förbättra, med en beräknad belastningstidsreduktion om du följer tipsen.
De rekommenderade bästa metoderna förändras ständigt, så fortsätt kontrollera sidhastigheten regelbundet när du gör förbättringar.
För ännu mer värdefull inblick i hur din webbplats utför, kom ihåg att verifiera din domän på Google och Bing. De 5 främsta fördelarna med att verifiera din domän på Google och Bing De 5 främsta fördelarna med att verifiera din domän på Google och Bing Om du har din egen webbplats, varför ska du verifiera din domän på Google och Bing med sina verktyg för webbansvariga. Läs mer
Utforska mer om: Webbutveckling.