Lopullinen opas Web-optimointiin (vinkkejä ja parhaita käytäntöjä)

Web-optimointi on elintärkeä osa web-kehitystä ja ylläpitoa, mutta myös webmasterit usein huomaamatta. Ajatelkaa vain rahaa, jonka voit tallentaa, ja miten se voi auttaa lisäämään lukijaasi ja liikennettä, kun ne on tehty oikein.

Jos et ole tehnyt optimointia sivustoosi (tai blogiisi) toistaiseksi tai vain kiinnostunut siitä, miten se voi nopeuttaa sivustoasi, tutustu tähän optimointivihjeiden luetteloon.

Olemme jakaneet asioita kolmeen erilliseen osaan, jotta niitä voidaan lukea paremmin - vastaavasti palvelinpuolen optimointi, varojen optimointi (joka sisältää Web-komponentit, kuten CSS, Javascript, kuvat jne.) ja foorumi, mihin keskitymme WordPress-optimointi. Viimeisessä osassa me heitämme pari linkkiä, jotka olimme käyttökelpoisia. Täysi lista hyppyjen jälkeen.

Optimointi: Palvelinpuoli

1. Valitse kunnollinen Web-palvelin

   Web-hosting-tililläsi ei ole suoraa yhteyttä optimointiin, joita aiot tehdä, mutta olemme huomanneet, että valitsimme oikean web hosting-tilin niin tärkeäksi, että päätimme tuoda sen etukäteen. Hosting-tili on sivustosi / blogisi perusta, jossa sen turvallisuus, saatavuus (cPanel, FTP, SSH), palvelimen vakaus, hinnat ja asiakastuki tukevat kaikkia tärkeitä rooleja. Sinun täytyy varmistaa, että olet hyvissä käsissä.

   Suositeltava lukeminen: Web-palvelimen valitseminen mennessä wikiHow on hyvä artikkeli, joka antaa sinulle vaiheet ja vinkit, joita sinun pitäisi tietää ennen web hosting -tilin ostamista.

2. Isäntä-omaisuuserät erikseen

   Kun mainitsimme varoja, tarkoitimme web-komponentteja kuvien ja staattiset komentosarjat jotka eivät vaadi palvelinpuolen käsittelyä. Näihin kuuluvat kaikki web-grafiikat, kuvat, Javascripts, Cascading Style Sheets (CSS) jne. Isännöintiominaisuudet eivät ole välttämättömiä, mutta olemme nähneet valtavan tuloksen palvelimen vakauden kannalta tämän toteutuksen yhteydessä, kun blogissa oli liikennepiikki.

   Suositeltava lukeminen: Rinnakkaislatausten maksimointi Carpool-kaistalla.

3. Pakkaus GZipillä

   Lyhyesti sanottuna sisältö kulkee palvelimen puolelta asiakkaan puolelle (vicet versa) aina, kun HTTP-pyyntö on tehty. Pakkaaminen sisältöä lähetystä varten vähentää huomattavasti aikaa, joka tarvitaan kunkin pyynnön käsittelyyn.

   GZip on yksi parhaista tavoista tehdä tämä ja se vaihtelee käyttämiesi palvelinten tyypin mukaan. Esimerkiksi, Apache 1.3 käyttää mod_zip, Apache 2.x käyttää mod_deflate ja tässä miten teet sen nginx. Seuraavassa on joitakin todella hyviä artikkeleita, joiden avulla voit tutustua palvelinpuolen puristuksiin:

   • Nopeuta verkkosivustoa ottamalla käyttöön Apache-tiedostojen pakkaus
   • Pakkaa Web Output käyttämällä mod_gzip ja Apache
   • Miten optimoida sivustosi GZIP-pakkauksella
   • Palvelinpuolen pakkaus ASP: lle

4. Minimoi uudelleenohjaukset

   Verkkovastaavat tekevät URL-osoitteen uudelleen (olipa kyseessä sitten Javascript- tai META-uudelleenohjaus). Joskus on tarkoitus osoittaa käyttäjät vanhalta sivulta uuteen tai vain ohjata käyttäjiä oikeaan sivuun. Jokainen uudelleenohjaus luo ylimääräisen HTTP-pyynnön ja RTT: n (edestakainen aika). Mitä enemmän uudelleenohjausta sinulla on, sitä hitaampi käyttäjä pääsee kohdesivulle.

   Suositeltava lukeminen: Vältä uudelleenohjauksia Google Code tarjoaa hyvän yleiskuvan asiasta. Artikkelissa suositellaan myös joitakin käytännön keinoja, joilla minimoidaan uudelleenohjaus palvelutason nopeuttamiseksi.

5. Vähennä DNS-hakuja

   Mukaan Yahoo! Kehittäjän verkoston blogi, DNS (Domain Name System) -palvelun ratkaiseminen kestää noin 20-120 millisekuntia tietyn isäntänimen tai verkkotunnuksen IP-osoitteen ja selain ei voi tehdä mitään ennen kuin prosessi on suoritettu loppuun.

   kirjailija Steve Souders ehdotti, että näiden komponenttien jakaminen vähintään kahdella mutta enintään neljällä isäntänimellä vähentää DNS-hakuja ja mahdollistaa korkean tason rinnakkaiset lataukset. Lue lisää artikkelissa.

Optimointi: varat (CSS, Javascripts, Images)

1. Yhdistä useita Javascriptejä yhdeksi

   Ihmiset rakaz.nl jakaa, miten voit yhdistää useita Javascriptejä, kuten:

    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 

   Siirry yhteen tiedostoon muuttamalla URL-osoitteen:

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

   manipuloimalla .htaccessia ja käyttämällä PHP: tä. Klikkaa tästä lue lisää.

2. Pakkaa Javascript & CSS

   Pienennä on PHP5-sovellus, joka voi yhdistää useita CSS- ja Javascript-tiedostoja, pakata niiden sisällön (eli tarpeettomien välilyöntien / kommenttien poistamisen) ja palvella tuloksia HTTP-koodauksella (gzip / deflate) ja otsikoilla, jotka mahdollistavat optimaalisen asiakaskeskeisen välimuistin.

   

   Pakkaa ne verkossa!On myös joitakin web-palveluja, joiden avulla voit pakata Javascripts ja CSS-tiedostot manuaalisesti verkossa. Seuraavassa on muutamia, joita saamme tietää:

   • compressor.ebiene (javascript, CSS)
   • javascriptcompressor.com (javascript)
   • jscompress.com (javascript)
   • CleanCSS (CSS)
   • CSS-optimoija (CSS)

3. Mukauta otsikkokohtaa / välimuistia

   Luotto: httpwatch

   Käyttämällä räätälöityä päättymisotsikkoa Web-komponentit, kuten kuvat, staattiset tiedostot, CSS, Javascript ohittivat tarpeettomat HTTP-pyynnöt, kun sama käyttäjä lataa sivun toisen kerran. Se vähentää tarvittavaa kaistanleveyttä ja auttaa varmasti sivua palvelemaan nopeammin.

   Suositeltavat lukemat:

   • Yahoo! Kehittäjän verkko-blogi - Lisää vanhentuva otsikko
   • Kuinka lisätä hyviä kuluja otsikoihin Apache-kuviin 1.3
   • HTTP-välimuisti
   • Caching-opetusohjelma Web-tekijöille ja webmasterille

4. Kuormaton omaisuus

   Kun lataat latauksen, tarkoitamme Javascriptien, kuvien, CSS: n ja staattisten tiedostojen erottamista pääpalvelimelta, jossa sivusto on isännöity, ja sijoita ne toiseen palvelimeen tai luottaa muihin verkkopalveluihin. Olemme nähneet tässä merkittävää parannusta Hongkiat lataamalla varoja muihin saatavilla oleviin verkkopalveluihin, jolloin palvelin tekee pääasiassa PHP-käsittelyn. Seuraavassa on muutamia ehdotuksia online-palveluista lataamisen estämiseksi:

   • kuvat: Flickr, Smugmug, Maksetut isännät *
   • JavaScript: Google Ajax -kirjasto, Google App Engine, maksetut isännät *
   • Web-lomakes: WuFoo, FormStack
   • RSS: Google Feedburner
   • Kysely ja kyselyt: SurveyMonkey, PollDaddy

   * Maksetut isännät - Maksullisilla palveluilla on aina parempi luotettavuus ja vakaus. Jos sivustosi pyytää jatkuvasti omaisuutta, sinun on varmistettava, että ne ovat hyvissä käsissä. Suosittelemme Amazon S3: ta ja Cloud Frontia.

5. Web-kuvien käsittely

   Kuvat ovat tärkeä osa verkkosivustoa. Jos ne eivät kuitenkaan ole oikein optimoidut, ne voivat tulla taakaksi ja päätyä hyödyntämään arvaamattomasti paljon kaistanleveyksiä päivittäin. Tässä muutamia parhaita käytäntöjä kuvien optimoimiseksi:

   • Optimoi PNG-kuvatSmashing Magazinen ihmiset kuvaavat joitakin älykkäitä tekniikoita, jotka voivat auttaa sinua optimoimaan PNG-kuviasi.
   • Optimointi Webiin - Asiat, joita sinun tarvitsee tietää (tiedostomuodot) Lisätietoja Jpegistä, GIF: stä, PNG: stä ja kuvien tallentamisesta Webiin.
   • Älä skaalaa kuviaKäytetään aina asentamista leveys ja korkeus jokaiselle kuvalle. Älä myöskään vähennä kuvaa vain siksi, että tarvitset pienemmän version verkossa. Esimerkiksi: Älä pakota mittakaavassa 200 × 200 px: n kuvaa 50 × 50 pikseliin sivustoosi muuttamalla leveys ja korkeus. Hanki sen sijaan 50 × 50 px.

   Optimointi Web-palveluiden ja työkalujen avulla. Hyvä uutinen on, että sinun ei tarvitse olla Photoshop-asiantuntija kuvien optimoimiseksi. On paljon web-palveluja ja -työkaluja, jotka auttavat sinua tekemään työtä.

   • Smush.itLuultavasti yksi tehokkaimmista online-työkalu kuvien optimoimiseksi. Siinä on jopa WordPress-laajennus!
   • JPEG & PNG StripperWindows-työkalu tarpeettomien metatietojen (junk) poistamiseen / puhdistamiseen / poistamiseen JPG / JPEG / JFIF & PNG-tiedostoista.
   • Online-optimointilaiteVoit optimoida gifit, animoidut gifit, jpgs ja pngs, jotta ne ladataan mahdollisimman nopeasti sivustossasi, Dynamic Drive
   • SuperGIFTee kaikki GIF-kuvat ja animaatiot pienemmiksi.
   • Tässä on enemmän.

6. CSS: n käsittely

   Nykyaikaiset sivustot käyttävät CSS: ää tyylin perustana sekä ulkoasua ja tunnelmaa. Ei vain CSS antaa suurta joustavuutta muutoksiin, se on myös pienempi koodien kannalta. Kuitenkin, jos ne koodataan huonosti, se voi olla tulipalo. Seuraavassa on muutamia tarkistuslistoja tai pikemminkin oppaita, joiden avulla voit varmistaa, että CSS on optimoitu:

   • Elementtien lasten pitäminen linjassa poikien kanssaKuinka pitää merkintisi puhtaana CSS Selectorsilla.
   • Pidä CSS lyhytKun ne antavat saman tyylin, koodit ovat paremmin lyhyempiä. Tässä on a CSS Shorthand -opas tarvitset todennäköisesti.
   • Käytä CSS Sprite -ohjelmaaCSS Sprite -tekniikka vähentää HTTP-pyyntöä joka kerta, kun sivu latautuu yhdistämällä useita (tai kaikkia) kuvia yhteen kuva-tiedostoon ja ohjaamalla sen lähdettä CSS: llä tausta-asemassa ominaisuus. Seuraavassa on muutamia hyödyllisiä oppaita ja tekniikoita CSS Spriteen luomiseksi:
     • Online CSS Sprite -generaattori
     • Paras online- ja offline-CSS Sprite -generaattori
   • Käyttämällä jokaista ilmoitusta vain kerranKun halutaan optimoida CSS-tiedostosi, yksi tehokkaimmista toimenpiteistä on käyttää jokaista ilmoitusta vain kerran.
   • Vähennä CSS-tiedostojen määrääSyy on yksinkertainen, sitä enemmän CSS-tiedostoja sinulla on enemmän HTTP-pyyntöä, jonka sen täytyy tehdä, kun verkkosivua pyydetään. Esimerkiksi useiden CSS-tiedostojen sijasta:

     Voit yhdistää ne yhdeksi CSS: ksi:

   Suositeltavat lukemat:

   • Hyödyllisiä työkaluja CSS-tiedoston tarkistamiseen, puhdistamiseen ja optimointiinJoitakin hyödyllisiä työkaluja, joita voit käyttää CSS-koodin optimoimiseksi, vaikka sinulla ei olisi täysin tietoa CSS-koodauksesta.
   • 7 Puhtaan ja optimoidun CSS-koodin periaatteetOptimointi ei ole pelkästään tiedostokoon minimoiminen - se on myös järjestäytymisvapautta, häiriötöntä ja tehokasta.
   • Parhaat käytännöt CSS: n optimoimiseksiHarkitse tätä artikkelia pikemminkin akateemisen harjoituksen kuin todellisen elämän optimointivihjeiden sijaan.

WordPressin optimointi

Ajoittain valvomme, vertaamme ja analysoimme WordPress-blogin suorituskykyä. Jos sivusto on hidas, meidän on tiedettävä, miksi. Seuraavassa on muutamia perusmuutoksia, joita olemme tehneet, ja ajattelimme lisäävän merkittävästi WordPress-blogisi nopeutta.

1. Välimuisti Blogisi

   WP-Cache on erittäin tehokas WordPress-sivun välimuistijärjestelmä, jonka avulla sivusto on paljon nopeampi ja reagoivampi. Suosittelemme myös WP Super Cache joka parantaa aiempaa mainittua laajennusta ja tekee myös hyvää työtä.

2. Poista käytöstä ja poista käyttämättömät laajennukset

   Kun huomaat, että blogisi latautuu todella hitaasti, katso, onko sinulla asennettu paljon laajennuksia. He saattavat olla syyllisiä.

3. Poista tarpeettomat PHP-tunnisteet

   Jos tarkastelet teeman lähdekoodeja, löydät paljon tageja:

   Ne voidaan korvata melko paljon tekstisisällöllä, joka ei aiheuta kuormitusta palvelimelle. Tarkista Michael Martinn 13 WordPress Bloista poistettavat tunnisteetg

Suositeltavat lukemat:

• 3 Helpoin tapa nopeuttaa WordPressiaJohn Pozadzides jakaa, miten blogi purjehtii sujuvasti Digg-liikennepiikin kautta.
• 13 Suuri WordPress Speed ​​Tips & Tricks MAX-suorituskyvylle Seuraavassa on muutamia asioita, joita voit kokeilla, jos havaitset, että WordPress-sivustosi ei toimi niin hyvin kuin se johtuu suuresta liikenteestä tai piilotetuista ongelmista, joita et tiedä.
• 40 WordPress-optimointivihjeitäOptimointivihjeet dioissa. 40 vinkkiä 40 minuutissa.

Viimeinen mutta ei vähäisin…

Seuraavassa on joitakin hyödyllisiä verkkopalveluja ja työkaluja, jotka antavat sinulle laajemman näkökulman ja paremman analyysin, joka auttaa sinua web-optimoinnissa.

• Yahoo! YSlow

  YSlow analysoi verkkosivuja ja ehdottaa tapoja parantaa niiden suorituskykyä korkean suorituskyvyn Web-sivujen sääntöjen perusteella. Se antaa sinulle hyvän käsityksen siitä, mitä on tehtävä, jotta sivusto ladataan nopeammin.

  (Firebug vaaditaan)

  

• Latausnopeus

  Samankaltainen Yahoo! YSlow, Google Sivunopeus on avoimen lähdekoodin Firebug-lisäosa, jolla voidaan arvioida verkkosivujen suorituskykyä ja miten niitä voidaan parantaa. (Firebug vaaditaan)

  

• Pingdom-työkalut

  Pingdom-työkalut ota täysi lataus sivustoosi mukaan lukien kaikki kohteet (kuvat, CSS, JavaScripts, RSS, Flash ja kehykset / iframes) ja näyttää yleiset tilastot ladatusta sivusta, kuten objektien kokonaismäärä, kokonaiskuormitusaika ja koko mukaan lukien kaikki esineet.

  

Suositeltavat lukemat:Tässä on enemmän vinkkejä ja työkaluja, jotka kannattaa tarkistaa.

• Google Web Optimizer
• 15 Työkalut, joiden avulla voit kehittää nopeampia verkkosivuja
• 15+ vinkkejä Web-sivuston nopeuttamiseen ja koodin optimointiin!