Ultimate Guide To Web Optimization (Tips och bästa praxis)

Web optimering är en viktig del av webbutveckling och underhåll, men också något som ofta förbises av webmasters. Tänk bara på de pengar du kan spara, och hur det kan bidra till att öka din läsare och trafik när de görs på rätt sätt.

Om du inte har gjort några optimeringar till din webbplats (eller blogg) hittills eller bara nyfiken på hur det kan hjälpa till att påskynda din webbplats, vänligen kolla på den här listan över optimeringstips som vi har sammanställt.

Vi har delat upp saker i tre separata sektioner för bättre läsbarhet - respektive server-sida optimering, tillgångar optimering (som innehåller webbkomponenter som CSS, Javascript, bilder, etc.) och plattform, där vi ska fokusera på WordPress optimering. Vid det sista avsnittet slänger vi in ​​ett par länkar som vi tyckte var användbara. Hela listan efter hopp.

Optimering: Server-sida

1. Välj en anständig webbhotell

   Ditt webbhotell konto har inget direkt förhållande till de optimeringar du ska utföra men vi valde att välja rätt webbhotell konto så viktigt vi bestämde oss för att först göra det till din uppmärksamhet. Hosting konto är grunden för din webbplats / blogg där det är säkerhet, tillgänglighet (cPanel, FTP, SSH), server stabilitet, priser och kundsupport alla spelar viktiga roller. Du måste se till att du är i goda händer.

   Rekommenderad läsning: Hur man väljer en webbhotell av wikiHow är en bra artikel som ger dig steg och tips du borde veta innan du köper ett webbhotellskonto.

2. Värdar tillgångar separat

   När vi nämner tillgångar menade vi webbkomponenter som bilder och statiska skript som inte kräver serverhantering. Dessa inkluderar alla webbgrafik, bilder, Javascripts, Cascading Style Sheets (CSS), etc. Hosting-tillgångar separat är inte ett måste, men vi har sett ett enormt resultat när det gäller serverns stabilitet med denna implementering när bloggen hade en trafikspets.

   Rekommenderad läsning: Maximera parallella nedladdningar i Carpool Lane.

3. Kompression med GZip

   Kort sagt, innehållet reser från server sida till klientsida (vicet versa) när en HTTP-begäran görs. Att komprimera innehållet för att skicka kraftigt minskar den tid som behövs för att behandla varje förfrågan.

   GZip är ett av de bästa sätten att göra detta och det varierar beroende på vilken typ av servrar du använder. Till exempel, Apache 1.3 använder mod_zip, Apache 2.x använder mod_deflate och här är hur du gör det i Nginx. Här är några riktigt bra artiklar för att få dig bekant med serverns komprimeringar:

   • Snabba upp en webbplats genom att aktivera Apache-filkomprimering
   • Komprimera webbutgång med mod_gzip och apache
   • Hur man optimerar din webbplats med GZIP-komprimering
   • Server-kompression för ASP

4. Minimera omdirigeringar

   Webmasters gör URL-omdirigering (om det är Javascript eller META-omdirigeringar) hela tiden. Ibland är det meningen att peka användare från en gammal sida till ny, eller bara vägleda användare till rätt sida. Varje omdirigering skapar en ytterligare HTTP-förfrågan och RTT (round-trip-time). Ju mer omdirigering du har, desto långsammare användare kommer till destinationssidan.

   Rekommenderad läsning: Undvik omdirigeringar av Google Code ger dig en bra översikt över frågan. I artikeln rekommenderas också några praktiska sätt att minimera omdirigering för att öka serverhastigheten.

5. Minska DNS-sökning

   Enligt Yahoo! Developer Network Blog, Det tar ungefär 20-120 millisekunder för DNS (Domain Name System) för att lösa IP-adress för ett visst värdnamn eller domännamn och webbläsaren kan inte göra någonting förrän processen är korrekt genomförd.

   Författare Steve Souders föreslog att splittring av dessa komponenter över minst två men inte mer än fyra värdnamn minskar DNS-sökning och tillåter hög grad parallella nedladdningar. Läs mer på artikeln.

Optimering: Tillgångarna (CSS, Javascripts, Images)

1. Sammanfoga flera Javascripts till en

   Folk på rakaz.nl delar hur du kan kombinera flera Javascripts som:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   In i en enda fil genom att ändra webbadressen till:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   genom att manipulera .htaccess och använda PHP. Klicka här att läsa mer.

2. Komprimera Javascript och CSS

   minify är en PHP5-app som kan kombinera flera CSS- och Javascript-filer, komprimera innehållet (dvs. borttagning av onödig whitespace / kommentarer) och tjäna resultaten med HTTP-kodning (gzip / deflate) och rubriker som möjliggör optimal caching på klientsidan.

   

   Komprimera dem på nätet!Det finns också några webbtjänster som gör det möjligt att manuellt komprimera dina Javascripts och CSS-filer online. Här är få vi kommer att få veta:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS Optimizer (CSS)

3. Anpassa Header Expiry / Caching

   Kredit: httpwatch

   Genom att använda en anpassad Expiry header har dina webbkomponenter som bilder, statiska filer, CSS, Javascript hoppat över onödig HTTP-begäran när samma användare laddar sidan för andra gången. Det minskar den bandbredd som behövs och definetely hjälper till att betjäna sidan snabbare.

   Rekommenderade mätningar:

   • Yahoo! Developer Network Blog - Lägg till en Expires Header
   • Så här lägger du till bra utgår Headers till bilder i Apache 1.3
   • HTTP-caching
   • Caching Handledning för webbförfattare och webmasters

4. Avlasta tillgångarna

   Genom off-loading menar vi att separera Javascripts, bilder, CSS och statiska filer från huvudservern där webbplatsen är värd och placera dem på en annan server eller förlita sig på andra webbtjänster. Vi har sett betydande förbättringar här i Hongkiat genom att ladda upp tillgångar till andra tillgängliga webbtjänster, vilket gör att servern huvudsakligen gör PHP-bearbetningen. Här är några förslag på onlinetjänster för off-loading:

   • Bilder: Flickr, Smugmug, Betalda vandrarhem *
   • Javascripts: Google Ajax-bibliotek, Google App Engine, Betalda värdstationer *
   • Webbformulärs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Undersökning och omröstningar: SurveyMonkey, PollDaddy

   * Betalda värdar - Betalda tjänster har alltid bättre tillförlitlighet och stabilitet. Om din webbplats ständigt begär tillgångarna måste du se till att de är i goda händer. Vi rekommenderar Amazon S3 och Cloud Front.

5. Hantera webbbilder

   Bilder är viktiga delar av din webbplats. Men om de inte optimeras optimalt, kan de bli en börda och sluta utnyttja oförutsägbart stor mängd bandbredd på daglig basis. Här är några bästa praxis för att optimera dina bilder:

   • Optimera PNG-bilderFolks at Smashing Magazine beskriver några smarta tekniker som kan hjälpa dig att optimera dina PNG-bilder.
   • Optimera för webben - Saker du behöver veta (format) Läs mer om Jpeg, GIF, PNG och hur du ska spara dina bilder för webben.
   • Skala inte bilderTräna alltid in i bredd och höjd för varje bild. Skala inte heller ner en bild bara för att du behöver en mindre version på webben. Till exempel: Tvinga inte skala en 200 × 200 px bild till 50 × 50 px för din webbplats genom att ändra bredd och höjd. Få en 50 × 50 px istället.

   Optimera med webbtjänster och verktyg. Goda nyheter är att du inte behöver vara en Photoshop-expert för att optimera dina bilder. Det finns gott om webbtjänster och verktyg för att hjälpa dig att göra jobbet.

   • Smush.itFörmodligen ett av de mest effektiva onlineverktygen för att optimera bilder. Det finns till och med ett WordPress-plugin för det!
   • JPEG & PNG StripperEtt Windows-verktyg för avlägsnande / rengöring / borttagning av onödiga metadata (skräp) från JPG / JPEG / JFIF och PNG-filer.
   • Online Image OptimizerLåter dig enkelt optimera dina gifs, animerade gifs, jpgs och pngs, så de laddas så fort som möjligt på din webbplats, med Dynamic Drive
   • SuperGIFSmidigt göra alla dina GIF-bilder och animationer mindre.
   • Här är mer.

6. Hantering av CSS

   Moderna webbplatser använder CSS som grunden för stilen, såväl som utseendet. Inte bara CSS ger stor flexibilitet för förändringar, det är också mindre vad gäller kod som behövs. Men om de är dåligt kodade kan det vara ett backfire. Här är några checklistor, eller snarare guider till dig, se till att din CSS är korrekt optimerad:

   • Att hålla dina elementas barn i linje med avkommorSå här håller du markeringen ren med CSS Selectors.
   • Håll CSS kortNär de ger samma stil är koderna desto bättre desto kortare är de. Här är en CSS Shorthand guide du behöver förmodligen.
   • Använd CSS SpriteCSS Sprite-teknik reducerar HTTP-begäran varje gång en sida laddas genom att kombinera flera (eller alla) bilder tillsammans i en enda bildfil och kontrollera att den är utdata med CSS bakgrund-positionen attribut. Här är några användbara guider och tekniker för att skapa CSS Sprites:
     • Online CSS Sprite Generator
     • Bästa online och offline CSS Sprites Generator
   • Använda varje deklaration bara en gångNär du vill optimera dina CSS-filer är en av de mest kraftfulla åtgärderna du kan använda, att använda alla deklarationer bara en gång.
   • Minska mängden CSS-filerAnledningen är enkel, ju fler CSS-filer du har desto mer HTTP-förfrågan måste det göra när en webbsida begärs. Till exempel, istället för att ha flera CSS-filer som följande:

     Du kan kombinera dem med en enda CSS:

   Rekommenderade mätningar:

   • Användbara verktyg för att kontrollera, rena och optimera din CSS-filNågra av de användbara verktygen som du kan använda för att optimera din CSS-kod, även om du inte har någon vetskap om CSS-kodning.
   • 7 Principer för rent och optimerat CSS-kodOptimering är inte bara att minimera filstorleken - det handlar också om att vara organiserad, fri och effektiv.
   • Bästa praxis för att optimera CSSTänk på den här artikeln mer som en akademisk övning i stället för riktiga optimeringstips.

Optimering för WordPress

Från tid till annan övervakar, benchmarkar och analyserar vi resultatet av vår WordPress-blogg. Om webbplatsen körs långsamt måste vi veta varför. Här är några grundläggande förändringar som vi har gjort och vi tänkte kommer att öka hastigheten på din WordPress-blogg.

1. Cache Din Worpress Blog

   WP-Cache är ett extremt effektivt WordPress-sida caching system för att göra din webbplats mycket snabbare och responsiv. Vi rekommenderar också WP Super Cache vilket förbättrar från tidigare nämnda plugin och gör också ett bra jobb.

2. Inaktivera och ta bort oanvända pluginprogram

   När du märker att din blogg laddas verkligen långsamt, se om du har många plugins installerade. De kan vara gärningsmannen.

3. Ta bort onödiga PHP-taggar

   Om du tittar på ditt temas källkoder hittar du många taggar som dessa:

   De kan ersättas ganska mycket med textinnehåll som inte orsakar belastning på servern. Checka ut Michael Martin's 13 Tags för att ta bort från ditt WordPress Blog

Rekommenderade läsningar:

• 3 enklaste sätt att påskynda WordPressJohn Pozadzides delar hur hans blogg seglar smidigt genom en Digg Traffic Spike.
• 13 Great WordPress Speed ​​Tips & Tricks för MAX Performance Här är några saker att försöka om du upptäcker att din WordPress-webbplats inte fungerar så bra som det kan bero på hög trafik eller dolda problem du inte vet om.
• 40 tips om optimering av WordPressOptimeringstips i bilder. 40 tips på 40 minuter.

Sist men inte minst…

Här är några användbara webbtjänster och verktyg som ger dig ett bredare perspektiv och bättre analys för att hjälpa dig med weboptimering.

• Yahoo! YSlow

  YSlow analyserar webbsidor och föreslår sätt att förbättra prestanda baserat på en uppsättning regler för högpresterande webbsidor. Det ger dig en bra uppfattning om vad som behöver göras för att webbplatsen ska ladda snabbare.

  (Firebug krävs)

  

• Page Speed

  Liknande Yahoo! YSlow, Google Sidhastighet är en öppen källkod för Firebug för att utvärdera webbplatsens prestanda och hur man förbättrar dem. (Firebug krävs)

  

• Pingdom Tools

  Pingdom Tools ta en komplett belastning på din webbplats, inklusive alla objekt (bilder, CSS, JavaScripts, RSS, Flash och frames / iframes) och visar allmän statistik om den laddade sidan, t.ex. totalt antal objekt, total laddningstid och storlek inklusive alla objekt.

  

Rekommenderade mätningar:Här är fler tips och verktyg som är värda att checka ut.

• Google Web Optimizer
• 15 verktyg som hjälper dig att utveckla snabbare webbsidor
• 15 + tips för att påskynda din webbplats och optimera din kod!