Ultimate Guide To Web Optimization (Tips og Best Practices)

Web optimalisering er en viktig del av webutvikling og vedlikehold, men også noe som ofte overses av webmastere. Tenk bare på pengene du kan spare, og hvordan det kan bidra til å øke leseren og trafikken når de er ordentlig ferdig.

Hvis du ikke har gjort noen optimalisering på nettstedet ditt (eller bloggen) så langt eller bare nysgjerrig på hvordan det kan bidra til å øke hastigheten på nettstedet ditt, kan du se på denne listen over optimaliseringstips vi har satt sammen.

Vi har delt opp ting i 3 separate seksjoner for bedre lesbarhet - henholdsvis server-side optimalisering, eiendomsoptimalisering (som inkluderer webkomponenter som CSS, Javascript, bilder, osv.) og plattform, hvor vi vil fokusere på WordPress optimalisering. På den siste seksjonen kaste vi inn et par koblinger som vi fant ut nyttige. Full liste etter hopp.

Optimalisering: Server-side

1. Velg en anstendig webvert

   Din web hosting konto har ingen direkte sammenheng med optimaliseringene du skal utføre, men vi skjønte å velge riktig web hosting konto så viktig vi besluttet å bringe det til din oppmerksomhet først. Hosting konto er grunnlaget for ditt nettsted / blogg hvor det er sikkerhet, tilgjengelighet (cPanel, FTP, SSH), serverstabilitet, priser og kundestøtte alle spiller viktige roller. Du må sørge for at du er i gode hender.

   Anbefalt lesing: Hvordan velge en webverten av wikiHow er en flott artikkel som gir deg trinn og tips du bør vite før du kjøper en web hosting konto.

2. Vertsegenskaper separat

   Når vi nevner eiendeler, mente vi webkomponenter som Bilder og statiske skript det krever ikke server-sidebehandling. Disse inkluderer alle webgrafikk, bilder, Javascripts, Cascading Style Sheets (CSS) osv. Hosting-eiendeler separat er ikke et must, men vi har sett enormt resultat når det gjelder serverstabilitet med denne implementeringen når bloggen hadde en trafikkspike.

   Anbefalt lesing: Maksimere parallelle nedlastinger i Carpool Lane.

3. Komprimering med GZip

   Kort sagt, innhold reiser fra server side til klientside (vicet versa) når en HTTP forespørsel er gjort. Komprimering av innholdet for sending sterkt reduserer tiden som trengs for å behandle hver forespørsel.

   gzip er en av de beste måtene å gjøre dette, og det varierer alt etter hvilken type servere du bruker. For eksempel, Apache 1.3 bruker mod_zip, Apache 2.x bruker mod_deflate og her er hvordan du gjør det i Nginx. Her er noen veldig gode artikler for å gjøre deg kjent med serversidekomprimering:

   • Fremskynde et nettsted ved å aktivere Apache-filkomprimering
   • Komprimer webutgang ved hjelp av mod_gzip og apache
   • Slik optimaliserer du nettstedet ditt med GZIP-komprimering
   • Server-side komprimering for ASP

4. Minimer omadresser

   Webmastere gjør URL-omadressering (enten det er Javascript eller META omadresser) hele tiden. Noen ganger er det meningen å peke brukere fra en gammel side til ny, eller bare veilede brukere til riktig side. Hver viderekobling oppretter en ekstra HTTP-forespørsel og RTT (rundtur-tid). Jo mer omdirigering du har, desto langsommere bruker kommer til destinasjonssiden.

   Anbefalt lesing: Unngå viderekoblinger av Google Code gir deg en god oversikt over saken. Artikkelen anbefaler også noen praktiske måter å minimere omdirigering for å øke serverhastigheten.

5. Reduser DNS-oppslag

   I følge Yahoo! Developer Network Blog, Det tar ca 20-120 millisekunder for DNS (Domain Name System) for å løse IP-adressen for et gitt vertsnavn eller domenenavn, og nettleseren kan ikke gjøre noe før prosessen er fullført.

   Forfatter Steve Souders foreslo at splitte disse komponentene over minst to, men ikke mer enn fire vertsnavn reduserer DNS-oppslag og tillater høy grad parallelle nedlastinger. Les mer på artikkelen.

Optimalisering: Assetene (CSS, Javascripts, Images)

1. Slå sammen flere Javascripts i en

   Folks på rakaz.nl deler hvordan du kan kombinere flere 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 

   Inn i en enkelt fil ved å endre nettadressen til:

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

   ved å manipulere .htaccess og bruke PHP. Klikk her å lese mer.

2. Komprimer Javascript og CSS

   Minify er en PHP5-app som kan kombinere flere CSS- og Javascript-filer, komprimere innholdet (dvs. fjerning av unødvendig hvite plass / kommentarer) og tjene resultatene med HTTP-koding (gzip / deflate) og overskrifter som tillater optimal klientside-caching.

   

   Komprimer dem på nettet!Det er også noen webtjenester som lar deg manuelt komprimere Javascripts og CSS-filer på nettet. Her er få vi kommer til å vite:

   • compressor.ebiene (Javascript script~~POS=HEADCOMP, CSS)
   • javascriptcompressor.com (Javascript script~~POS=HEADCOMP)
   • jscompress.com (Javascript script~~POS=HEADCOMP)
   • CleanCSS (CSS)
   • CSS Optimizer (CSS)

3. Tilpass Header Expiry / Caching

   Kreditt: httpwatch

   Ved å bruke en tilpasset utløpshoved, hoppet webkomponenter som bilder, statiske filer, CSS, Javascript over unødvendig HTTP-forespørsel når samme bruker laster på siden for andre gang. Det reduserer båndbredden som trengs og definetely hjelper til å betjene siden raskere.

   Anbefalte avlesninger:

   • Yahoo! Developer Network Blog - Legg til en Utløper Header
   • Slik legger du til gode, utløper overskrifter til bilder i Apache 1.3
   • HTTP Caching
   • Caching Tutorial for webforfattere og webmastere

4. Avlaste eiendelene

   Ved å laste ned, mener vi å skille Javascripts, bilder, CSS og statiske filer fra hovedserveren der nettstedet er vert, og plassere dem på en annen server eller stole på andre webtjenester. Vi har sett betydelig forbedring her i Hongkiat ved å laste ned eiendeler til andre webtjenester som er tilgjengelige, slik at serveren i hovedsak gjør PHP-behandlingen. Her er noen forslag til onlinetjenester for avlastning:

   • Bilder: Flickr, Smugmug, Betalt vertinne *
   • Javascripts: Google Ajax-bibliotek, Google App Engine, Betalt vertinne *
   • Nettformulars: WuFoo, FormStack
   • RSS: Google Feedburner
   • Undersøkelse og avstemninger: SurveyMonkey, PollDaddy

   * Betalt vertskap - Betalte tjenester har alltid bedre pålitelighet og stabilitet. Hvis nettstedet ditt hele tiden ber om eiendelene, må du sørge for at de er i gode hender. Vi anbefaler Amazon S3 og Cloud Front.

5. Håndtering av webbilder

   Bilder er viktig del av nettstedet ditt. Men hvis de ikke er riktig optimalisere, kan de bli en byrde og ende opp med å bruke uforutsigbart stor mengde båndbredder på daglig basis. Her er det noe beste praksis for å optimalisere bildene dine:

   • Optimaliser PNG-bilderFolk i Smashing Magazine beskriver noen smarte teknikker som kan hjelpe deg med å optimalisere PNG-bildene dine.
   • Optimalisering for web - Ting du trenger å vite (formatene) Lær mer om Jpeg, GIF, PNG og hvordan du skal lagre bildene dine for web.
   • Ikke skaler bilderBruk alltid å sette inn bredde og høyde for hvert bilde. Ikke skal ned et bilde bare fordi du trenger en mindre versjon på nettet. For eksempel: Ikke tving skala en 200 × 200 px bilde til 50 × 50 px for ditt nettsted ved å endre bredde og høyde. Få en 50 × 50 px i stedet.

   Optimalisering med webtjenester og verktøy. Gode ​​nyheter er, du trenger ikke å være en Photoshop-ekspert for å optimalisere bildene dine. Det er mange webtjenester og verktøy for å hjelpe deg med å gjøre jobben.

   • Smush.itSannsynligvis et av de mest effektive verktøyene for å optimalisere bilder. Det er enda et WordPress-plugin for det!
   • JPEG og PNG stripperEt Windows-verktøy for fjerning / rengjøring / fjerning av unødvendige metadata (søppel) fra JPG / JPEG / JFIF og PNG-filer.
   • Online Image OptimizerLar deg enkelt optimalisere gifs, animerte gifs, jpgs og pngs, så de lastes så fort som mulig på nettstedet ditt, av Dynamic Drive
   • SuperGIFGjør alle dine GIF-bilder og animasjoner mindre.
   • Her er mer.

6. Håndtering av CSS

   Moderne nettsteder bruker CSS som grunnlag for stilen, så vel som utseendet. Ikke bare CSS gir stor fleksibilitet til endringer, det er også mindre når det gjelder koden som trengs. Men hvis de er dårlig kodet, kan det være et backfire. Her er noen sjekklister, eller rettere guider til deg, sørg for at CSS er riktig optimalisert:

   • Holde Elementets barn i tråd med avkomSlik holder du opp merkingen ren med CSS Selectors.
   • Hold CSS kortNår de gir samme stil, er koderne bedre, jo kortere er de. Her er en CSS Shorthand guide du trenger sannsynligvis.
   • Bruk CSS SpriteCSS Sprite-teknikken reduserer HTTP-forespørselen hver gang en side er lastet ved å kombinere flere (eller alle) bilder sammen på en enkelt bildefil og kontrollere at den er utdata med CSS Bakgrunnen-stilling Egenskap. Her er noen nyttige guider og teknikker for å lage CSS Sprites:
     • Online CSS Sprite Generator
     • Beste online og offline CSS Sprites Generator
   • Bruk hver deklarasjon bare en gangNår du ser etter å optimalisere CSS-filene, er en av de kraftigste tiltakene du kan bruke, å bruke alle deklarasjoner bare én gang.
   • Reduser mengden CSS-filerÅrsaken er enkel, jo flere CSS-filer har du mer HTTP-forespørsel, det må gjøres når en nettside blir bedt om. For eksempel, i stedet for å ha flere CSS-filer som følgende:

     Du kan kombinere dem med en enkelt CSS:

   Anbefalte avlesninger:

   • Nyttige verktøy for å sjekke, rydde og optimalisere CSS-filenNoen av de nyttige verktøyene du kan bruke til å optimalisere CSS-koden, selv om du ikke har fullstendig kjennskap til CSS-koding.
   • 7 Prinsipper for rent og optimalisert CSS-kodeOptimalisering er ikke bare å minimere filstørrelsen - det handler også om å være organisert, ryddig og effektiv.
   • Beste praksis for å optimalisere CSSVurder denne artikkelen mer som en akademisk øvelse i stedet for optimal optimaliseringstips.

Optimalisering for WordPress

Fra tid til annen overvåker vi, benchmark og analyserer ytelsen til vår WordPress-blogg. Hvis nettstedet kjører sakte, må vi vite hvorfor. Her er noen grunnleggende endringer vi har gjort, og vi skjønte vil øke hastigheten på WordPress-bloggen din.

1. Cache din Worpress Blog

   WP-Cache er et ekstremt effektivt WordPress side caching system for å gjøre nettstedet ditt mye raskere og responsivt. Vi anbefaler også WP Super Cache som forbedrer fra forrige nevnte plugin og også gjør en god jobb.

2. Deaktiver og slett ubrukte pluginprogrammer

   Når du legger merke til at bloggen din lastes inn veldig sakte, kan du se om du har mange plugins installert. De kan være synderen.

3. Fjern unødvendige PHP-tagger

   Hvis du tar en titt på temaets kildekoder, finner du mange koder som disse:

   De kan ganske mye erstattes med tekstinnhold som ikke forårsaker belastning på serveren. Sjekk ut Michael Martin's 13 Merker å slette fra WordPress Blog

Anbefalte avlesninger:

• 3 enkleste måter å øke hastigheten på WordPressJohn Pozadzides deler hvordan hans blogg seiler jevnt gjennom en Digg trafikkspike.
• 13 Great WordPress Speed ​​Tips og triks for maksimal ytelse Her er noen ting du kan prøve hvis du finner ut at ditt WordPress-nettsted ikke fungerer, så vel som det kan skyldes høy trafikk eller skjulte problemer du ikke vet om.
• 40 WordPress optimaliseringstipsOptimaliseringstips i lysbilder. 40 tips på 40 minutter.

Sist men ikke minst…

Her er noen nyttige webtjenester og verktøy som gir deg et bredere perspektiv og bedre analyse for å hjelpe deg med weboptimalisering.

• Yahoo! YSlow

  YSlow analyserer websider og foreslår måter å forbedre ytelsen på, basert på et sett med regler for websider med høy ytelse. Det gir deg en god ide om hva som må gjøres for at nettsiden skal kunne lastes raskere.

  (Firebug kreves)

  

• Page Speed

  Lik Yahoo! YSlow, Google Sidens hastighet er en åpen kildekode Firebug add-on for å evaluere nettstedets forestillinger og hvordan de kan forbedres. (Firebug kreves)

  

• Pingdom Verktøy

  Pingdom Verktøy ta en komplett last på nettstedet ditt, inkludert alle objekter (bilder, CSS, JavaScripts, RSS, Flash og rammer / iframes) og viser deg generell statistikk om den lastede siden, for eksempel totalt antall objekter, total belastetid og størrelse inkludert alle objekter.

  

Anbefalte avlesninger:Her er flere tips og verktøy verdt å sjekke ut.

• Google Web Optimizer
• 15 verktøy som hjelper deg med å utvikle raskere nettsider
• 15 + tips for å øke hastigheten på nettstedet ditt, og optimalisere koden din!