Ultimate Guide to Web Optimization (padomi un paraugprakse)

Tīmekļa optimizācija ir būtiska tīmekļa izstrādes un uzturēšanas sastāvdaļa, bet arī kaut kas bieži tiek ignorēts tīmekļa pārziņiem. Padomājiet par naudu, ko varat ietaupīt, un par to, kā tā var palīdzēt palielināt lasītāju skaitu un satiksmes plūsmu, kad tās ir pareizi veiktas.

Ja līdz šim neesat veicis nekādu optimizāciju savā tīmekļa vietnē (vai emuārā) vai vienkārši interesējies, kā tas var palīdzēt paātrināt jūsu vietni, lūdzu, apskatiet šo optimizācijas padomu sarakstu, ko esam izveidojuši.

Labākas lasāmības labad mēs esam sadalījuši trīs atsevišķas sadaļas servera puses optimizācija, aktīvu optimizācija (kas ietver tīmekļa komponentus, piemēram, CSS, Javascript, attēlus utt.) un platformu, kur mēs koncentrēsimies WordPress optimizācija. Pēdējā sadaļā mēs izmetam pāris saites, kuras mēs sapratuši par noderīgām. Pilns saraksts pēc izlēkšanas.

Optimizācija: servera puse

1. Izvēlieties pienācīgu Web Host

   Jūsu tīmekļa mitināšanas kontam nav tiešas saiknes ar optimizācijas iespējām, kuras jūs gatavojaties veikt, bet mēs sapratām, ka izvēlējāmies pareizo web hostinga kontu tik svarīgi, ka mēs nolēmām vispirms pievērst jūsu uzmanību. Hostinga konts ir jūsu tīmekļa vietnes / emuāra pamats, kur tā drošība, pieejamība (cPanel, FTP, SSH), servera stabilitāte, cenas un klientu atbalsts ir svarīgas. Jums ir jāpārliecinās, ka esat labās rokās.

   Ieteicamais lasījums: Kā izvēlēties Web Host līdz wikiHow ir lielisks raksts, kas sniedz jums soļus un padomus, kas jums jāzina pirms jebkura web hostinga konta iegādes.

2. Uzņēmēja aktīvi atsevišķi

   Kad mēs pieminēt aktīvus, mēs domājām par tīmekļa komponentiem attēlus un statiskie skripti kas neprasa servera puses apstrādi. Tie ietver jebkuru tīmekļa grafiku, attēlus, Javascript, Cascading Style Sheets (CSS) utt. Hostinga aktīvi atsevišķi nav obligāti, bet mēs esam redzējuši milzīgu rezultātu saistībā ar servera stabilitāti ar šo ieviešanu, kad emuārā bija satiksmes plūsma.

   Ieteicamais lasījums: Paralēlu lejupielāžu maksimizēšana Carpool Lane.

3. Kompresija ar GZip

   Īsi sakot, saturs, kad HTTP pieprasījums tiek veikts, ceļo no servera puses uz klienta pusi (vicet versa). Satura saspiešana nosūtīšanai ievērojami samazina laiku, kas nepieciešams katra pieprasījuma apstrādei.

   GZip tas ir viens no labākajiem veidiem, kā to izdarīt, un tas atšķiras atkarībā no izmantoto serveru veida. Piemēram, Apache 1.3 izmanto mod_zip, Apache 2.x izmanto mod_deflate un šeit jūs to darāt Nginx. Šeit ir daži patiešām labi raksti, lai iepazītu servera puses kompresijas:

   • Paātriniet tīmekļa vietni, iespējot Apache failu saspiešanu
   • Saspiest tīmekļa izvadi, izmantojot mod_gzip un Apache
   • Kā optimizēt savu vietni ar GZIP kompresiju
   • Servera puses kompresija ASP

4. Samaziniet novirzīšanu

   Tīmekļa pārziņi visu laiku veic URL novirzīšanu (vai tas ir Javascript vai META novirzīšana). Dažreiz tā mērķis ir novirzīt lietotājus no vecās lapas uz jaunu, vai vienkārši orientēt lietotājus uz pareizo lapu. Katra novirzīšana rada papildu HTTP pieprasījumu un RTT (turp un atpakaļ). Jo vairāk ir novirzīšana, jo lēnāks lietotājs nokļūs galamērķa lapā.

   Ieteicamais lasījums: Izvairieties no novirzīšanas Google kods sniedz jums labu pārskatu par šo jautājumu. Raksts arī iesaka dažus praktiskus veidus, kā samazināt novirzīšanu, lai palielinātu apkalpošanas ātrumu.

5. Samaziniet DNS meklējumus

   Saskaņā ar Yahoo! Izstrādātāja tīkla emuārs, tas aizņem apmēram 20-120 milisekundes, lai DNS (domēna vārda sistēma) atrisinātu IP adresi noteiktam resursdatora nosaukumam vai domēna nosaukumam, un pārlūks nevar darīt neko, kamēr process nav pienācīgi pabeigts.

   Autors Steve Souders ieteica sadalīt šos komponentus vismaz divos, bet ne vairāk kā četros resursdatoros, lai samazinātu DNS meklējumus un atļautu augsta līmeņa paralēlu lejupielādi. Lasīt vairāk uz rakstu.

Optimizācija: aktīvi (CSS, Javascript, attēli)

1. Apvienot vairākus Javascript vienā

   Cilvēki at rakaz.nl koplieto, kā jūs varat apvienot vairākus Javascript, piemēram:

    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 

   Vienā failā, mainot URL uz:

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

   manipulējot ar .htaccess un izmantojot PHP. Noklikšķiniet šeit lasīt vairāk.

2. Saspiest Javascript & CSS

   Samazināt ir PHP5 lietotne, kas var apvienot vairākus CSS un Javascript failus, saspiest to saturu (t.i., nevajadzīgu atstarpju / komentāru noņemšanu) un apkalpot rezultātus ar HTTP kodējumu (gzip / deflate) un galvenēm, kas nodrošina optimālu klienta puses kešatmiņu.

   

   Saspiest tos tiešsaistē!Ir arī daži tīmekļa pakalpojumi, kas ļauj manuāli saspiest Javascript un CSS failus tiešsaistē. Šeit ir daži, ko mēs uzzinām:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS optimizētājs (CSS)

3. Pielāgot galvenes beigu termiņu / kešatmiņu

   Kredīts: httpwatch

   Izmantojot pielāgoto beigu virsrakstu, jūsu tīmekļa komponenti, piemēram, attēli, statiskie faili, CSS, Javascript, izlaida nevajadzīgo HTTP pieprasījumu, kad tas pats lietotājs atkārtoti ielādē lapu otro reizi. Tas samazina vajadzīgo joslas platumu un noteikti palīdz ātrāk apkalpot lapu.

   Ieteicamie rādījumi:

   • Yahoo! Izstrādātāja tīkla emuārs - pievienojiet beigu virsrakstu
   • Kā pievienot labas derīguma galvenes attēliem Apache 1.3
   • HTTP kešatmiņa
   • Kešatmiņas apmācība Web autoriem un tīmekļa pārziņiem

4. Ārpus slodzes Aktīvi

   Atvienojoties, mēs domājam, ka Javascript, attēli, CSS un statiskie faili ir jānošķir no galvenā servera, kur vietne ir izvietota, un ievieto tos citā serverī vai izmanto citus tīmekļa pakalpojumus. Mēs esam redzējuši ievērojamu uzlabojumu šeit Hongkiat atslēdzot aktīvus uz citiem pieejamajiem interneta pakalpojumiem, atstājot serveri galvenokārt PHP apstrādei. Tālāk sniegti daži tiešsaistes pakalpojumu ieteikumi, kas paredzēti, lai ielādētu:

   • Attēli: Flickr, Smugmug, Maksas mītnes *
   • Javascript: Google Ajax bibliotēka, Google lietotņu dzinējs, maksas mītnes *
   • Tīmekļa veidlapas: WuFoo, FormStack
   • RSS: Google Feedburner
   • Aptauja un aptaujas: SurveyMonkey, PollDaddy

   * Apmaksātas mītnes - Maksas pakalpojumiem vienmēr ir labāka uzticamība un stabilitāte. Ja jūsu vietne nepārtraukti pieprasa aktīvus, jums būs jāpārliecinās, ka tie ir labās rokās. Mēs iesakām Amazon S3 un Cloud Front.

5. Tīmekļa attēlu apstrāde

   Attēli ir svarīga jūsu vietnes daļa. Tomēr, ja tie nav pareizi optimizēti, tie var kļūt par apgrūtinājumu un galu galā izmantojot neparedzēti lielu joslas platumu daudzumu katru dienu. Te ir daži labākās prakses, lai optimizētu savus attēlus:

   • Optimizējiet PNG attēlusSmashing Magazine cilvēki apraksta dažus gudrus paņēmienus, kas var palīdzēt jums optimizēt jūsu PNG attēlus.
   • Optimizēšana tīmeklī - Lietas, kas jums jāzina (formāti) Uzziniet vairāk par JPEG, GIF, PNG un kā jums vajadzētu saglabāt attēlus tīmeklī.
   • Nelietojiet attēlus mērogāVienmēr izmantojiet platums un augstums katram attēlam. Tāpat nevajag samazināt attēlu tikai tāpēc, ka tīmeklī ir nepieciešama mazāka versija. Piemēram: Nepiespiediet mērogā 200 × 200 px attēlu līdz 50 × 50 px jūsu vietnei, mainot platums un augstums. Iegūstiet 50 × 50 px.

   Optimizēšana ar Web pakalpojumiem un rīkiem. Labas ziņas ir, ka jums nav jābūt Photoshop speciālistam, lai optimizētu savus attēlus. Ir daudz interneta pakalpojumu un rīku, kas palīdzēs jums veikt darbu.

   • Smush.itIespējams, viens no efektīvākajiem tiešsaistes rīkiem attēlu optimizēšanai. Ir pat WordPress spraudnis!
   • JPEG un PNG noņēmējsWindows rīks nevajadzīgu metadatu (junk) noņemšanai / tīrīšanai / noņemšanai no JPG / JPEG / JFIF un PNG failiem.
   • Tiešsaistes attēlu optimizētājsĻauj jums viegli optimizēt gifus, animētos gifus, jpgs un pngs, lai viņi pēc iespējas ātrāk ielādētu jūsu vietnē, izmantojot Dynamic Drive
   • SuperGIFBez piepūles padariet visus savus GIF attēlus un animācijas mazākus.
   • Šeit ir vairāk.

6. CSS apstrāde

   Mūsdienu tīmekļa vietnēs CSS tiek izmantots kā stila pamats, kā arī izskats un sajūta. Ne tikai CSS sniedz lielu elastību izmaiņām, bet arī mazāk nepieciešamo kodu ziņā. Tomēr, ja tie ir slikti kodēti, tas varētu būt aizdegšanās. Šeit ir daži kontrolsaraksti vai drīzāk norādījumi, lai pārliecinātos, ka CSS ir pareizi optimizēti:

   • Jūsu elementu bērnu uzturēšana saskaņā ar pēcnācējiemKā saglabāt savu iezīmējumu tīru ar CSS atlasītājiem.
   • Saglabājiet CSS īsuKad tie dod to pašu stilu, kodi ir labāki, nekā tie ir īsāki. Lūk, a CSS īsfilmu rokasgrāmata jums, iespējams, būs nepieciešams.
   • Izmantojiet CSS SpriteCSS Sprite tehnika samazina HTTP pieprasījumu katru reizi, kad lapa tiek ielādēta, apvienojot vairākus (vai visus) attēlus vienā attēla failā un kontrolējot tā izvadi ar CSS fona stāvoklis atribūts. Šeit ir daži noderīgi ceļveži un metodes, lai izveidotu CSS Sprites:
     • Tiešsaistes CSS Sprite ģenerators
     • Labākais tiešsaistes un bezsaistes CSS Sprites ģenerators
   • Katras deklarācijas izmantošana tikai vienu reiziAplūkojot CSS failu optimizāciju, viens no spēcīgākajiem pasākumiem, ko varat izmantot, ir izmantot katru deklarāciju tikai vienu reizi.
   • Samaziniet CSS failu skaituIemesls ir vienkāršs, jo vairāk CSS failu jums ir vairāk HTTP pieprasījuma, kas tai būs jāveic, kad tiek pieprasīta tīmekļa lapa. Piemēram, tā vietā, lai būtu vairāki CSS faili, piemēram, šādi:

     Tos var apvienot vienā CSS:

   Ieteicamie rādījumi:

   • Noderīgi rīki, lai pārbaudītu, tīrītu un optimizētu CSS failuDaži no noderīgiem rīkiem, ko varat izmantot, lai optimizētu CSS kodu, pat ja jums nav pilnīgi nekādu zināšanu par CSS kodēšanu.
   • 7 Tīrā un optimizētā CSS kodeksa principiOptimizācija ne tikai samazina faila lielumu - tā ir arī organizēta, bezjēdzīga un efektīva.
   • Labākā prakse CSS optimizēšanaiApsveriet šo rakstu vairāk kā akadēmisku uzdevumu, nevis reālu dzīves optimizācijas padomus.

Optimizācija WordPress

Laiku pa laikam mēs pārraugām, salīdzinām un analizējam mūsu WordPress blogu veiktspēju. Ja vietne darbojas lēni, mums ir jāzina, kāpēc. Šeit ir dažas galvenās izmaiņas, ko mēs esam darījuši, un mēs sapratu, ka jūsu WordPress emuāra ātrums ievērojami palielināsies.

1. Cache Your Worpress emuārs

   WP-kešatmiņa ir ļoti efektīva WordPress lapu kešatmiņas sistēma, lai padarītu vietni daudz ātrāku un atsaucīgāku. Mēs arī iesakām WP Super kešatmiņa kas uzlabo iepriekšējo spraudni un arī veic lielisku darbu.

2. Deaktivizēt un dzēst neizmantotos spraudņus

   Kad pamanāt, ka jūsu emuārs ielādējas reāli lēni, skatiet, vai jums ir instalēti daudzi spraudņi. Viņi varētu būt vaininieks.

3. Noņemt nevajadzīgos PHP tagus

   Ja aplūkojat tēmas avota kodus, jūs atradīsiet tādus daudzus tagus kā:

   Tos var diezgan daudz aizstāt ar teksta saturu, kas neizraisa slodzi serverim. Izbraukšana Michael Martinir 13 Atslēgvārdi, kas jāizdzēš no jūsu WordPress Blog

Ieteicamie lasījumi:

• 3 Vieglākie veidi, kā paātrināt WordPressDžons Pozadzīds dalās ar savu emuāru bez traucējumiem, izmantojot Digg datplūsmas smaili.
• 13 Lieliski WordPress ātruma padomi un triki MAX veiktspējai Šeit ir dažas lietas, kas jāmēģina, ja konstatējat, ka jūsu WordPress vietne nedarbojas tik labi, kā tas varētu būt saistīts ar lielu satiksmi vai slēptām problēmām, par kurām jūs nezināt.
• 40 WordPress optimizācijas padomiOptimizācijas padomi slaidos. 40 padomi 40 minūšu laikā.

Pēdējais bet ne sliktākais…

Šeit ir daži noderīgi tīmekļa pakalpojumi un rīki, kas sniedz plašāku perspektīvu un labāku analīzi, lai palīdzētu jums tīmekļa optimizācijā.

• Yahoo! YSlow

  YSlow analizē tīmekļa lapas un iesaka veidus, kā uzlabot to veiktspēju, pamatojoties uz noteikumu kopumu augstas veiktspējas tīmekļa lapām. Tas dod jums labu priekšstatu par to, kas jādara, lai tīmekļa vietne tiktu ielādēta ātrāk.

  (Nepieciešams Firebug)

  

• PageSpeed

  Līdzīgs Yahoo! YSlow, Google Lapas ātrums ir atvērtā koda Firebug papildinājums, lai novērtētu tīmekļa vietnes sniegumu un to, kā tos uzlabot. (Nepieciešams Firebug)

  

• Pingdom rīki

  Pingdom rīki veikt pilnu jūsu vietnes slodzi, ieskaitot visus objektus (attēlus, CSS, JavaScripts, RSS, Flash un rāmjus / iframes), un parāda vispārējo statistiku par ielādēto lapu, piemēram, kopējo objektu skaitu, kopējo ielādes laiku un lielumu, ieskaitot visus objektiem.

  

Ieteicamie rādījumi:Šeit ir vairāk padomu un rīku, kas ir vērts pārbaudīt.

• Google tīmekļa optimizētājs
• 15 Rīki, kas palīdz veidot ātrākas tīmekļa lapas
• 15+ padomi, lai paātrinātu jūsu vietni un optimizētu kodu!