Ultimate Guide to Web Optimization (nõuanded ja parimad tavad)

Veebi optimeerimine on veebiarenduse ja -hoolduse oluline osa, aga ka veebimeistrite sageli tähelepanuta jäänud. Mõelge lihtsalt raha eest, mida saate salvestada, ja kuidas see võib aidata teie lugejaskonda ja liiklust suurendada, kui need on korralikult tehtud.

Kui te pole oma veebisaidi (või blogi) osas seni optimeerinud või lihtsalt uudishimulik, kuidas see aitab teie veebisaiti kiirendada, vaadake palun seda optimeerimisnõuete loendit, mille oleme kokku loonud.

Parema loetavuse huvides jagasime asjad kolmeks eraldi sektsiooniks serveripoolne optimeerimine, varade optimeerimine (mis sisaldab veebikomponente nagu CSS, Javascript, pildid jne) ja platvorm, kus me keskendume WordPressi optimeerimine. Viimases osas visandame paar linki, mille me arvasime kasulikuks. Täielik nimekiri pärast hüpata.

Optimeerimine: serveri pool

1. Valige korralik veebihost

   Teie veebimajutusteenuste kontol ei ole otsest seost optimeeringutega, mida te kavatsete täita, kuid me arvasime, et õige veebimajutusteenuse konto on nii oluline, et me otsustasime selle teie tähelepanu juhtida. Hostingu konto on teie veebisaidi / blogi vundament, kus selle turvalisus, ligipääsetavus (cPanel, FTP, SSH), serveri stabiilsus, hinnad ja klienditoetused mängivad olulist rolli. Te peate veenduma, et olete heades kätes.

   Soovitatav lugemine: Kuidas valida veebihost kõrval wikiKuidas on suurepärane artikkel, mis annab teile samme ja näpunäiteid, mida peaksite teadma enne web hosting konto ostmist.

2. Vastuvõttev vara eraldi

   Kui me mainime varasid, tähendasime selliseid veebikomponente pilte ja staatilised skriptid mis ei vaja serveripoolset töötlemist. Nende hulka kuuluvad kõik veebi graafika, pildid, Javascriptid, kaskaadistiilid (CSS) jne. Võõrustamisvarad eraldi ei ole, kuid me oleme näinud selle rakenduse puhul tohutut tulemust serveri stabiilsuse osas, kui blogil oli liiklusvõrk.

   Soovitatav lugemine: Paralleelsete allalaadimiste maksimeerimine Carpool Lane'is.

3. Tihendamine GZipiga

   Lühidalt öeldes liigub sisu serveri poolelt kliendi küljele (vicet versa), kui HTTP-päring on tehtud. Sisu tihendamine saatmiseks vähendab oluliselt iga taotluse töötlemiseks kuluvat aega.

   GZip on üks parimaid viise seda teha ja see on erinev sõltuvalt kasutatavate serverite tüübist. Näiteks, Apache 1.3 kasutab mod_zip, Apache 2.x kasutab mod_deflate ja siin saate seda teha Nginx. Siin on mõned tõesti head artiklid, et tutvuda serveripoolsete kompressioonidega:

   • Kiirenda veebisaiti, võimaldades Apache'i failide tihendamist
   • Veebi väljundi tihendamine mod_gzip ja Apache abil
   • Kuidas optimeerida oma saiti GZIP-i pakkimisega
   • Serveripoolne kompressioon ASP jaoks

4. Minimeeri ümbersuunamised

   Veebimeistrid teevad URL-i ümbersuunamist (kas see on Javascript või META redirects) kogu aeg. Mõnikord on eesmärk suunata kasutajad vanalt lehelt uuele või lihtsalt suunata kasutajad õigele lehele. Iga ümbersuunamine loob täiendava HTTP-taotluse ja RTT (edasi-tagasi). Mida rohkem on ümbersuunamine, seda aeglasem kasutaja saab sihtlehele.

   Soovitatav lugemine: Väldi ümbersuunamisi Google Code annab teile selle kohta hea ülevaate. Artiklis soovitatakse ka mõningaid praktilisi viise, kuidas minimeerida ümbersuunamist serveri kiiruse suurendamiseks.

5. Vähendage DNS-i otsinguid

   Vastavalt Yahoo! Arendajavõrgu blogi, DNS (Domain Name System) DNS-i IP-aadressi lahendamiseks kulub umbes 20-120 millisekundit, kuid brauser ei saa midagi teha enne, kui protsess on nõuetekohaselt lõpule viidud.

   Autor Steve Souders soovitas, et nende komponentide jagamine vähemalt kahe, kuid mitte rohkem kui nelja hostinime võrra vähendab DNS-i otsinguid ja võimaldaks kõrgetasemelist paralleelset allalaadimist. Loe rohkem artiklis.

Optimeerimine: varad (CSS, Javascripts, Images)

1. Mitme Javascripti ühendamine üheks

   Inimesed kell rakaz.nl jagab seda, kuidas saab kombineerida mitut Javascripti nagu:

    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 

   Ühele failile URL-i muutmine:

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

   manipuleerides .htaccess ja kasutades PHP. Kliki siia rohkem lugeda.

2. Pakkige Javascript & CSS

   Vähenda on PHP5 rakendus, mis suudab kombineerida mitmeid CSS- ja Javascript-faile, tihendada nende sisu (nt tarbetute tühikute / kommentaaride eemaldamist) ja teenida tulemusi HTTP-kodeeringuga (gzip / deflate) ja päisedega, mis võimaldavad optimaalset kliendipoolset vahemälu.

   

   Tihendage need võrgus!On ka mõningaid veebiteenuseid, mis võimaldavad teil oma Javascripte ja CSS-faile võrgus käsitsi kompresseerida. Siin on vähe, mida me teame:

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

3. Päise päise aegumise / vahemälu kohandamine

   Krediit: httpwatch

   Kasutades kohandatud aegumise päist, kustutasid teie veebikomponendid, nagu pildid, staatilised failid, CSS, Javascript, tarbetu HTTP-taotluse, kui sama kasutaja laadib lehe teist korda uuesti. See vähendab vajalikku ribalaiust ja aitab kindlasti lehekülge kiiremini teenindada.

   Soovitatavad näited:

   • Yahoo! Arendajavõrgu blogi - lisage aegunud päis
   • Kuidas lisada häid kulutusi päistele Apache'i piltidele 1.3
   • HTTP vahemälu
   • Caching Tutorial veebi autoritele ja veebimeistritele

4. Koormamata vara

   Laadimisega väljalülitamisel tähendame Javascripti, piltide, CSS-i ja staatiliste failide eraldamist põhiserverist, kus veebisait on majutatud, ning asetage need teise serverisse või tugineda muudele veebiteenustele. Oleme siin oluliselt paranenud Hongkiat varade allalaadimine teistele kättesaadavatele veebiteenustele, jättes serverile peamiselt PHP töötlemise. Järgnevalt on toodud mõned soovitused võrguteenuste kohta, mis on mõeldud laadimiseks:

   • Pildid: Flickr, Smugmug, Tasulised majutused *
   • Javascript: Google Ajaxi raamatukogu, Google App Engine, makstud hostings *
   • Veebivorms: WuFoo, FormStack
   • RSS: Google Feedburner
   • Küsitlused ja küsitlused: SurveyMonkey, PollDaddy

   * Tasulised majutused - Tasulistel teenustel on alati parem usaldusväärsus ja stabiilsus. Kui teie veebisait nõuab pidevalt varasid, peate veenduma, et need on heades kätes. Soovitame Amazon S3 ja Cloud Front.

5. Veebi kujutiste käsitlemine

   Pildid on teie veebisaidi oluline osa. Kui aga need ei ole korralikult optimeeritud, võivad need muutuda koormaks ja lõpuks kasutada igapäevaselt ettearvamatult suurt ribalaiust. Siin on mõned parimad tavad oma piltide optimeerimiseks:

   • PNG-piltide optimeerimineSmashing Magazine'i inimesed kirjeldavad mõningaid nutikaid tehnikaid, mis võivad aidata teil oma PNG-pilte optimeerida.
   • Veebi optimeerimine - Asjad, mida pead teadma (vormingud) Lisateave JPEG, GIF, PNG ja selle kohta, kuidas oma pildid veebi salvestada.
   • Ärge vähendage piltePraktika lisamine toimub alati laius ja kõrgus iga pildi kohta. Samuti ei vähenda pilt lihtsalt sellepärast, et vajate veebis väiksemat versiooni. Näiteks: Ärge sundige oma veebisaidile 200 × 200 px pildi suurust 50 × 50 px, muutes laius ja kõrgus. Saage selle asemel 50 × 50 pikslit.

   Optimeerimine veebiteenuste ja tööriistadega. Hea uudis on see, et teie piltide optimeerimiseks ei pea te olema Photoshopi ekspert. Töö tegemiseks on palju veebiteenuseid ja -vahendeid.

   • Smush.itIlmselt üks kõige tõhusamaid veebipõhiseid vahendeid piltide optimeerimiseks. Seal on isegi WordPressi plugin!
   • JPEG & PNG StripperWindowsi tööriist mittevajalike metaandmete (junk) eemaldamiseks / eemaldamiseks / eemaldamiseks JPG / JPEG / JFIF & PNG-failidest.
   • Online-pildi optimeerijaVõimaldab teil oma gifid, animeeritud gifid, jpgs ja pngs kergesti optimeerida, nii et nad laadiksid teie saidil Dynamic Drive'i nii kiiresti kui võimalik
   • SuperGIFTehke kõik oma GIF-pildid ja animatsioonid väiksemaks.
   • Siin on rohkem.

6. CSS käitlemine

   Kaasaegsed veebisaidid kasutavad stiili aluseks CSS-i, samuti välimust ja tundeid. Mitte ainult CSS annab suurele paindlikkusele muudatusi, vaid ka vajalike koodide osas. Kuid kui need on halvasti kodeeritud, võib see olla tagasilöök. Siin on mõned kontrollnimekirjad või pigem juhised teile, et teie CSS oleks õigesti optimeeritud:

   • Elementide laste hoidmine järglastegaKuidas hoida oma märgistus CSS-i valijatega puhtana.
   • Hoidke CSS lühikeKui nad annavad sama stiili, on koodid paremad kui lühemad. Siin on a CSS lühikirjeldus ilmselt vajate.
   • Kasutage CSS SpriteCSS Sprite tehnika vähendab HTTP-päringut iga kord, kui leht on koormatud, kombineerides mitu (või kõiki) pilti ühel pildifailil ja kontrollides selle väljundit CSS-iga taustasend atribuut. Siin on mõned kasulikud juhised ja tehnikad CSS Sprite'i loomiseks:
     • Online CSS Sprite generaator
     • Parim online ja offline CSS Sprites generaator
   • Iga deklaratsiooni kasutamine ainult üks kordKui soovid oma CSS-faile optimeerida, on üks kõige võimsamaid meetmeid kasutada iga deklaratsiooni kasutamiseks üks kord.
   • Vähendage CSS-failide hulkaPõhjus on lihtne, seda rohkem CSS-faile teil on rohkem HTTP-päringut, mida ta peab veebilehe taotlemisel tegema. Näiteks mitme CSS-faili asemel, nagu näiteks:

     Neid saab kombineerida üheainsa CSS-iga:

   Soovitatavad näited:

   • Kasulikud tööriistad CSS-faili kontrollimiseks, puhastamiseks ja optimeerimiseksMõned kasulikud tööriistad, mida saate kasutada oma CSS-koodi optimeerimiseks, isegi kui teil pole täiesti teadmisi CSS-kodeeringust.
   • 7 Puhta ja optimeeritud CSS-koodi põhimõttedOptimeerimine ei ole lihtsalt faili suuruse vähendamine - see on ka organiseerimise, segaduse ja tõhususe kohta.
   • Parimad tavad CSS optimeerimiseksMõtle sellele artiklile pigem pigem akadeemilise kui reaalse elu optimeerimise nõuandeid.

WordPressi optimeerimine

Aeg-ajalt jälgime, mõõdame ja analüüsime oma WordPressi blogi toimivust. Kui sait töötab aeglaselt, peame teadma, miks. Siin on mõned põhilised muudatused, mida oleme teinud ja me arvasime, et teie WordPressi blogi kiirus suureneb.

1. Vahemälu Teie Worpress Blog

   WP-vahemälu on väga tõhus WordPressi lehekülgede vahemällu salvestamise süsteem, mis muudab saidi kiiremaks ja tundlikumaks. Samuti soovitame WP Super vahemälu mis suurendab eelmisest mainitud pluginast ja teeb ka head tööd.

2. Deaktiveeri ja kustuta kasutamata pluginad

   Kui märkate, et teie blogi on tõesti aeglane, vaadake, kas teil on palju installitud pluginaid. Nad võivad olla süüdlane.

3. Eemaldage mittevajalikud PHP sildid

   Kui vaatate oma teema lähtekoode, leiad palju selliseid sildid:

   Neid saab päris palju asendada tekstisisuga, mis ei põhjusta serverile koormust. Check out Michael Martinon 13 WordPress Blo'ilt kustutatavad sildidg

Soovitatavad lugemised:

• 3 Lihtsaim viis WordPressi kiirendamiseksJohn Pozadzides jagab, kuidas oma blogi sujuvalt läbi Digg liiklusspike.
• 13 suurepärast WordPressi kiiruse nõuandeid ja trikke MAX jõudluse jaoks Siin on mõned asjad, mida proovida, kui leiate, et teie WordPressi sait ei toimi nii hästi kui see on tingitud suurest liiklusest või varjatud probleemidest, mida te ei tea.
• 40 WordPressi optimeerimisnõuandedOptimeerimise nõuanded slaidides. 40 nõuannet 40 minuti jooksul.

Viimane, kuid mitte vähem tähtis…

Siin on mõned kasulikud veebiteenused ja -vahendid, mis annavad teile laiema perspektiivi ja parema analüüsi, et aidata teil veebi optimeerimisel.

• Yahoo! YSlow

  YSlow analüüsib veebilehti ja pakub võimalusi, kuidas parandada nende jõudlust, tuginedes reeglite kogumile kõrgtehnoloogiliste veebilehtede jaoks. See annab teile hea idee, mida tuleb teha, et veebisait kiiremini laadida.

  (Nõutav Firebug)

  

• PageSpeed

  Sarnane Yahoo! YSlow, Google Lehekülje kiirus on avatud lähtekoodiga Firebugi lisandmoodul, mis võimaldab hinnata veebisaidi toimivust ja kuidas neid parandada. (Nõutav Firebug)

  

• Pingdom tööriistad

  Pingdom tööriistad võtke täielik veebisaidi koormus, sealhulgas kõik objektid (pildid, CSS, JavaScripts, RSS, Flash ja kaadrid / iframes), ning kuvatakse üldine statistika laaditud lehe kohta, näiteks objektide koguarv, kogu laadimisaeg ja suurus, sealhulgas kõik objektid objektid.

  

Soovitatavad näited:Siin on rohkem näpunäiteid ja vahendeid, mida tasub vaadata.

• Google'i veebi optimeerija
• 15 Kiiremate veebilehtede arendamise abivahendid
• 15+ nõuanded veebisaidi kiirendamiseks ja koodi optimeerimiseks!