Végső útmutató a webes optimalizáláshoz (tippek és bevált gyakorlatok)

Web-optimalizálás A webes fejlesztés és karbantartás elengedhetetlen része, de a webmesterek gyakran figyelmen kívül hagyják azt is. Gondolj csak arra a pénzre, amit el tudsz menteni, és hogyan segíthet növelni az olvasók és a forgalom helyességét, ha azok megfelelően vannak készítve.

Ha eddig még nem végeztek optimalizálást webhelyére (vagy blogjára), vagy csak kíváncsi, hogyan segíthet felgyorsítani webhelyét, kérjük, nézd meg ezt az optimalizálási tippeket, amelyeket összeállítottunk.

A jobb olvashatóság érdekében az egyes dolgokat három külön részre osztottuk fel szerveroldali optimalizálás, eszközök optimalizálása (amely tartalmazza a webes összetevőket, mint például a CSS, a Javascript, a képek stb.) és emelvény, ahol összpontosítunk WordPress optimalizálás. Az utolsó szakaszban néhány linket dobunk hasznosnak. Teljes lista ugrás után.

Optimalizálás: kiszolgálóoldali

1. Válasszon egy tisztességes Web Host-ot

   Az Ön web hosting-számláján nincs közvetlen kapcsolat az elvégzendő optimalizálással, de úgy gondoltuk, hogy a megfelelő web hosting-fiókot úgy választottuk ki, hogy fontosnak tartottuk, hogy először felhívjuk a figyelmet. A tárhely számlája a webhelyének / blogjának alapja, ahol a biztonság, a hozzáférhetőség (cPanel, FTP, SSH), a szerver stabilitása, az árak és az ügyfélszolgálatok fontos szerepet játszanak. Biztosítani kell, hogy jó kezekben vagy.

   Ajánlott olvasás: Hogyan válasszunk egy Web Host-et által wikiHow egy nagyszerű cikk, amely lépéseket és tippeket ad Önnek, mielőtt bármilyen web hosting-fiókot vásárolna.

2. A fogadó eszközök külön-külön

   Amikor megemlítjük az eszközöket, olyan webkomponenseket értünk, mint a képek és statikus szkriptek amelyek nem igényelnek szerveroldali feldolgozást. Ezek magukban foglalják a webes grafikákat, a képeket, a Javascript-eket, a Cascading Style Sheets (CSS) -et stb..

   Ajánlott olvasás: A párhuzamos letöltések maximalizálása a Carpool Lane-ben.

3. Kompresszió a GZip-rel

   Röviden, a tartalom a szerver oldalról az ügyféloldali oldalra utazik (vicet versa), amikor egy HTTP kérés történik. A küldendő tartalom tömörítése jelentősen csökkenti az egyes kérések feldolgozásához szükséges időt.

   GZip ez az egyik legjobb módja ennek, és a használt kiszolgálók típusától függően különböző. Például, Apache 1.3 mod_zip használ, Apache 2.x mod_deflate-t használ, és itt van, hogyan csinálod nginx. Íme néhány nagyon jó cikk, hogy megismerkedjen a szerver oldali tömörítéssel:

   • Gyorsítson egy webhelyet az Apache fájl tömörítésének engedélyezésével
   • A webes kimenet tömörítése mod_gzip és Apache használatával
   • Hogyan optimalizálhatja webhelyét GZIP tömörítéssel
   • Szerveroldali tömörítés az ASP-hez

4. Minimalizálja az átirányításokat

   A webmesterek mindig URL-címet irányítanak (akár a Javascript, akár a META átirányítások). Néha cél az, hogy a felhasználókat egy régi oldalról újra mutassák, vagy csak a megfelelő oldalra irányítsák a felhasználókat. Minden átirányítás egy további HTTP kérést és RTT-t hoz létre (oda-vissza idő). Minél több átirányítás van, a lassabb felhasználó eljut a céloldalra.

   Ajánlott olvasás: Kerülje az átirányításokat A Google kódja jó áttekintést ad az ügyről. A cikk néhány gyakorlati módszert is javasol az átirányítás minimalizálására a kiszolgálási sebesség növelése érdekében.

5. A DNS-keresések csökkentése

   Alapján Jehu! Fejlesztői hálózati blog, körülbelül 20-120 milliszekundumot vesz igénybe a DNS (Domain Name System) számára, hogy egy adott gazdanév vagy tartománynév IP-címét megoldja, és a böngésző nem tehet semmit, amíg a folyamat megfelelően befejeződik.

   Szerző Steve Souders azt javasolta, hogy ezeket az összetevőket legalább két, de legfeljebb négy hostnévben felosztják a DNS-lekérdezések csökkentésével és nagyfokú párhuzamos letöltésekkel. Olvass tovább a cikken.

Optimalizálás: az eszközök (CSS, Javascript, Images)

1. Több Javascript egyesítése egybe

   Emberek rakaz.nl megosztja, hogyan kombinálhat több olyan JavaScript-kódot, mint:

    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 

   Egy URL-be történő áthelyezés az URL-cím megváltoztatásával:

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

   a .htaccess használatával és a PHP használatával. Kattints ide többet olvasni.

2. A Javascript & CSS tömörítése

   kisebbít egy PHP5 alkalmazás, amely több CSS és Javascript fájlt kombinálhat, tartalmát tömörítheti (azaz szükségtelen terek / megjegyzések eltávolítása), és az eredményeket HTTP kódolással (gzip / deflate) és fejlécekkel szolgálhatja, amelyek lehetővé teszik az optimális ügyféloldali gyorsítótárat.

   

   Tömörítse őket online!Vannak olyan webszolgáltatások is, amelyek lehetővé teszik, hogy manuálisan tömörítse a Javascriptet és a CSS fájlokat online. Íme néhány, amit tudunk:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS-optimalizáló (CSS)

3. A fejléc lejáratának / gyorsítótárának testreszabása

   Hitel: httpwatch

   Egy testreszabott lejárati fejléc használatával a webes összetevők, mint például a képek, a statikus fájlok, a CSS, a Javascript kihagyta a felesleges HTTP-kérést, ha ugyanaz a felhasználó újratölti az oldalt. Ez csökkenti a szükséges sávszélességet és határozottan segít az oldal gyorsabb kiszolgálásában.

   Ajánlott értékek:

   • Jehu! Fejlesztői hálózati blog - Add egy lejáró fejlécet
   • Jó lejárati fejlécek hozzáadása az Apache képekhez 1.3
   • HTTP gyorsítótár
   • Gyorsítótárazási útmutató a webes szerzők és webmesterek számára

4. Terhelésmentes eszközök

   A betöltés után a Javascriptek, a képek, a CSS és a statikus fájlok elválasztását jelenti a főszerverről, ahol a webhelyet tárolták, és helyezzük el egy másik kiszolgálóra, vagy más internetes szolgáltatásokra támaszkodnak. Jelentős javulást láttunk itt Hongkiat az eszközöket a rendelkezésre álló egyéb webszolgáltatások betöltésével, a kiszolgálót főként a PHP feldolgozására használva. Íme néhány javaslat az online szolgáltatásokról a betöltésre:

   • képek: Flickr, Smugmug, Fizetett házigazdák *
   • JavaScriptek: Google Ajax Könyvtár, Google App Engine, Fizetett tárhely *
   • Webes űrlaps: WuFoo, FormStack
   • RSS: Google Feedburner
   • Felmérés és szavazás: SurveyMonkey, PollDaddy

   * Fizetett házigazdák - A fizetett szolgáltatások mindig nagyobb megbízhatósággal és stabilitással rendelkeznek. Ha webhelye folyamatosan kéri az eszközöket, akkor meg kell győződnie arról, hogy jó kezekben vannak. Javasoljuk az Amazon S3 és a Cloud Front használatát.

5. Webes képek kezelése

   A képek fontos részét képezik webhelyének. Azonban ha nem optimálisan optimalizálódnak, terhekké válhatnak, és nap mint nap kiszámíthatatlanul nagy mennyiségű sávszélességet használnak fel. Itt van néhány legjobb gyakorlatok a képek optimalizálásához:

   • Optimalizálja a PNG képeketA Smashing Magazine népe néhány okos technikát ír le, amelyek segíthetnek a PNG-képek optimalizálásában.
   • Webes optimalizálás - Amit tudnia kell (a formátumok) További információ a JPEG, GIF, PNG és arról, hogyan kell menteni a képeket a weben.
   • Ne méretezzen képeketMindig gyakorolja a szélesség és magasság minden képhez. Nem is méretezheti le a képet csak azért, mert szüksége van egy kisebb verzióra az interneten. Például: Ne kényszerítse a 200 × 200 px-es képet 50 × 50 px-re a webhelyére úgy, hogy megváltoztatja a szélesség és magasság. Helyezzen 50 × 50 px-t.

   Optimalizálás webszolgáltatásokkal és eszközökkel. Jó hír, hogy nem kell Photoshop szakértőnek lennie a képek optimalizálásához. Rengeteg internetes szolgáltatás és eszköz segít a munkában.

   • Smush.itValószínűleg az egyik leghatékonyabb online eszköz a képek optimalizálására. Van még egy WordPress plugin is!
   • JPEG & PNG StripperWindows eszköz JPG / JPEG / JFIF és PNG fájlokból a felesleges metaadatok (szemét) eltávolításához / eltávolításához / eltávolításához.
   • Online képoptimalizálóLehetővé teszi a gif-ek, az animált gif-ek, a jpgs-ek és a pngs-ek könnyű optimalizálását, így a Dynamic Drive segítségével a lehető leggyorsabban betöltheti webhelyét
   • SuperGIFA GIF-képek és animációk könnyedén csökkenthetők.
   • Itt van még.

6. CSS kezelése

   A modern weboldalak a CSS-t használják a stílus alapjaként, valamint a megjelenésnek és érzésnek. Nemcsak a CSS nyújt nagy rugalmasságot a változásokhoz, hanem a szükséges kódok tekintetében is. Azonban, ha rosszul kódolták, akkor ez egy visszacsapás lehet. Íme néhány ellenőrző lista, vagy inkább útmutatók ahhoz, hogy a CSS megfelelően optimalizálva legyen:

   • Elemek gyerekeinek tartása az utódokkalHogyan tartsa tisztán a jelölést a CSS Selectors segítségével.
   • Tartsa rövidre a CSS-tHa ugyanezt a stílust adják, a kódok jobbak a rövidebbek. Itt van egy CSS rövidített útmutató valószínűleg szüksége lesz rá.
   • Használja a CSS Sprite programotA CSS Sprite technika csökkenti a HTTP-kérelmet minden egyes alkalommal, amikor egy oldal betöltődik, több (vagy mindegyik) képet egyesítve egyetlen képfájlban, és vezérli a kimenetet a CSS-rel background-position tulajdonság. Íme néhány hasznos útmutató és technikák a CSS Sprites létrehozásához:
     • Online CSS Sprite generátor
     • A legjobb online és offline CSS Sprites generátor
   • Minden nyilatkozat használata egyszerA CSS fájljainak optimalizálásakor az egyik leghatékonyabb intézkedés, hogy minden nyilatkozatot csak egyszer használjon.
   • Csökkentse a CSS fájlok mennyiségétAz ok egyszerű, annál több CSS-fájl van, annál több HTTP-kérést kell készítenie, amikor egy weblapot kéri. Például több CSS-fájl, mint például a következő:

     Kombinálhatja őket egyetlen CSS-be:

   Ajánlott értékek:

   • Hasznos eszközök a CSS fájl ellenőrzéséhez, tisztításához és optimalizálásáhozNéhány hasznos eszköz, amellyel optimalizálhatja CSS kódját, még akkor is, ha nincs teljesen ismerete a CSS kódolásról.
   • 7 A tiszta és optimalizált CSS kód alapelveiAz optimalizálás nem csak a fájlméret minimalizálása, hanem a szervezés, a rendetlenség és a hatékony működés is.
   • A legjobb gyakorlat a CSS optimalizálásáhozTekintsük ezt a cikket inkább egy tudományos gyakorlatnak, mint a valós élet optimalizálási tippeknek.

A WordPress optimalizálása

Időnként figyelemmel kísérjük, összehasonlítjuk és elemezzük WordPress blogunk teljesítményét. Ha az oldal lassú, tudnunk kell, miért. Íme néhány alapvető változtatás, amit megtettünk, és rájöttünk, hogy jelentősen növeli a WordPress blogod sebességét.

1. Cache Your Worpress Blog

   WP-Cache egy rendkívül hatékony WordPress oldalgyorsító rendszer, amely sokkal gyorsabban és rugalmasabban teszi lehetővé a webhelyet. Azt is javasoljuk WP Super gyorsítótár ami az előző említett bővítményből is javul, és nagyszerű munkát végez.

2. Deaktiválja és törölje a nem használt bővítményeket

   Ha észreveszed, hogy a blogod nagyon lassan töltődik be, nézd meg, hogy van-e telepítve sok plugin. Lehet, hogy a bűnös.

3. Távolítsa el a felesleges PHP-címkéket

   Ha megvizsgálja a téma forráskódjait, sok ilyen címkét talál:

   Ezeket nagyjából helyettesítheti olyan szöveges tartalom, amely nem okoz terhelést a szerverre. Nézze meg Michael Martin„s 13 Címkék a WordPress Blo-ből való törléshezg

Ajánlott olvasmányok:

• 3 A WordPress felgyorsításának legegyszerűbb módjaiJohn Pozadzides megosztja, hogy a blogja zökkenőmentesen halad keresztül a Digg forgalomcsúcson.
• 13 Nagy WordPress sebesség tippek és trükkök a MAX teljesítményhez Néhány dolog, amit meg kell próbálni, ha úgy találja, hogy a WordPress webhelye nem teljesít, mint amilyen a nagy forgalmú vagy rejtett problémák miatt nem ismert.
• 40 WordPress optimalizálási tippOptimalizálási tippek a diákokban. 40 tipp 40 perc alatt.

Végül, de nem utolsó sorban…

Íme néhány hasznos webszolgáltatás és eszköz, amely szélesebb perspektívát és jobb elemzést biztosít a webes optimalizálásban.

• Jehu! YSlow

  YSlow elemzi a weboldalakat, és javasolja, hogyan javíthatja teljesítményüket a nagy teljesítményű weboldalakra vonatkozó szabályok alapján. Jó ötlet, hogy mit kell tennie annak érdekében, hogy a webhely gyorsabban töltse be.

  (Firebug szükséges)

  

• Weboldalsebesség

  Hasonló Jehu! YSlow, Google Oldalsebesség egy nyílt forráskódú Firebug kiegészítő, amely a webhely előadásainak értékelésére és javítására szolgál. (Firebug szükséges)

  

• Pingdom eszközök

  Pingdom eszközök készítsen teljes terhelést a webhelyéről, beleértve az összes objektumot (képek, CSS, JavaScripts, RSS, Flash és keretek / iframes), és megmutatja a betöltött oldal általános statisztikáit, például az összes objektumszámot, teljes terhelési időt és méretet, beleértve az összes tárgyak.

  

Ajánlott értékek:További tippek és eszközök érdemes megnézni.

• Google Web Optimizer
• 15 Gyorsabb weboldalak fejlesztését segítő eszközök
• 15+ tipp a webhely felgyorsításához és a kód optimalizálásához!