Ultimativ vejledning til weboptimering (tips og bedste praksis)

Web optimering er en vigtig del af webudvikling og vedligeholdelse, men også noget, der ofte overses af webmastere. Tænk bare på de penge, du kan spare, og hvordan det kan bidrage til at øge læseren og trafikken, når de bliver ordentligt udført.

Hvis du ikke har gjort nogen optimering til din hjemmeside (eller blog) hidtil eller bare nysgerrig, hvordan det kan hjælpe med at fremskynde dit websted, skal du se på denne liste over optimeringstips, vi har sat sammen.

Vi har opdelt ting i 3 separate sektioner for bedre læsbarhed - henholdsvis server-side optimering, aktiver optimering (som indeholder webkomponenter som CSS, Javascript, billeder osv.) og platform, hvor vi vil fokusere på WordPress optimering. I sidste afsnit smider vi et par links, som vi regnede med nyttige. Fuld liste efter spring.

Optimering: Server-side

1. Vælg en anstændig webhost

   Din web hosting konto har intet direkte forhold til de optimeringer, du er ved at udføre, men vi regnede med at vælge den rigtige webhosting-konto, så vigtigt vi besluttede at bringe det til din opmærksomhed først. Hosting konto er grundlaget for dit websted / blog, hvor det er sikkerhed, tilgængelighed (cPanel, FTP, SSH), serverstabilitet, priser og kundestøtte alle spiller vigtige roller. Du skal sørge for at du er i gode hænder.

   Anbefalet læsning: Sådan vælges en webhost ved wikiHow er en god artikel, der giver dig trin og tips, du bør vide, før du køber en webhostingkonto.

2. Værdiaktiver separat

   Når vi nævner aktiver, mente vi webkomponenter som billeder og statiske scripts det kræver ikke server-side behandling. Disse omfatter alle webgrafik, billeder, Javascripts, Cascading Style Sheets (CSS) osv. Værdipapirer separat er ikke et must, men vi har set et enormt resultat med hensyn til serverstabilitet med denne implementering, da bloggen havde en trafikpike.

   Anbefalet læsning: Maksimering af parallelle downloads i Carpool Lane.

3. Kompression med GZip

   Kort sagt, indhold rejser fra server side til klientside (vicet versa), når en HTTP-anmodning er foretaget. Komprimering af indholdet til afsendelse reducerer i høj grad den tid, der er nødvendig for at behandle hver anmodning.

   GZip er en af ​​de bedste måder at gøre dette på og det varierer alt efter hvilken type servere du bruger. For eksempel, Apache 1.3 bruger mod_zip, Apache 2.x bruger mod_deflate og her er hvordan du gør det i Nginx. Her er nogle rigtig gode artikler til at gøre dig bekendt med serverside kompressioner:

   • Fremskynde et websted ved at aktivere Apache-filkomprimering
   • Komprimer webudgang ved hjælp af mod_gzip og apache
   • Sådan optimeres dit websted med GZIP-komprimering
   • Server-side kompression for ASP

4. Minimer omdirigeringer

   Webmasters gør URL-omdirigering (om det er Javascript eller META omdirigeringer) hele tiden. Nogle gange er det meningen at pege brugere fra en gammel side til nye, eller blot lede brugerne til den rigtige side. Hver omdirigering opretter en ekstra HTTP-anmodning og RTT (round-trip-time). Jo mere omdirigering du har, den langsommere bruger kommer til destinationssiden.

   Anbefalet læsning: Undgå omdirigeringer af Google Code giver dig et godt overblik over sagen. Artiklen anbefaler også nogle praktiske måder at minimere omdirigering for at øge betjeningshastigheden.

5. Reducer DNS Lookups

   Ifølge Yahoo! Developer Network Blog, Det tager omkring 20-120 millisekunder for DNS (Domain Name System) at løse IP-adressen for et givet værtsnavn eller domænenavn, og browseren kan ikke gøre noget, før processen er korrekt gennemført.

   Forfatter Steve Souders foreslog at opdele disse komponenter på tværs af mindst to, men ikke mere end fire værtsnavne reducerer DNS-opslag og tillader høje grad parallelle downloads. Læs mere på artiklen.

Optimering: Aktiverne (CSS, Javascripts, Images)

1. Flett flere Javascripts til One

   Folk 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 

   Ind i en enkelt fil ved at ændre webadressen til:

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

   ved at manipulere .htaccess og bruge PHP. Klik her at læse mere.

2. Komprimer Javascript og CSS

   Minify er en PHP5-app, der kan kombinere flere CSS- og Javascript-filer, komprimere indholdet (dvs. fjernelse af unødvendige hvide rum / kommentarer) og vise resultaterne med HTTP-kodning (gzip / deflate) og overskrifter, der muliggør optimal caching på klientsiden.

   

   Komprimer dem online!Der er også nogle webtjenester, der giver dig mulighed for manuelt at komprimere dine Javascripts og CSS-filer online. Her er få, vi kommer til at kende:

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

3. Tilpas overskriftens udløb / caching

   Kredit: httpwatch

   Ved at bruge en tilpasset udløbsoverskrift, oversvømmede dine webkomponenter som billeder, statiske filer, CSS, Javascript, unødvendig HTTP-anmodning, når den samme bruger genindlæser siden for anden gang. Det reducerer den nødvendige båndbredde og hjælper med at tjene siden hurtigere.

   Anbefalede aflæsninger:

   • Yahoo! Developer Network Blog - Tilføj et udløbsoverskrift
   • Sådan tilføjer du god udløber overskrifter til billeder i Apache 1.3
   • HTTP Caching
   • Caching-vejledning til webforfattere og webmastere

4. Off-load aktiverne

   Ved offloading mener vi at adskille Javascripts, billeder, CSS og statiske filer fra hovedserveren, hvor hjemmesiden er vært og placere dem på en anden server eller stole på andre webtjenester. Vi har set betydelige forbedringer her i Hongkiat ved off-loading aktiver til andre web-tjenester til rådighed, hvilket efterlader serveren til primært at gøre PHP-behandling. Her er nogle forslag til onlinetjenester til offloading:

   • Billeder: Flickr, Smugmug, Betalt hostings *
   • javascripts: Google Ajax-bibliotek, Google App Engine, Betalt hostings *
   • Webformulars: WuFoo, FormStack
   • RSS: Google Feedburner
   • Undersøgelse og afstemninger: SurveyMonkey, PollDaddy

   * Betalt hostings - Betaltjenester har altid bedre pålidelighed og stabilitet. Hvis din hjemmeside hele tiden anmoder om aktiverne, skal du sørge for, at de er i gode hænder. Vi anbefaler Amazon S3 og Cloud Front.

5. Håndtering af webbilleder

   Billeder er vigtige dele af dit websted. Men hvis de ikke optimalt optimeres, kan de blive en byrde og ende med at bruge uforudsigeligt stor mængde båndbredder på daglig basis. Her er nogle bedste praksis til optimering af dine billeder:

   • Optimer PNG-billederFolk i Smashing Magazine beskriver nogle kloge teknikker, der kan hjælpe dig med at optimere dine PNG-billeder.
   • Optimering til web - Ting du skal vide (formaterne) Lær mere om Jpeg, GIF, PNG og hvordan du skal gemme dine billeder til web.
   • Må ikke skaleres billederAltid praktisere indsættelse af bredde og højde for hvert billede. Skal heller ikke ned et billede, bare fordi du har brug for en mindre version på internettet. For eksempel: Tving ikke skala en 200 × 200 px billede til 50 × 50 px til din hjemmeside ved at ændre bredde og højde. Få en 50 × 50 px i stedet.

   Optimering med webtjenester og værktøjer. Gode ​​nyheder er, du behøver ikke at være en Photoshop-ekspert for at optimere dine billeder. Der er masser af webtjenester og værktøjer til at hjælpe dig med at udføre jobbet.

   • Smush.itSandsynligvis et af de mest effektive onlineværktøjer til optimering af billeder. Der er endda et WordPress-plugin til det!
   • JPEG & PNG striberEt Windows-værktøj til fjernelse / rengøring / fjernelse af unødvendige metadata (junk) fra JPG / JPEG / JFIF og PNG-filer.
   • Online Image OptimizerGør det nemt at optimere dine gifs, animerede gifs, jpg'er og pngs, så de indlæses hurtigst muligt på dit websted ved Dynamic Drive
   • SuperGIFUbesværet gør alle dine GIF-billeder og animationer mindre.
   • Her er mere.

6. Håndtering af CSS

   Moderne websites bruger CSS som grundlaget for stilen, såvel som udseende og udseende. Ikke kun CSS giver stor fleksibilitet til ændringer, det er også mindre i form af koder, der er nødvendige. Men hvis de er dårligt kodede, kan det være et backfire. Her er nogle tjeklister, eller rettere vejledninger til dig, sørg for at din CSS er korrekt optimeret:

   • Holde dine Elements Børn på linje med afkomSådan holder du din markering ren med CSS Selectors.
   • Hold CSS kortNår de giver samme stil, er koderne bedre, jo kortere er de. Her er en CSS Shorthand guide du har sikkert brug for.
   • Brug CSS SpriteCSS Sprite-teknikken reducerer HTTP-anmodningen hver gang en side er indlæst ved at kombinere flere (eller alle) billeder sammen på en enkelt billedfil og kontrollere, at den er output med CSS baggrund-stillingen attribut. Her er nogle nyttige vejledninger og teknikker til at oprette CSS Sprites:
     • Online CSS Sprite Generator
     • Bedste online og offline CSS Sprites Generator
   • Brug kun en enkelt erklæringNår du søger at optimere dine CSS-filer, er en af ​​de mest kraftfulde foranstaltninger, du kan bruge, at bruge alle deklarationer kun én gang.
   • Reducer mængden af ​​CSS-filerÅrsagen er enkel, jo flere CSS-filer har du den mere HTTP-anmodning, det skal gøre, når en webside bliver anmodet om. For eksempel i stedet for at have flere CSS-filer som følgende:

     Du kan kombinere dem med den ene enkelt CSS:

   Anbefalede aflæsninger:

   • Nyttige værktøjer til at kontrollere, rense og optimere din CSS-filNogle af de nyttige værktøjer, du kan bruge til at optimere din CSS-kode, selvom du ikke har helt kendskab til CSS-kodning.
   • 7 Principper for rent og optimeret CSS-kodeOptimering er ikke kun at minimere filstørrelsen - det handler også om at være organiseret, ubesværet og effektiv.
   • Bedste fremgangsmåder til at optimere CSSOvervej denne artikel mere som en akademisk øvelse snarere end i virkeligheden optimering tips.

Optimering til WordPress

Fra tid til anden overvåger, benchmarker og analyserer udførelsen af ​​vores WordPress-blog. Hvis webstedet kører langsomt, skal vi vide hvorfor. Her er nogle grundlæggende ændringer, vi har gjort, og vi regner med, vil øge hastigheden af ​​din WordPress-blog.

1. Cache din Worpress Blog

   WP-Cache er et yderst effektivt WordPress side caching system, der gør din side meget hurtigere og mere lydhør. Vi anbefaler også WP Super Cache som forbedrer fra det tidligere nævnte plugin og også gør et godt stykke arbejde.

2. Deaktiver og slet ubrugte plugins

   Når du bemærker, at din blog lægges rigtigt langsomt, skal du se, om du har mange plugins installeret. De kan være synderen.

3. Fjern unødvendige PHP-tags

   Hvis du kigger på dit temas kildekoder, finder du mange tags som disse:

   De kan stort set erstattes med tekstindhold, der ikke forårsager belastning på serveren. Tjek ud Michael martin's 13 Tags til at slette fra din WordPress Blog

Anbefalede læsninger:

• 3 nemmeste måder at fremskynde WordPressJohn Pozadzides deler, hvordan hans blog sejler glat gennem en Digg-trafikspids.
• 13 Great WordPress Speed ​​Tips og tricks til MAX Performance Her er et par ting at prøve, hvis du finder ud af, at dit WordPress-websted ikke fungerer så godt som det kan skyldes høj trafik eller skjulte problemer, du ikke ved om.
• 40 WordPress Optimization TipsOptimeringstips i dias. 40 tips om 40 minutter.

Sidst men ikke mindst…

Her er nogle nyttige webtjenester og værktøjer, der giver dig et bredere perspektiv og bedre analyse til at hjælpe dig med weboptimering.

• Yahoo! YSlow

  YSlow analyserer websider og foreslår måder at forbedre deres præstation baseret på et sæt regler for højtydende websider. Det giver dig en god ide, hvad der skal gøres for at hjemmesiden skal kunne indlæses hurtigere.

  (Firebug kræves)

  

• PageSpeed

  Svarende til Yahoo! YSlow, Google Sidens hastighed er en open source Firebug add-on til at evaluere hjemmesiden forestillinger og hvordan man kan forbedre dem. (Firebug kræves)

  

• Pingdom Tools

  Pingdom Tools tag en komplet belastning på dit websted, herunder alle objekter (billeder, CSS, JavaScripts, RSS, Flash og frames / iframes) og viser dig generelle statistikker om den indlæste side som det samlede antal objekter, total belastningstid og størrelse inklusive alle objekter.

  

Anbefalede aflæsninger:Her er flere tips og værktøjer værd at tjekke ud.

• Google Web Optimizer
• 15 værktøjer til at hjælpe dig med at udvikle hurtigere websider
• 15 + Tips til at fremskynde dit websted og optimere din kode!