Optimalizace pro webové optimalizace (tipy a osvědčené postupy)

Optimalizace webu je důležitou součástí vývoje a údržby webu, ale také něco, co webmasteři často přehlížejí. Jen pomyslete na peníze, které můžete ušetřit, a na to, jak může potenciálně pomoci zvýšit vaše čtenáře a provoz, když jsou řádně provedeny.

Pokud jste doposud neprovedli žádnou optimalizaci svých webových stránek (nebo blogu) nebo jste jen zvědaví, jak to může pomoci urychlit vaše stránky, podívejte se na tento seznam tipů optimalizace, které jsme vytvořili..

Pro lepší čitelnost jsme rozdělili věci do tří samostatných sekcí - resp optimalizace na straně serveru, optimalizace aktiv (který zahrnuje webové komponenty jako CSS, Javascript, obrázky atd.) a plošina, kde se zaměříme Optimalizace WordPressu. V poslední části jsme vrhli pár odkazů, které jsme považovali za užitečné. Plný seznam po skoku.

Optimalizace: Server-side

1. Zvolte slušný webový host

   Váš web hosting účet nemá žádný přímý vztah s optimalizací se chystáte provést, ale my jsme si vybrali správný web hosting účet tak důležité, že jsme se rozhodli, aby to na vaši pozornost první. Hostingový účet je základem vašich webových stránek / blogu, kde důležitou roli hrají bezpečnost, dostupnost (cPanel, FTP, SSH), stabilita serveru, ceny a podpora zákazníků. Musíte se ujistit, že jste v dobrých rukou.

   Doporučená četba: Jak vybrat webového hostitele podle wikiHow je skvělý článek, který vám dává kroky a tipy byste měli vědět před nákupem web hosting účet.

2. Majetek hostitele odděleně

   Když jsme se zmínili o majetku, mysleli jsme webové komponenty jako snímky a statické skripty které nevyžadují zpracování na straně serveru. Patří mezi ně všechny webové grafiky, obrázky, Javascripts, kaskádové styly (CSS), atd. Hosting majetku samostatně není nutností, ale viděli jsme ohromný výsledek, pokud jde o stabilitu serveru s touto implementací, když blog měl dopravní špice.

   Doporučená četba: Maximalizace paralelního stahování v pruhu Carpool.

3. Komprese s GZip

   Stručně řečeno, obsah přechází ze strany serveru na stranu klienta (naopak versus) vždy, když je zadán požadavek HTTP. Komprese obsahu pro odeslání značně zkracuje dobu potřebnou ke zpracování každého požadavku.

   GZip je jedním z nejlepších způsobů, jak to udělat a je to různé podle typu serverů, které používáte. Například, Apache 1.3 používá mod_zip, Apache 2.x používá mod_deflate a zde je to, jak to děláte Nginx. Zde jsou některé opravdu dobré články, které vás seznámí s kompresí na straně serveru:

   • Zrychlete webovou stránku povolením komprese souboru Apache
   • Komprese webového výstupu pomocí mod_gzip a Apache
   • Jak optimalizovat vaše stránky s kompresí GZIP
   • Komprese na straně serveru pro ASP

4. Minimalizovat přesměrování

   Webmasters dělají URL přesměrování (zda je to Javascript nebo META přesměrování) po celou dobu. Někdy je účelem nasměrovat uživatele ze staré stránky na nové nebo pouze navádět uživatele na správnou stránku. Každé přesměrování vytvoří další požadavek HTTP a RTT (round-trip-time). Čím více přesměrování máte, tím pomalejší uživatel se dostane na cílovou stránku.

   Doporučená četba: Vyhněte se přesměrování Google Code vám dává dobrý přehled o této záležitosti. Článek také doporučuje některé praktické způsoby, jak minimalizovat přesměrování, aby se zvýšila rychlost obsluhy.

5. Omezte vyhledávání DNS

   Podle Yahoo! Blog vývojářské sítě, trvá asi 20-120 milisekund pro DNS (Domain Name System) k vyřešení IP adresy pro daný název hostitele nebo název domény a prohlížeč nemůže nic dělat, dokud nebude proces řádně dokončen..

   Autor Steve Souders navrhl, že rozdělení těchto komponent přes nejméně dvě, ale ne více než čtyři názvy hostitelů, snižuje vyhledávání DNS a umožňuje paralelní stahování ve vysokém stupni. Přečtěte si více článku.

Optimalizace: Aktiva (CSS, Javascripts, Images)

1. Sloučit více Javascripts do jednoho

   Lidi rakaz.nl sdílí, jak můžete kombinovat více Javascripts jako:

    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 

   Do jediného souboru změňte adresu URL na:

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

   manipulací s .htaccess a použitím PHP. Klikněte zde čtěte více.

2. Komprimujte Javascript a CSS

   Minifikovat je aplikace PHP5, která může kombinovat více souborů CSS a Javascript, komprimovat jejich obsah (tj. odstranit zbytečné mezery / komentáře) a sloužit výsledky pomocí kódování HTTP (gzip / deflate) a záhlaví, které umožňují optimální ukládání do mezipaměti na straně klienta.

   

   Komprimujte je online!Tam jsou také některé webové služby, které vám umožní ručně komprimovat Javascripts a CSS soubory online. Zde je pár z nich:

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

3. Upravit záhlaví záhlaví / ukládání do mezipaměti

   Zápočet: httpwatch

   Pomocí přizpůsobené záhlaví vypršení, vaše webové komponenty, jako jsou obrázky, statické soubory, CSS, Javascript přeskočil zbytečný požadavek HTTP, když stejný uživatel znovu načíst stránku pro podruhé. Snižuje potřebnou šířku pásma a jednoznačně pomáhá rychleji obsluhovat stránku.

   Doporučené hodnoty:

   • Yahoo! Blog vývojářské sítě - Přidat záhlaví vyprší
   • Jak přidat dobré vyprší záhlaví k obrázkům v Apache 1.3
   • Ukládání do mezipaměti HTTP
   • Caching výuka pro webové autory a webmastery

4. Odložená aktiva

   Odložením se rozumí oddělení Javascriptů, obrázků, CSS a statických souborů z hlavního serveru, kde je webová stránka hostována, a umístění na jiný server nebo spoléhání na jiné webové služby. V tomto roce jsme zaznamenali výrazné zlepšení Hongkiat odložením aktiv do jiných dostupných webových služeb, což ponechává server hlavně na zpracování PHP. Zde jsou některé návrhy online služeb pro načítání:

   • snímky: Flickr, Smugmug, placené hostování *
   • Javascripts: Google Ajax Library, Google App Engine, placené hostování *
   • Webový formulářs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Průzkum a ankety: SurveyMonkey, PollDaddy

   * Placené hostování - Placené služby mají vždy lepší spolehlivost a stabilitu. Pokud vaše webové stránky neustále žádají o aktiva, budete se muset ujistit, že jsou v dobrých rukou. Doporučujeme Amazon S3 a Cloud Front.

5. Manipulace s webovými obrázky

   Obrázky jsou důležitou součástí vašich webových stránek. Nicméně, pokud nejsou správně optimalizovány, mohou se stát zátěží a nakonec využít nepředvídatelně velké množství šířek pásma na denní bázi. Tady nějaké jsou nejlepších postupů pro optimalizaci obrázků:

   • Optimalizujte obrázky PNGFolks at Smashing Magazine popisuje některé chytré techniky, které vám mohou pomoci optimalizovat vaše obrázky PNG.
   • Optimalizace pro web - Věci, které potřebujete vědět (formáty) Další informace o formátu JPEG, formátu GIF, formátu PNG a způsobu uložení obrázků pro web.
   • Nesměřujte obrázkyVždy praktikujte vkládání šířka a výška pro každý snímek. Také obrázek nezmenšujte jen proto, že na webu potřebujete menší verzi. Například: Neaplikujte měřítko 200 × 200 px na 50 × 50 px pro vaše webové stránky změnou šířka a výška. Získejte místo toho 50 × 50 px.

   Optimalizace pomocí webových služeb a nástrojů. Dobrou zprávou je, že nemusíte být expertem Photoshopu pro optimalizaci obrázků. Existuje spousta webových služeb a nástrojů, které vám pomohou udělat práci.

   • Smush.itPravděpodobně jeden z nejúčinnějších online nástrojů pro optimalizaci obrázků. K dispozici je i plugin pro WordPress!
   • JPEG a PNG StripperNástroj Windows pro odstraňování / čištění / odstraňování zbytečných metadat ze souborů JPG / JPEG / JFIF a PNG.
   • Optimalizace obrazu onlineUmožňuje vám snadno optimalizovat své gify, animované gify, jpgs a pngs, aby se na vašem webu mohli načíst co nejrychleji pomocí služby Dynamic Drive
   • SuperGIFSvé obrázky a animace GIF bez námahy zmenšují.
   • Tady je více.

6. Manipulace s CSS

   Moderní webové stránky používají CSS jako základ tohoto stylu, stejně jako vzhled a dojem. Nejen CSS dává velkou flexibilitu změnám, ale je také menší z hlediska potřebných kódů. Pokud jsou však špatně kódovány, mohlo by to být selhání. Zde jsou některé kontrolní seznamy, nebo spíše návody, jak zajistit, aby byly CSS správně optimalizovány:

   • Udržet vaše děti děti v řadě s potomkyJak udržet vaše značky čisté pomocí CSS Selectors.
   • Mějte CSS krátkéKdyž dají stejný styl, kódy jsou lepší, čím kratší jsou. Tady je CSS Stručný průvodce budete pravděpodobně potřebovat.
   • Použijte CSS SpriteCSS Sprite technika snižuje požadavky HTTP pokaždé, když je stránka načtena kombinací několika (nebo všech) obrazů společně na jediném obrazovém souboru a řídí jeho výstup pomocí CSS pozadí atribut. Zde je několik užitečných příruček a metod pro vytváření CSS Sprites:
     • Online CSS Sprite Generator
     • Nejlepší online a offline CSS Sprites generátor
   • Využití každé deklarace jen jednouKdyž se snažíte optimalizovat své CSS soubory, jedním z nejsilnějších opatření, která můžete použít, je použít každé prohlášení pouze jednou.
   • Snižte množství souborů CSSDůvod je jednoduchý, čím více souborů CSS máte více požadavků HTTP, které bude muset provést, když je požadována webová stránka. Například místo toho, abyste měli více souborů CSS, jako například následující:

     Můžete je zkombinovat do jediného CSS:

   Doporučené hodnoty:

   • Užitečné nástroje pro kontrolu, čištění a optimalizaci souboru CSSNěkteré z užitečných nástrojů, které můžete použít k optimalizaci kódu CSS, i když nemáte žádné znalosti o kódování CSS.
   • 7 Zásady čistého a optimalizovaného CSS kóduOptimalizace není jen minimalizace velikosti souboru - je to také o tom, že je organizovaná, neporušená a efektivní.
   • Nejlepší postupy pro optimalizaci CSSVezměme si tento článek spíše jako akademické cvičení spíše než v reálném životě tipy optimalizace.

Optimalizace pro WordPress

Čas od času sledujeme, porovnáváme a analyzujeme výkonnost našeho blogu WordPress. Pokud web běží pomalu, musíme vědět proč. Zde jsou některé základní změny, které jsme udělali a my jsme si mysleli, že výrazně zvýší rychlost vašeho blogu WordPress.

1. Cache Your Worpress Blog

   WP-Cache je velmi efektivní WordPress stránky caching systém, aby se vám stránky mnohem rychleji a reagovat. Doporučujeme také WP Super Cache který z předchozího pluginu vylepšuje a také dělá skvělou práci.

2. Deaktivujte a odstraňte nepoužívané moduly

   Když si všimnete, že se váš blog načítá opravdu pomalu, zjistěte, zda máte nainstalováno mnoho pluginů. Mohli by být viníkem.

3. Odstraňte nepotřebné tagy PHP

   Pokud se podíváte do zdrojových kódů motivu, najdete mnoho takových značek:

   Mohou být do značné míry nahrazeny textovým obsahem, který nezpůsobuje zatížení serveru. Překontrolovat Michael Martinje 13 Štítky, které chcete odstranit z programu WordPress BloG

Doporučené četby:

• 3 Nejjednodušší způsoby, jak urychlit WordPressJohn Pozadzides sdílí, jak jeho blog pluje hladce přes dopravní špici Digg.
• 13 Velké WordPress Rychlost Tipy a triky pro MAX výkon Zde je několik věcí, které můžete zkusit, pokud zjistíte, že vaše stránky WordPress nefunguje stejně, jako by to mohlo být způsobeno vysokým provozem nebo skrytými problémy, o kterých nevíte.
• 40 Tipy pro optimalizaci WordPressOptimalizační tipy na diapozitivech. 40 tipů za 40 minut.

V neposlední řadě…

Zde jsou některé užitečné webové služby a nástroje, které vám poskytnou širší perspektivu a lepší analýzu, která vám pomůže při optimalizaci webu.

• Yahoo! YSlow

  YSlow analyzuje webové stránky a navrhuje způsoby, jak zlepšit jejich výkon na základě souboru pravidel pro vysoce výkonné webové stránky. To vám dává dobrou představu, co je třeba udělat, aby webové stránky načíst rychleji.

  (Vyžaduje se Firebug)

  

• Rychlost stránky

  Podobný Yahoo! YSlow, Google Rychlost stránky je open-source doplněk Firebug pro vyhodnocení výkonů webových stránek a jejich zlepšení. (Vyžaduje se Firebug)

  

• Nástroje Pingdom

  Nástroje Pingdom vezměte úplnou zátěž svých webových stránek včetně všech objektů (obrázky, CSS, JavaScript, RSS, Flash a rámce / iframes) a zobrazí obecné statistiky o načtené stránce, jako je celkový počet objektů, celkový čas načítání a velikost včetně všech objekty.

  

Doporučené hodnoty:Zde jsou další tipy a nástroje, které stojí za to se podívat.

• Google Web Optimizer
• 15 Nástroje, které vám pomohou vytvořit rychlejší webové stránky
• 15+ Tipy pro urychlení webových stránek a optimalizaci kódu!