Ultimate Guide to Web Optimization (nasveti in najboljše prakse)

Spletna optimizacija je pomemben del razvoja in vzdrževanja spletnih strani, vendar je tudi nekaj, kar webmastere pogosto spregledajo. Pomislite samo na denar, ki ga lahko prihranite, in kako lahko to pomaga povečati število bralcev in prometa, ko so pravilno opravljeni.

Če za svoje spletno mesto (ali spletni dnevnik) niste do sedaj opravili nobene optimizacije ali ste radovedni, kako lahko pospeši vaše spletno mesto, si oglejte ta seznam nasvetov za optimizacijo, ki smo jih sestavili skupaj..

Za boljšo berljivost smo stvari razdelili na 3 ločene odseke optimizacija na strani strežnika, optimizacija sredstev (ki vključuje spletne komponente, kot so CSS, Javascript, slike itd.) in platformo, kjer se bomo osredotočili WordPress optimizacija. Na zadnjem odseku smo vnesli nekaj povezav, ki smo jih uporabili. Popoln seznam po skoku.

Optimizacija: na strani strežnika

1. Izberite dostojno spletno gostiteljico

   Vaš račun za spletno gostovanje nima neposredne povezave z optimizacijami, ki jih boste izvedli, vendar smo ugotovili, da je izbira pravega računa za spletno gostovanje tako pomembna, da smo se najprej odločili, da vam jo predstavimo. Gostovanje račun je temelj vaše spletne strani / blog, kjer je varnost, dostopnost (cPanel, FTP, SSH), stabilnost strežnika, cene in podpore strankam igrajo pomembno vlogo. Poskrbeti morate, da ste v dobrih rokah.

   Priporočena branja: Kako izbrati spletni strežnik jo wikiHow je odličen članek, ki vam daje korake in nasvete, ki jih morate vedeti, preden kupite kateri koli web hosting račun.

2. Lastna sredstva ločeno

   Ko omenjamo sredstva, smo mislili na spletne komponente slik in statični skripti ki ne zahtevajo obdelave na strani strežnika. To vključuje vse spletne grafike, slike, Javascripts, Cascading Style Sheets (CSS) itd. Lastnosti za gostovanje ločeno ni nujno, vendar smo pri tej izvedbi videli izjemen rezultat v smislu stabilnosti strežnika, ko je bil na spletnem dnevniku prometni konic.

   Priporočeno branje: Povečanje vzporednih prenosov v voznem pasu Carpool.

3. Stiskanje z GZip

   Na kratko, vsebina potuje od strežniške strani do odjemalske strani (vicet versa), kadar se zahteva HTTP. Stiskanje vsebine za pošiljanje močno skrajša čas, potreben za obdelavo vsake zahteve.

   GZip je eden najboljših načinov za to in je različen glede na vrsto strežnikov, ki jih uporabljate. Na primer, Apache 1.3 uporablja mod_zip, Apache 2.x uporablja mod_deflate in tukaj je, kako to naredite Nginx. Tukaj je nekaj zelo dobrih člankov, ki vas seznanijo s stiskanjem na strani strežnika:

   • Pospešite spletno stran, tako da omogočite Apacheovo stiskanje
   • Stiskanje spletnega izhoda z uporabo mod_gzip in Apache
   • Kako optimizirati vaše spletno mesto z GZIP stiskanjem
   • Stiskanje na strani strežnika za ASP

4. Zmanjšaj preusmeritve

   Webmasters URL redirect (ali je Javascript ali META preusmeritve) ves čas. Včasih je njen namen usmeriti uporabnike s stare strani na novo ali samo usmeriti uporabnike na pravilno stran. Vsaka preusmeritev ustvari dodatno zahtevo HTTP in RTT (čas povratnega klica). Več kot preusmeritev, počasnejši uporabnik bo prišel na ciljno stran.

   Priporočeno branje: Izogibajte se preusmeritvam Google Code vam omogoča dober pregled nad zadevo. Članek priporoča tudi nekaj praktičnih načinov za zmanjšanje preusmeritve, da se poveča hitrost servisa.

5. Zmanjšanje iskanja DNS

   Po navedbah Yahoo! Spletni dnevnik razvijalca, za DNS (Domain Name System) potrebujete približno 20-120 milisekund za razrešitev IP-naslova za dano ime gostitelja ali domene in brskalnik ne more storiti ničesar, dokler postopek ni pravilno dokončan.

   Avtor Steve Souders Predlagali smo, da razdelitev teh komponent na vsaj dva, vendar ne več kot štiri imena gostiteljev zmanjša iskanje DNS in omogoči vzporedne prenose z visoko stopnjo. Preberi več o članku.

Optimizacija: Sredstva (CSS, Javascripts, Images)

1. Združite več Javascripts v eno

   Ljudje pri rakaz.nl si deli, kako lahko kombinirate več Javascriptov:

    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 

   V eno datoteko spremenite URL v:

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

   z manipuliranjem .htaccess in uporabo PHP. Klikni tukaj preberite več.

2. Stisnite Javascript in CSS

   Zmanjšaj je aplikacija PHP5, ki lahko združi več datotek CSS in Javascript, stisne njihovo vsebino (tj. odstrani nepotrebne presledke / komentarje) in prikaže rezultate s kodiranjem HTTP (gzip / deflate) in glavami, ki omogočajo optimalno predpomnjenje odjemalca.

   

   Stisnite jih na spletu!Obstajajo tudi nekatere spletne storitve, ki vam omogočajo, da ročno stisnete datoteke Javascript in CSS na spletu. Tukaj je nekaj, kar vemo:

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

3. Prilagodite iztek zagona / predpomnjenje

   Zasluge: httpwatch

   Z uporabo prilagojene Expiry glave, so vaše spletne komponente, kot so slike, statične datoteke, CSS, Javascript, preskočile nepotrebno HTTP zahtevo, ko isti uporabnik ponovno naloži stran drugič. Zmanjšuje potrebno pasovno širino in zagotovo pomaga pri hitrejšem prikazovanju strani.

   Priporočena branja:

   • Yahoo! Spletni dnevnik razvijalca - dodajte glavo za iztek
   • Kako dodati dobre iztekle glave slik v Apache 1.3
   • Predpomnjenje HTTP
   • Caching Tutorial za spletne avtorje in spletne skrbnike

4. Razbremenitev Sredstva

   Z raztovarjanjem mislimo na ločevanje Javascriptov, slik, CSS in statičnih datotek od glavnega strežnika, kjer je gostovanje spletnega mesta, in jih postavite na drug strežnik ali pa se zanašate na druge spletne storitve. Tu smo opazili znatno izboljšanje v letu Hongkiat z raztovarjanjem sredstev na druge spletne storitve, s čimer strežnik ostane v glavnem za obdelavo PHP. Tukaj je nekaj predlogov za spletne storitve za izklop:

   • Slike: Flickr, Smugmug, Plačano gostovanje *
   • Javascript: Google Ajax Knjižnica, Google App Engine, Plačano gostovanje *
   • Spletni obrazecs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Ankete in ankete: SurveyMonkey, PollDaddy

   * Plačano gostovanje - Plačane storitve imajo vedno večjo zanesljivost in stabilnost. Če vaše spletno mesto nenehno zahteva sredstva, se morate prepričati, da so v dobrih rokah. Priporočamo Amazon S3 in Cloud Front.

5. Ravnanje s spletnimi slikami

   Slike so pomemben del vaše spletne strani. Če pa niso ustrezno optimizirane, lahko postanejo breme in na koncu uporabljajo nepredvidljivo veliko pasovno širino. Tukaj je nekaj najboljše prakse za optimizacijo slik:

   • Optimizirajte slike PNGLjudje v Smashing Magazine opisujejo nekatere pametne tehnike, ki vam lahko pomagajo optimizirati vaše slike PNG.
   • Optimizacija za splet - Stvari, ki jih morate vedeti (oblike) Več o Jpeg, GIF, PNG in kako naj shranite slike za splet.
   • Ne prilagajajte slikVedno vadite vstavljanje premer in višine za vsako sliko. Prav tako ne zmanjšujte slike samo zato, ker potrebujete manjšo različico na spletu. Na primer: Ne spreminjajte slike 200 × 200 px na 50 × 50 px za vašo spletno stran s spreminjanjem premer in višine. Namesto tega dobite 50 × 50 px.

   Optimizacija s spletnimi storitvami in orodji. Dobra novica je, da vam ni treba biti Photoshopov strokovnjak za optimizacijo slik. Obstaja veliko spletnih storitev in orodij, ki vam pomagajo pri opravljanju dela.

   • Smush.itVerjetno ena izmed najbolj učinkovitih spletnih orodij za optimizacijo slik. Za to obstaja celo WordPress vtičnik!
   • JPEG & PNG StripperOrodje Windows za odstranjevanje / čiščenje / odstranjevanje nepotrebnih metapodatkov (junk) iz datotek JPG / JPEG / JFIF in PNG.
   • Online Image OptimizerOmogoča vam, da zlahka optimizirate svoje gif, animirane gif, jpgs in pngs, tako da se naložijo čim hitreje na vašo spletno stran z dinamičnim pogonom
   • SuperGIFPrizadevajte si, da bi bile vse slike in animacije GIF manjše.
   • Tukaj je več.

6. Ravnanje s CSS

   Sodobne spletne strani uporabljajo CSS kot temelj za slog, kot tudi videz in občutek. Ne samo, da CSS prinaša veliko prilagodljivosti spremembam, ampak je tudi manj potreben. Vendar, če so slabo kodirani, bi to lahko bilo v ozadju. Tukaj je nekaj kontrolnih seznamov ali vodnikov, s katerimi preverite, ali so vaši CSS pravilno optimizirani:

   • Hranjenje otrok vaših elementov v skladu s potomstvomKako obdržati oznako čistim s selektorji CSS.
   • CSS naj bo kratekKo dajejo isti slog, so kode boljše, krajše so. Tukaj je a Kratica za CSS boste verjetno potrebovali.
   • Uporabite CSS SpriteTehnika CSS Sprite zmanjša HTTP zahtevo ob vsakem nalaganju strani z združevanjem več (ali vseh) slik skupaj v eno slikovno datoteko in nadzor nad njegovim izhodom s CSS položaj ozadja atribut. Tukaj je nekaj uporabnih navodil in tehnik za ustvarjanje CSS-okusov:
     • Online CSS Sprite Generator
     • Best Online in Offline CSS Sprites Generator
   • Vsako izjavo uporabite samo enkratČe želite optimizirati datoteke CSS, je eden od najmočnejših ukrepov, ki jih lahko uporabite, da uporabite vsako izjavo samo enkrat.
   • Zmanjšajte količino datotek CSSRazlog je preprost, več datotek CSS imate več zahtev HTTP, ki jih boste morali narediti, ko boste zahtevali spletno stran. Na primer, namesto več datotek CSS, kot so naslednje:

     Lahko jih združite v en sam CSS:

   Priporočena branja:

   • Koristna orodja za preverjanje, čiščenje in optimiziranje datoteke CSSNekatera uporabna orodja, ki jih lahko uporabite za optimiziranje vaše kode CSS, tudi če niste popolnoma seznanjeni s kodiranjem CSS.
   • 7 Načela čiste in optimizirane kode CSSOptimizacija ni samo zmanjšanje velikosti datoteke - gre tudi za organiziranost, neomejenost in učinkovitost.
   • Najboljše prakse za optimizacijo CSSRazmislite o tem članku bolj kot o akademskem opravilu namesto nasvetih za optimizacijo.

Optimizacija za WordPress

Občasno spremljamo, merimo in analiziramo uspešnost našega WordPress bloga. Če spletno mesto teče počasi, moramo vedeti zakaj. Tukaj je nekaj osnovnih sprememb, ki smo jih naredili, in ugotovili, da bo bistveno povečala hitrost vašega WordPress bloga.

1. Cache Your Worpress Blog

   WP-predpomnilnik je izjemno učinkovit WordPress caching sistem, ki vam omogoča hitrejše in hitrejše odzivanje. Priporočamo tudi WP Super Cache ki izboljšuje od prej omenjenega plugin in preveč dela veliko.

2. Deaktivirajte in izbrišite neuporabljene vtičnike

   Ko opazite, da se vaš blog res počasi nalaga, preverite, ali imate nameščenih veliko vtičnikov. Morda so krivec.

3. Odstranite nepotrebne oznake PHP

   Če pogledate v izvorne kode svoje teme, boste našli veliko oznak, kot so te:

   Lahko so precej nadomeščeni z besedilno vsebino, ki ne povzroča obremenitve strežnika. Preveri Michael Martin's 13 Oznake za brisanje iz vašega WordPress Blog

Priporočena branja:

• 3 najlažji način za pospešitev WordPressJohn Pozadzides razkrije, kako njegov blog gladko pluje skozi prometni križ Digg.
• 13 Velika WordPress Hitrost Nasveti in triki za MAX Performance Nekaj ​​stvari, ki jih lahko poskusite, če ugotovite, da vaše spletno mesto WordPress ne deluje tako dobro kot zaradi velikega prometa ali skritih težav, o katerih ne veste.
• 40 Nasveti za optimizacijo WordPressNasveti za optimizacijo v diapozitivih. 40 konic v 40 minutah.

In nenazadnje…

Tukaj je nekaj koristnih spletnih storitev in orodij, ki vam omogočajo širšo perspektivo in boljšo analizo, ki vam pomaga pri optimizaciji spleta.

• Yahoo! YSlow

  YSlow analizira spletne strani in predlaga načine za izboljšanje njihove uspešnosti na podlagi niza pravil za visoko uspešne spletne strani. To vam daje dobro idejo, kaj je treba storiti, da bi se spletna stran hitreje nalagala.

  (Potreben je Firebug)

  

• PageSpeed

  Podoben Yahoo! YSlow, Google Hitrost strani je odprtokodni Firebug dodatek za ocenjevanje uspešnosti spletnih strani in kako jih izboljšati. (Potreben je Firebug)

  

• Orodja za Pingdom

  Orodja za Pingdom naredite popolno obremenitev spletnega mesta, vključno z vsemi objekti (slike, CSS, JavaScript, RSS, Flash in okviri / okvirji) in prikažejo splošne statistične podatke o naloženi strani, kot je skupno število objektov, skupni čas nalaganja in velikost, vključno z vsem predmetov.

  

Priporočena branja:Tukaj je več nasvetov in orodij, ki jih je vredno preveriti.

• Google Web Optimizer
• 15 Orodja za pomoč pri razvoju hitrejših spletnih strani
• 15+ nasvetov za pospešitev vaše spletne strani in optimizacijo kode!