Ultimate Guide to Web Optimization (Savjeti i najbolje prakse)

Web optimizacija je vitalni dio web razvoja i održavanja, ali i nešto što se često previdi webmasterima. Dovoljno je sjetiti se novca koji možete uštedjeti, i kako to potencijalno može pomoći u povećanju čitateljstva i prometa kada su pravilno obavljeni.

Ako do sada niste učinili nikakvu optimizaciju za svoju web-lokaciju (ili blog) ili ste samo znatiželjni kako to može pomoći ubrzanju web-lokacije, pogledajte ovaj popis savjeta za optimizaciju koji smo sastavili.

Za bolju čitljivost podijelili smo stvari u 3 zasebna dijela optimizacija na strani poslužitelja, optimizacija imovine (koji uključuje web komponente kao što su CSS, Javascript, slike itd.) i platforma, gdje ćemo se usredotočiti WordPress optimizacija. U posljednjem odjeljku, stavljamo nekoliko veza koje smo smatrali korisnima. Cijeli popis nakon skoka.

Optimizacija: na strani poslužitelja

1. Odaberite pristojan web host

   Vaš web hosting račun nema izravan odnos s optimizacijama koje namjeravate obaviti, ali smo zaključili da je odabir pravog web hosting računa toliko važan da smo ga odlučili usmjeriti na vašu pažnju. Hosting račun je temelj vaše web stranice / bloga gdje je sigurnost, pristupačnost (cPanel, FTP, SSH), stabilnost poslužitelja, cijene i podrška klijentima svi igraju važne uloge. Morate biti sigurni da ste u dobrim rukama.

   Preporučena literatura: Kako odabrati web host po wikiHow je veliki članak koji vam daje korake i savjete koje biste trebali znati prije kupnje bilo kojeg web hosting računa.

2. Odredite hostove zasebno

   Kada spominjemo imovinu, mislimo na web-komponente poput slika i statičke skripte koji ne zahtijevaju obradu na strani poslužitelja. To uključuje bilo koju web-grafiku, slike, Javascripts, Cascading Style Sheets (CSS) itd. Aktivnost hostinga nije obavezna, ali smo vidjeli ogroman rezultat u smislu stabilnosti poslužitelja s ovom implementacijom kada je blog imao prometni šiljak.

   Preporučena literatura: Maksimiziranje paralelnih preuzimanja u Carpool Laneu.

3. Kompresija s GZip-om

   Ukratko, sadržaj putuje od strane poslužitelja do klijenta (vicet versa) kad god je HTTP zahtjev upućen. Komprimiranje sadržaja za slanje uvelike smanjuje vrijeme potrebno za obradu svakog zahtjeva.

   GZip je jedan od najboljih načina da to učinite i da je različit prema vrsti poslužitelja koje koristite. Na primjer, Apache 1.3 koristi mod_zip, Apache 2.x koristi mod_deflate i evo kako ćete to učiniti Nginx. Evo nekih stvarno dobrih članaka koji će vas upoznati s kompresijama na strani poslužitelja:

   • Ubrzajte web-lokaciju omogućujući sažimanje Apache datoteka
   • Compress Web Output pomoću mod_gzip i Apache
   • Kako optimizirati svoje stranice s GZIP kompresije
   • Kompresija na strani poslužitelja za ASP

4. Minimiziraj preusmjeravanja

   Webmasteri stalno preusmjeravaju URL (bilo da je u pitanju JavaScript ili META preusmjeravanja). Ponekad je svrha da se korisnici sa stare stranice na nove, ili samo vodič korisnika na ispravnu stranicu. Svako preusmjeravanje stvara dodatni HTTP zahtjev i RTT (povratno vrijeme). Što više preusmjeravanja imate, sporiji korisnik će doći do odredišne ​​stranice.

   Preporučena literatura: Izbjegavajte preusmjeravanja Google Code daje dobar pregled o tome. U članku se također preporučuju neki praktični načini za smanjivanje preusmjeravanja kako bi se povećala brzina posluživanja.

5. Smanjite DNS pretraživanja

   Prema Yahoo! Blog mreže razvojnih programera, Potrebno je oko 20-120 milisekundi za DNS (sustav naziva domene) za rješavanje IP adrese za određeno ime hosta ili naziv domene, a preglednik ne može ništa učiniti dok se proces ne dovrši pravilno.

   Autor Steve Souders predložili su da dijeljenje tih komponenti na najmanje dva, ali ne više od četiri naziva hostova smanjuje DNS traženje i dopušta visok stupanj paralelnih preuzimanja. Čitaj više na članak.

Optimizacija: Sredstva (CSS, Javascripts, Images)

1. Spoji više Javascripts u jedan

   Ljudi u rakaz.nl dijeli način na koji možete kombinirati višestruke Javascriptove:

    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 

   U jednu datoteku promjenom URL-a na:

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

   manipuliranjem .htaccessom i korištenjem PHP-a. Kliknite ovdje čitati više.

2. Stisnite Javascript i CSS

   Umanjiti je aplikacija za PHP5 koja može kombinirati više CSS i Javascript datoteka, komprimirati njihov sadržaj (tj. ukloniti nepotrebne razmake / komentare) i poslužiti rezultate s HTTP kodiranjem (gzip / deflate) i zaglavljima koja omogućuju optimalno predmemoriranje na strani klijenta.

   

   Stisnite ih online!Tu su i neke web usluge koje vam omogućuju ručno komprimiranje Javascripts i CSS datoteka na mreži. Evo nekoliko koje znamo:

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

3. Prilagodba isteka / predmemoriranja zaglavlja

   Zasluge: httpwatch

   Korištenjem prilagođenog zaglavlja isteka, web-komponente kao što su slike, statične datoteke, CSS, Javascript su preskočile nepotreban HTTP zahtjev kada isti korisnik ponovno učitava stranicu po drugi put. To smanjuje potrebnu propusnost i definitivno pomaže u bržem posluživanju stranice.

   Preporučena čitanja:

   • Yahoo! Blog mreže razvojnih programera - dodajte zaglavlje ističe
   • Kako dodati dobra istječe zaglavlja za slike u Apacheu 1.3
   • HTTP caching
   • Caching Tutorial za web autore i webmastere

4. Isključeno opterećenje Sredstva

   Pod opterećenjem podrazumijevamo odvajanje Javascriptova, slika, CSS-a i statičkih datoteka s glavnog poslužitelja na kojem se nalazi web-lokacija i stavljanje na drugi poslužitelj ili oslanjanje na druge web-usluge. Vidjeli smo značajno poboljšanje ovdje u Hongkiat oduzimanjem imovine drugim web uslugama, ostavljajući poslužitelju uglavnom PHP obradu. Evo nekoliko prijedloga online usluga za isključeno učitavanje:

   • slike: Flickr, Smugmug, Plaćeni hostovi *
   • Javascripts: Google Ajax knjižnica, Google App Engine, plaćeni hostovi *
   • Web obrazacs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Anketa i ankete: SurveyMonkey, Anketa Daddy

   * Plaćeni domaćini - Plaćene usluge uvijek imaju bolju pouzdanost i stabilnost. Ako vaša web-lokacija stalno traži sredstva, morat ćete se uvjeriti da su u dobrim rukama. Preporučujemo Amazon S3 i Cloud Front.

5. Rukovanje web-slikama

   Slike su važan dio vaše web-lokacije. Međutim, ako nisu ispravno optimizirane, mogu postati teret i na kraju svakodnevno koristiti nepredvidivo veliku količinu propusnosti. Ovdje su neke najbolje prakse za optimiziranje slika:

   • Optimizirajte PNG slikeLjudi u Smashing Magazinu opisuju neke pametne tehnike koje vam mogu pomoći da optimizirate svoje PNG-slike.
   • Optimiziranje za web - Stvari koje trebate znati (formati) Saznajte više o Jpeg, GIF, PNG i kako biste trebali spremati slike za web.
   • Nemojte mijenjati slikeUvijek prakticirajte umetanje širina i visina za svaku sliku. Također nemojte smanjivati ​​sliku samo zato što trebate manju verziju na webu. Na primjer: Nemojte silom povećavati sliku veličine 200 × 200 px na veličinu 50 × 50 piksela za vašu web stranicu mijenjanjem širina i visina. Umjesto toga uzmite 50 × 50 px.

   Optimiziranje pomoću web-usluga i alata. Dobra vijest je da ne morate biti stručnjak za Photoshop kako biste optimizirali svoje slike. Postoji mnogo web usluga i alata koji će vam pomoći da obavite posao.

   • Smush.itVjerojatno jedan od najučinkovitijih online alata za optimizaciju slika. Tu je čak i WordPress dodatak za to!
   • JPEG i PNG StripperWindows alat za skidanje / čišćenje / uklanjanje nepotrebnih metapodataka (junk) iz JPG / JPEG / JFIF i PNG datoteka.
   • Online Image OptimizerOmogućuje vam da lako optimizirate svoje GIF-ove, animirane gif, jpgs i pngs, tako da se učitavaju što je brže moguće na vašu web-lokaciju, pomoću značajke Dynamic Drive
   • SuperGIFNapravite sve manje GIF slike i animacije.
   • Evo još.

6. Rukovanje CSS-om

   Moderne web stranice koriste CSS kao temelj stila, kao i izgled i dojam. Ne samo CSS daje veliku fleksibilnost promjenama, nego je i manji u smislu potrebnih kodova. Međutim, ako su loše kodirani, to bi moglo biti paljenje. Evo nekih popisa za provjeru, odnosno vodiča za vas da provjerite jesu li vaši CSS ispravno optimizirani:

   • Čuvanje vaših elemenata djeci u skladu s potomstvomKako sačuvati oznaku pomoću CSS selektora.
   • Držite CSS kratkoKada daju isti stil, kodovi su bolji što su kraći. Evo jednog Kratki vodič za CSS vjerojatno će vam trebati.
   • Koristite CSS SpriteTehnika CSS Sprite smanjuje HTTP zahtjev svaki put kad se stranica učitava kombinirajući nekoliko (ili svih) slika zajedno na jednoj slikovnoj datoteci i kontrolirajući njen izlaz pomoću CSS-a Pozadina položaju atribut. Evo nekoliko korisnih vodiča i tehnika za stvaranje CSS-a:
     • Online CSS Sprite Generator
     • Najbolji online i offline CSS Sprites Generator
   • Koristeći svaku izjavu samo jednomKada želite optimizirati CSS datoteke, jedna od najsnažnijih mjera koju možete primijeniti je da koristite svaku deklaraciju samo jednom.
   • Smanjite količinu CSS datotekaRazlog je jednostavan, što više CSS datoteka imate više HTTP zahtjeva koje ćete morati izvršiti kada se web-stranica traži. Na primjer, umjesto da imate više CSS datoteka kao što su sljedeće:

     Možete ih kombinirati u jedan CSS:

   Preporučena čitanja:

   • Korisni alati za provjeru, čišćenje i optimizaciju CSS datotekeNeki od korisnih alata koje možete koristiti za optimizaciju CSS koda, čak i ako nemate potpuno znanje o CSS kodiranju.
   • 7 Načela čistog i optimiziranog CSS kodaOptimizacija ne samo da smanjuje veličinu datoteke - ona je također organizirana, besprijekorna i učinkovita.
   • Najbolje prakse za optimizaciju CSS-aRazmislite o ovom članku više kao o akademskoj vježbi, a ne o stvarnim savjetima za optimizaciju.

Optimizacija za WordPress

S vremena na vrijeme pratimo, analiziramo i analiziramo performanse našeg WordPress bloga. Ako stranica radi sporo, moramo znati zašto. Ovdje su neke osnovne promjene koje smo učinili i shvatili smo da će značajno povećati brzinu vašeg WordPress bloga.

1. Cache Your Worpress Blog

   WP-Cache je iznimno učinkovit WordPress stranica caching sustav kako bi vam site mnogo brže i osjetljiv. Također preporučujemo WP Super Cache koji poboljšava od prethodno spomenutih plugin i previše čini veliki posao.

2. Deaktivirajte i izbrišite neiskorištene dodatke

   Kada primijetite da se vaš blog učitava sporo, provjerite imate li mnogo instaliranih dodataka. Možda su krivci.

3. Uklonite nepotrebne PHP oznake

   Ako pogledate izvorne kodove svoje teme, naći ćete mnogo oznaka poput ovih:

   Mogu biti zamijenjeni tekstualnim sadržajem koji ne uzrokuje opterećenje poslužitelju. Provjeri Michael Martin„s 13 Oznake za brisanje iz vašeg WordPress Blog

Preporučena čitanja:

• 3 Najlakši način da ubrzate WordPressJohn Pozadzides dijeli kako njegov blog glatko plovi kroz Digg prometni šiljak.
• 13 Velika WordPress Brzina Savjeti i trikovi za MAX izvedbe Evo nekoliko stvari koje možete isprobati ako ustanovite da vaša web-lokacija WordPress ne funkcionira tako dobro kao što bi to moglo biti zbog velikog prometa ili skrivenih pitanja o kojima ne znate.
• 40 Savjeti za optimizaciju WordPressaSavjeti za optimizaciju u slajdovima. 40 savjeta za 40 minuta.

Posljednje, ali ne i najmanje važno ...

Ovdje su neke korisne web-usluge i alati koji vam pružaju širu perspektivu i bolju analizu koja će vam pomoći u optimizaciji weba.

• Yahoo! YSlow

  YSlow analizira web stranice i predlaže načine za poboljšanje izvedbe na temelju pravila za web stranice visokih performansi. To vam daje dobru ideju što treba učiniti kako bi se web stranica brže učitavala.

  (Potreban je Firebug)

  

• Brzina stranice

  Slično Yahoo! YSlow, Google Brzina stranice je open-source Firebug dodatak za procjenu performansi web-mjesta i kako ih poboljšati. (Potreban je Firebug)

  

• Pingdom alati

  Pingdom alati uzmite kompletno opterećenje svoje web-lokacije, uključujući sve objekte (slike, CSS, JavaScript, RSS, Flash i okvire / iframeove) i prikazuje opću statistiku o učitanoj stranici, kao što je ukupan broj objekata, ukupno vrijeme učitavanja i veličina, uključujući sve objekti.

  

Preporučena čitanja:Evo više savjeta i alata koji se isplati provjeriti.

• Google Web Optimizator
• 15 Alati koji će vam pomoći razviti brže web-stranice
• 15 + Savjeti za ubrzati svoju web stranicu, i optimizirati svoj kod!