Galutinis žiniatinklio optimizavimo vadovas (patarimai ir geriausia praktika)

Žiniatinklio optimizavimas yra gyvybiškai svarbi interneto kūrimo ir priežiūros dalis, bet taip pat ir tai, ką dažnai ignoruoja žiniatinklio valdytojai. Pagalvokite apie pinigus, kuriuos galite sutaupyti, ir kaip tai gali padėti padidinti jūsų skaitytojų skaičių ir srautą, kai jie bus tinkamai atlikti.

Jei iki šiol nepadarėte optimizavimo savo svetainėje (ar tinklaraštyje) arba tiesiog smalsu, kaip jis gali pagreitinti jūsų svetainę, peržiūrėkite šį optimizavimo patarimų sąrašą.

Siekdami geriau suprantamumo, mes padalijome į tris atskiras dalis serverio pusės optimizavimas, turto optimizavimas (įskaitant interneto komponentus, tokius kaip CSS, Javascript, vaizdai ir kt.) ir platforma, kur mes sutelksime dėmesį „WordPress“ optimizavimas. Paskutiniame skyriuje mes mesti keletą nuorodų, kurias supratome kaip naudingus. Visas sąrašas po šuolio.

Optimizavimas: serverio pusė

1. Pasirinkite tinkamą Web Host

   Jūsų interneto prieglobos paskyra neturi tiesioginio ryšio su optimizavimais, kuriuos ketinate atlikti, bet mes supratome, kad pasirinkome tinkamą interneto prieglobos paskyrą, todėl mes nusprendėme pirmiausia pareikšti jūsų dėmesį. Hostingo sąskaita yra jūsų svetainės / tinklaraščio pagrindas, kur saugumas, prieinamumas (cPanel, FTP, SSH), serverių stabilumas, kainos ir klientų palaikymas atlieka svarbų vaidmenį. Jūs turite įsitikinti, kad esate gerose rankose.

   Rekomenduojamas skaitymas: Kaip pasirinkti žiniatinklio prieglobą iki wikiHow yra puikus straipsnis, kuris suteikia jums žingsnių ir patarimų, kuriuos turėtumėte žinoti prieš perkant bet kurią interneto prieglobos sąskaitą.

2. Priimančioji priemonė atskirai

   Kai paminėjome turtą, mes turėjome omenyje interneto komponentus vaizdai ir statiniai scenarijai kurioms nereikia tvarkyti serverio. Tai apima bet kokią žiniatinklio grafiką, vaizdus, ​​„Javascripts“, „Cascading Style Sheets“ (CSS) ir pan. Hostingas turtas atskirai nėra privalomas, tačiau matėme didžiulį rezultatą dėl serverio stabilumo su šiuo įgyvendinimu, kai dienoraštis turėjo srautą.

   Rekomenduojamas skaitymas: Maksimalus lygiagrečių failų atsisiuntimas „Carpool Lane“.

3. Kompresija su GZip

   Trumpai tariant, turinys keliauja iš serverio pusės į kliento pusę („vicet versa“), kai pateikiamas HTTP prašymas. Spaudžiant turinį siuntimui, labai sumažėja laikas, reikalingas kiekvienam prašymui apdoroti.

   GZip yra vienas iš geriausių būdų tai padaryti ir tai įvairi, atsižvelgiant į naudojamų serverių tipą. Pavyzdžiui, Apache 1.3 naudoja mod_zip, Apache 2.x naudoja mod_deflate ir kaip tai padaryti Nginx. Štai keletas tikrai gerų straipsnių, kad sužinotumėte apie serverio pusės kompresijas:

   • Paspartinkite svetainę, įgalindami „Apache“ failų glaudinimą
   • Suspausti žiniatinklio išėjimą naudojant mod_gzip ir Apache
   • Kaip optimizuoti savo svetainę su GZIP suspaudimu
   • ASP serverio pusės suspaudimas

4. Sumažinkite peradresavimus

   Žiniatinklio valdytojai visą laiką peradresuoja URL (ar tai „Javascript“ ar „META“ peradresavimas). Kartais tikslas yra nukreipti vartotojus iš seno puslapio į naują arba tiesiog nukreipti naudotojus į teisingą puslapį. Kiekvienas peradresavimas sukuria papildomą HTTP užklausą ir RTT (atgalinis laikas). Kuo daugiau nukreipimų turite, tuo lėčiau vartotojas pateks į paskirties puslapį.

   Rekomenduojamas skaitymas: Venkite peradresavimo „Google“ kodeksas suteikia jums gerą apžvalgą šiuo klausimu. Straipsnyje taip pat rekomenduojami keli praktiniai būdai, kaip sumažinti nukreipimą, kad būtų padidintas aptarnavimo greitis.

5. Sumažinti DNS paieškas

   Pagal „Yahoo! Kūrėjo tinklo tinklaraštis, tai užtrunka apie 20–120 milisekundžių, kad DNS (domeno vardų sistema) išspręstų tam tikro kompiuterio vardo ar domeno vardo IP adresą, o naršyklė negali nieko daryti, kol procesas nebus baigtas tinkamai.

   Autorius Steve Souders pasiūlė, kad šie komponentai būtų suskirstyti į mažiausiai du, bet ne daugiau kaip keturis serverio vardus, kad būtų sumažintos DNS paieškos ir leidžiama lygiagrečiai parsisiųsti. Skaityti daugiau apie straipsnį.

Optimizavimas: turtas (CSS, „Javascripts“, „Images“)

1. Sujungti kelis „Javascripts“ į vieną

   Žmonės ne rakaz.nl dalijasi tuo, kaip galite sujungti kelis „Javascript“, pavyzdžiui:

    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ą pakeiskite URL į:

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

   manipuliuojant .htaccess ir naudojant PHP. Paspauskite čia skaityti daugiau.

2. Suspausti „Javascript & CSS“

   Sumažinti yra PHP5 programa, kuri gali sujungti kelis CSS ir „Javascript“ failus, suspausti jų turinį (t.y. nereikalingų tarpų / komentarų pašalinimą) ir pateikti rezultatus su HTTP kodavimu (gzip / deflate) ir antraštėmis, kurios leidžia optimaliai kliento pusėje išsaugoti talpyklą.

   

   Suspauskite juos internete!Taip pat yra keletas interneto paslaugų, kurios leidžia rankiniu būdu suspausti „JavaScript“ ir „CSS“ failus internete. Štai keli, su kuriais susipažinome:

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

3. Tinkinti antraštės galiojimą / talpyklą

   Kreditas: „httpwatch“

   Naudodami tinkintą galiojimo pabaigos antraštę, jūsų interneto komponentai, pvz., Vaizdai, statiniai failai, „CSS“, „Javascript“, praleido nereikalingą HTTP užklausą, kai tas pats naudotojas perkelia puslapį antrą kartą. Tai sumažina reikalingą dažnių juostos plotį ir neabejotinai padeda greičiau aptarnauti puslapį.

   Rekomenduojami rodmenys:

   • „Yahoo! Kūrėjo tinklo tinklaraštis - pridėti galiojimo pabaigą
   • Kaip pridėti geros galiojimo antraštes į „Apache“ vaizdus 1.3
   • HTTP talpykla
   • „Caching“ žinynas interneto autoriams ir žiniatinklio valdytojams

4. Iškraunamas turtas

   Išjungus pakrovimą, mes norime atskirti „Javascripts“, „images“, „CSS“ ir statinius failus iš pagrindinio serverio, kuriame yra talpinama svetainė, ir įdėti juos į kitą serverį arba pasikliauti kitomis žiniatinklio paslaugomis. Mes matėme gerokai pagerėjimą čia Hongkiat perkeliant turtą į kitas žinomas interneto paslaugas, paliekant serverį daugiausia apdoroti PHP. Štai keletas pasiūlymų, susijusių su interneto paslaugomis, skirtomis pakrauti:

   • Vaizdai: „Flickr“, „Smugmug“, mokamos prieglobos *
   • „Javascripts“: „Google Ajax“ biblioteka, „Google App Engine“, mokamos prieglobos *
   • Žiniatinklio formas: WuFoo, FormStack
   • RSS: „Google Feedburner“
   • Apklausa ir apklausos: SurveyMonkey, PollDaddy

   * Mokama priegloba - Mokamos paslaugos visada turi geresnį patikimumą ir stabilumą. Jei jūsų svetainė nuolat prašo turto, turite įsitikinti, kad jie yra gerose rankose. Rekomenduojame „Amazon S3“ ir „Cloud Front“.

5. Web vaizdų tvarkymas

   Vaizdai yra svarbi jūsų svetainės dalis. Tačiau jei jie nėra tinkamai optimizuoti, jie gali tapti našta ir galiausiai kasdien naudodami nenuspėjamai didelį dažnių juostos plotį. Stai keleta geriausia praktika, kaip optimizuoti savo vaizdus:

   • Optimizuokite PNG vaizdus„Smashing Magazine“ žmonės aprašo keletą protingų būdų, kurie gali padėti jums optimizuoti jūsų PNG vaizdus.
   • Optimizavimas žiniatinklyje - Ką reikia žinoti (formatai) Sužinokite daugiau apie JPEG, GIF, PNG ir kaip turėtumėte išsaugoti vaizdus žiniatinklyje.
   • Neskaičiuokite vaizdųVisada praktikuokite plotis ir aukštis kiekvienam vaizdui. Taip pat nereikia mažinti vaizdo tik dėl to, kad jums reikia mažesnės versijos žiniatinklyje. Pavyzdžiui: Nekeiskite skalės 200 × 200 px, kad jūsų svetainė būtų 50 × 50 px, pakeisdami plotis ir aukštis. Vietoj to gaukite 50 × 50 px.

   Optimizavimas naudojant žiniatinklio paslaugas ir įrankius. Geros naujienos yra tai, kad jums nereikia būti Photoshop ekspertu, kad optimizuotumėte savo vaizdus. Yra daug interneto paslaugų ir įrankių, padedančių atlikti darbą.

   • Smush.itTikriausiai vienas iš efektyviausių internetinių įrankių vaizdų optimizavimui. Yra net „WordPress“ papildinys!
   • JPEG ir PNG žymekliai„Windows“ įrankis nereikalingų metaduomenų (šiukšlių) pašalinimui / šalinimui iš JPG / JPEG / JFIF ir PNG failų.
   • Dabar naršo vaizdo optimizavimo priemonėLeidžia lengvai optimizuoti gifs, animacinius gifus, jpgs ir pngs, kad jie įdėtų kuo greičiau jūsų svetainėje, naudojant „Dynamic Drive“
   • SuperGIFLengvai nuveikite visus GIF vaizdus ir animacijas.
   • Štai daugiau.

6. CSS tvarkymas

   Šiuolaikinės svetainės naudoja CSS kaip stiliaus pagrindą ir išvaizdą. Ne tik CSS suteikia didelį lankstumą pokyčiams, bet taip pat yra mažesnis pagal reikalingus kodus. Tačiau, jei jie yra blogai koduoti, tai gali būti užgrobimas. Štai keletas kontrolinių sąrašų, o jums padės, kad jūsų CSS būtų tinkamai optimizuoti:

   • Laikydami savo elementus vaikus pagal palikuonisKaip išlaikyti savo žymę švariu CSS Selectors.
   • Laikykite CSS trumpąKai jie suteikia tą patį stilių, kodai yra geresni, tuo trumpesni jie yra. Štai a CSS trumpasis vadovas jums tikriausiai reikės.
   • Naudokite „CSS Sprite“CSS Sprite technika sumažina HTTP užklausą kiekvieną kartą, kai puslapis įkeliamas, derinant kelis (arba visus) vaizdus viename vaizdo faile ir valdant jo išvestį su CSS fono padėtis atributas. Štai keletas naudingų vadovų ir būdų, kaip sukurti CSS Sprites:
     • Dabar naršo CSS Sprite generatorius
     • Geriausias internetinis ir neprisijungęs CSS Sprites generatorius
   • Kiekvieną deklaraciją naudoti tik vieną kartąSiekdami optimizuoti savo CSS failus, viena iš galingiausių priemonių, kurias galite naudoti, yra naudoti kiekvieną deklaraciją tik vieną kartą.
   • Sumažinkite CSS failų kiekįPriežastis yra paprasta, tuo daugiau CSS failų turite daugiau HTTP užklausos, kurią turės atlikti, kai bus prašoma tinklalapio. Pavyzdžiui, vietoj kelių CSS failų, tokių kaip:

     Galite juos sujungti į vieną CSS:

   Rekomenduojami rodmenys:

   • Naudingi įrankiai CSS failui patikrinti, valyti ir optimizuotiKai kurie naudingi įrankiai, kuriuos galite naudoti norėdami optimizuoti savo CSS kodą, net jei jūs visiškai nežinote apie CSS kodavimą.
   • 7 Švaraus ir optimizuoto CSS kodo principaiOptimizavimas ne tik sumažina failo dydį, bet ir apie organizavimą, netvarką ir efektyvumą.
   • Geriausios praktikos CSS optimizavimuiApsvarstykite šį straipsnį labiau kaip akademinį pratimą, o ne realaus gyvenimo optimizavimo patarimus.

„WordPress“ optimizavimas

Kartais stebime, analizuojame ir analizuojame „WordPress“ tinklaraščio našumą. Jei svetainė veikia lėtai, turime žinoti, kodėl. Štai keletas pagrindinių pakeitimų, kuriuos atlikome, ir mes supratome, kad jūsų „WordPress“ tinklaraštis greičiau padidės.

1. „Cache Your Worpress Blog“

   WP-talpykla yra labai efektyvi „WordPress“ puslapio talpyklų sistema, kad svetainė taptų daug greitesnė ir jautresnė. Mes taip pat rekomenduojame „WP Super Cache“ kuris padidina ankstesnį minėtą įskiepį ir taip pat atlieka puikų darbą.

2. Išjungti ir ištrinti nepanaudotus papildinius

   Kai pastebėsite, kad jūsų tinklaraštis įkeliamas tikrai lėtai, pažiūrėkite, ar įdiegta daug įskiepių. Jie gali būti kaltininkas.

3. Pašalinkite nereikalingas PHP žymes

   Jei pažvelgsite į savo temos šaltinio kodus, rasite tokių žymių:

   Jie gali būti labai pakeisti teksto turiniu, dėl kurio serveryje nėra apkrovos. Patikrinkite Michael Martin's 13 Žymos, kurias norite ištrinti iš „WordPress Blo“g

Rekomenduojami skaitymai:

• 3 Lengviausias būdas paspartinti WordPressJohn Pozadzides dalinasi, kaip jo dienoraštis sklandžiai vyksta per „Digg“ eismo smaigalį.
• 13 Didžiosios „WordPress“ greičio patarimai ir gudrybės „MAX Performance“ Štai keletas dalykų, kuriuos reikia išbandyti, jei pastebėsite, kad jūsų „WordPress“ svetainė neveikia taip pat, kaip ir dėl didelio eismo ar paslėptų problemų, apie kuriuos nežinote.
• 40 „WordPress“ optimizavimo patarimųSkaidrių optimizavimo patarimai. 40 patarimų per 40 minučių.

Paskutinis, bet ne prasčiausias…

Štai keletas naudingų interneto paslaugų ir įrankių, kurie suteikia jums platesnę perspektyvą ir geresnę analizę, kad padėtų jums optimizuoti internetą.

• „Yahoo! YSlow

  YSlow analizuoja tinklalapius ir siūlo būdus, kaip pagerinti jų našumą, remiantis taisyklėmis, skirtomis aukšto našumo tinklalapiams. Tai suteikia jums gerą idėją, ką reikia padaryti, kad svetainė būtų įkelta greičiau.

  (Būtinas Firebug)

  

• PageSpeed

  Panašus į „Yahoo! YSlow, „Google“ Puslapio greitis yra atviro kodo „Firebug“ priedas, skirtas įvertinti svetainės našumą ir jų tobulinimą. (Būtinas Firebug)

  

• „Pingdom“ įrankiai

  „Pingdom“ įrankiai visiškai užpildykite savo svetainę, įskaitant visus objektus (vaizdus, ​​CSS, „JavaScripts“, „RSS“, „Flash“ ir rėmelius / „iframes“) ir parodykite bendrą statistiką apie įkeltą puslapį, pvz., bendrą objektų skaičių, bendrą apkrovos laiką ir dydį, įskaitant visus objektų.

  

Rekomenduojami rodmenys:Čia rasite daugiau patarimų ir įrankių, kuriuos verta patikrinti.

• „Google“ žiniatinklio optimizavimo priemonė
• 15 Įrankiai, padedantys sukurti spartesnius tinklalapius
• 15+ patarimų, kaip pagreitinti jūsų svetainę ir optimizuoti savo kodą!