Ultimate Guide to Web Optimization (Tipy a najlepšie postupy)

Web optimalizácia je životne dôležitou súčasťou vývoja a údržby webových stránok, ale aj webmasterom, ktorý často prehliada. Len si pomyslite na peniaze, ktoré môžete ušetriť, a ako to môže potenciálne pomôcť zvýšiť čitateľnosť a návštevnosť, keď sú správne vykonané.

Ak ste doteraz neurobili nejakú optimalizáciu na vašich webových stránkach (alebo blog) alebo ste len zvedaví, ako môže pomôcť urýchliť vaše stránky, pozrite si prosím tento zoznam optimalizačných tipov, ktoré sme dali dohromady.

Na lepšiu čitateľnosť sme rozdelili veci do troch oddielov optimalizácia na strane servera, optimalizácia aktív (ktorý obsahuje webové komponenty ako CSS, Javascript, obrázky atď.) a plošina, kde sa zameriame Optimalizácia WordPress. V poslednej časti uvádzame niekoľko odkazov, ktoré považujeme za užitočné. Úplný zoznam po skoku.

Optimalizácia: na strane servera

1. Vyberte si slušný Web Host

   Váš web hosting účet nemá žiadny priamy vzťah s optimalizáciami, ktoré sa chystáte vykonať, ale mysleli sme si na výber správneho webhostingového účtu, takže sme sa rozhodli najprv upozorniť. Hostingový účet je základom vašej webovej lokality / blogu, kde je bezpečnosť, prístupnosť (cPanel, FTP, SSH), stabilita serverov, ceny a podpora zákazníkov zohrávajú dôležité úlohy. Musíte sa uistiť, že máte dobré ruky.

   Odporúčané čítanie: Ako si vybrať Web Host podľa wikiHow je skvelý článok, ktorý vám dáva kroky a tipy, ktoré by ste mali vedieť pred zakúpením akéhokoľvek web hosting účtu.

2. Hostiteľský majetok samostatne

   Keď spomenieme aktíva, mysleli sme na webové komponenty, ako napr snímky a statické skripty ktoré nevyžadujú spracovanie na strane servera. Zahŕňa akúkoľvek webovú grafiku, obrázky, Javascripts, kaskádové štýly (CSS) atď. Hostingové prostriedky oddelene nie je nutné, ale vďaka tejto implementácii sme videli obrovský výsledok, pokiaľ ide o stabilitu serverov, keď blog mal dopravný špič.

   Odporúčané čítanie: Maximalizácia paralelných stiahnutí v pruhu Carpool.

3. Kompresia pomocou GZip

   Stručne povedané, obsah prechádza zo strany servera na stranu klienta (vicet versa) vždy, keď je vykonaný žiadosť HTTP. Komprimovanie obsahu na odosielanie značne skráti čas potrebný na spracovanie každej žiadosti.

   GZip je jedným z najlepších spôsobov, ako to urobiť, a to rôzne podľa typu serverov, ktoré používate. Napríklad, Apache 1.3 používa mod_zip, Apache 2.x používa mod_deflate a tu je, ako to robíte Nginx. Tu sú niektoré naozaj dobré články, ktoré vás oboznámia s kompresiami na strane servera:

   • Urýchliť webovú lokalitu tak, že povolíte kompresiu súborov Apache
   • Komprimujte webový výstup pomocou mod_gzip a Apache
   • Ako optimalizovať svoje stránky pomocou kompresie GZIP
   • Kompresia na strane servera pre ASP

4. Minimalizovať presmerovania

   Správcovia webu robia presmerovanie URL (či už je to presmerovanie Javascript alebo META). Niekedy je cieľom poukázať používateľov zo starej stránky na novú, alebo len usmerniť používateľov na správnu stránku. Každé presmerovanie vytvorí ďalší žiadosť HTTP a RTT (round-trip-time). Čím viac presmerovania máte, tým pomalší používateľ sa dostane na cieľovú stránku.

   Odporúčané čítanie: Vyhnite sa presmerovaniu kód Google poskytuje dobrý prehľad o tejto veci. Článok tiež odporúča niekoľko praktických spôsobov, ako minimalizovať presmerovanie, aby sa zvýšila rýchlosť podávania.

5. Znížte vyhľadávanie DNS

   Podľa Yahoo! Blog siete pre vývojárov, trvá asi 20-120 milisekúnd pre DNS (Domain Name System) na vyriešenie IP adresy pre daný názov hostiteľa alebo názov domény a prehliadač nemôže urobiť nič, kým nie je proces správne dokončený.

   autor Steve Souders navrhol, že rozdelenie týchto komponentov na najmenej dve, ale nie viac ako štyri názvy hostiteľov znižuje vyhľadávanie DNS a umožňuje vysoko paralelné sťahovanie. Čítaj viac na tomto článku.

Optimalizácia: Aktíva (CSS, Javascripts, Obrázky)

1. Zlúčiť viac Javascriptov do jedného

   Ľudia na adrese rakaz.nl zdieľa, ako môžete kombinovať viaceré heslá, ako napríklad:

    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 jedného súboru zmenou adresy URL na:

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

   manipuláciou .htaccess a použitím PHP. Kliknite tu prečítajte si viac.

2. Komprimovať Javascript a CSS

   Minifikovat je aplikácia PHP5, ktorá môže kombinovať viacero súborov CSS a Javascript, komprimovať ich obsah (tj odstrániť zbytočné medzery / komentáre) a zobrazovať výsledky s kódovaním HTTP (gzip / deflate) a hlavičkami, ktoré umožňujú optimálne ukladanie do vyrovnávacej pamäte na strane klienta.

   

   Komprimujte ich online!Existujú aj niektoré webové služby, ktoré vám umožňujú manuálne kompresiu súborov Javascript a CSS online. Tu je málo, čo poznáme:

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

3. Prispôsobenie vypršania / ukladania do pamäte hlavičiek

   Kredit: httpwatch

   Použitím prispôsobenej hlavičky Expiry vaše webové komponenty, ako sú obrázky, statické súbory, CSS, Javascript, preskočili nepotrebnú požiadavku HTTP, keď ten istý používateľ znovu načíta stránku na druhý čas. Znižuje potrebnú šírku pásma a definitívne pomáha pri rýchlejšom zobrazovaní stránky.

   Odporúčané čítania:

   • Yahoo! Blog pre vývojárov siete - Pridať hlavičku o vypršaní platnosti
   • Ako pridať Dobrý Vyprší hlavičky obrázkov v Apache 1.3
   • HTTP Caching
   • Caching Tutorial pre webových autorov a správcov webu

4. Vypnúť aktíva

   Odstránením sa rozumie oddelenie Javascriptov, obrázkov, CSS a statických súborov z hlavného servera, na ktorom je webová stránka hosťovaná, a umiestnenia na inom serveri alebo spoliehania sa na iné webové služby. V tejto oblasti sme zaznamenali výrazné zlepšenie Hongkiat vyradením aktív do iných dostupných webových služieb, ponechaním servera na spracovanie PHP. Tu sú niektoré návrhy on-line služieb pre offloading:

   • snímky: Flickr, Smugmug, Platené hostovanie *
   • JavaScripts: Kniha Google Ajax, Google App Engine, Platené hostovanie *
   • Webový formulárs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Prieskum a ankety: SurveyMonkey, PollDaddy

   * Platené hostovanie - Platené služby majú vždy lepšiu spoľahlivosť a stabilitu. Ak vaše webové stránky neustále žiadajú o aktíva, musíte sa uistiť, že sú v dobrých rukách. Odporúčame Amazon S3 a Cloud Front.

5. Manipulácia s webovými obrázkami

   Obrázky sú dôležitou súčasťou vašej webovej stránky. Ak však nie sú správne optimalizované, môžu sa stať záťažou a nakoniec využívať nepredvídateľne veľké množstvo šírok pásma na dennej báze. Tu sú nejaké najlepšie postupy na optimalizáciu obrázkov:

   • Optimalizujte obrázky PNGĽudia v časopise Smashing Magazine opisujú niektoré šikovné techniky, ktoré vám môžu pomôcť optimalizovať obrázky PNG.
   • Optimalizácia pre web - Čo potrebujete vedieť (formáty) Viac informácií o Jpeg, GIF, PNG a ako by ste mali ukladať obrázky na web.
   • Nezmenšujte obrázkyVždy používajte vkladanie šírka a výška pre každý obrázok. Taktiež nemažte obrázok nadol len preto, že potrebujete menšiu verziu na webe. Napríklad: Nepoužívajte násilnú zmenu obrazu s rozmermi 200 × 200 px na 50 × 50 px pre vašu webovú stránku zmenou šírka a výška. Získajte miesto 50 × 50 pixlov.

   Optimalizácia pomocou webových služieb a nástrojov. Dobrou správou je, že nemusíte byť odborníkom z Photoshopu na optimalizáciu obrázkov. Existuje množstvo webových služieb a nástrojov, ktoré vám pomôžu vykonať prácu.

   • Smush.itPravdepodobne jeden z najúčinnejších online nástrojov na optimalizáciu obrázkov. K dispozícii je aj plugin pre WordPress!
   • JPEG a PNG StripperNástroj Windows na odstraňovanie / odstránenie nepotrebných metadát (nevyžiadanej pošty) zo súborov JPG / JPEG / JFIF a PNG.
   • Online Image OptimizerUmožňuje vám jednoducho optimalizovať vaše gify, animované gify, jpgs a png, aby sa na vašom webe načítavali čo najrýchlejšie pomocou programu Dynamic Drive
   • SuperGIFUrobte bez problémov všetky menšie obrázky a animácie vo formáte GIF.
   • Tu je viac.

6. Manipulácia s CSS

   Moderné webové stránky používajú CSS ako základ štýlu, rovnako ako vzhľad a dojem. Nielen CSS dáva veľkú flexibilitu zmenám, je tiež menej, pokiaľ ide o potrebné kódy. Ak sú však nesprávne kódované, môže to byť spätný požiar. Tu sú niektoré kontrolné zoznamy, alebo skôr sprievodca, aby ste sa uistili, že vaše CSS sú správne optimalizované:

   • Udržiavanie detí v čele s potomkamiAko udržať značku čistú pomocou programátorov CSS.
   • Udržujte CSS krátkyKeď dajú ten istý štýl, kódy sú lepšie, tým sú kratšie. Tu je a CSS sprievodca pravdepodobne budete potrebovať.
   • Použite CSS SpriteTechnológia CSS Sprite znižuje požiadavku na HTTP pri každom načítaní stránky kombináciou viacerých (alebo všetkých) obrázkov dohromady v jednom súbore obrázkov a riadením ich výstupu pomocou CSS background-polohový atribútov. Tu sú niektoré užitočné návody a techniky na vytvorenie CSS Sprites:
     • Online generátor CSS Sprite
     • Najlepšie online a offline CSS Sprites Generator
   • Použitie každého vyhlásenia len razPri hľadaní optimalizácie súborov CSS je jednou z najsilnejších opatrení, ktoré môžete použiť, použiť každé vyhlásenie len raz.
   • Znížte množstvo súborov CSSDôvod je jednoduchý, čím viac súborov CSS máte viac požiadaviek na protokol HTTP, ktoré budú musieť vykonať, keď sa požaduje webová stránka. Napríklad namiesto toho, aby ste mali viaceré súbory CSS, napríklad:

     Môžete ich skombinovať do jednej CSS:

   Odporúčané čítania:

   • Užitočné nástroje na kontrolu, čistenie a optimalizáciu súboru CSSNiektoré z užitočných nástrojov, ktoré môžete použiť na optimalizáciu kódu CSS, aj keď nemáte úplne žiadne znalosti o kódovaní CSS.
   • 7 Zásady čistého a optimalizovaného kódu CSSOptimalizácia nie je len minimalizácia veľkosti súboru - je to aj organizovanie, neporiadok a efektívnosť.
   • Najlepšie postupy na optimalizáciu CSSZvážte tento článok skôr ako akademické cvičenie, skôr ako tipy na optimalizáciu v reálnom živote.

Optimalizácia pre WordPress

Z času na čas monitorujeme, porovnávame a analyzujeme výkonnosť nášho blogu WordPress. Ak stránka beží pomaly, musíme vedieť prečo. Tu je niekoľko základných zmien, ktoré sme urobili a mysleli sme, že výrazne zvýši rýchlosť vášho blogu WordPress.

1. Cache váš Worpress Blog

   WP-Cache je mimoriadne efektívny systém ukladania do vyrovnávacej pamäte stránky WordPress, ktorý vám pomôže rýchlejšie a rýchlejšie reagovať na stránky. Odporúčame tiež WP Super Cache ktorý sa vylepšuje z predchádzajúceho spomenutého pluginu a tiež robí skvelú prácu.

2. Deaktivovať a odstrániť nepoužívané doplnky

   Keď si všimnete, že váš blog sa načítava skutočne pomaly, skontrolujte, či máte nainštalované množstvo pluginov. Mohli by byť vinníkom.

3. Odstráňte nepotrebné tagy PHP

   Ak sa pozriete na zdrojové kódy témy, nájdete veľa značiek, ako sú tieto:

   Môžu byť do značnej miery nahradené obsahom textu, ktorý nespôsobuje zaťaženie servera. Odhlásiť sa Michael Martin, s 13 Značky na odstránenie z vášho WordPress Blog

Odporúčané čítania:

• Najjednoduchšie spôsoby, ako urýchliť WordPressJohn Pozadzides zdieľa, ako sa jeho blog plaví bezproblémovo prostredníctvom dopravného hrotu Digg.
• 13 skvelých tipov a trikov pre WordPress Speed ​​pre výkon MAX Tu je niekoľko vecí, ktoré vyskúšať, ak zistíte, že vaše stránky WordPress nevykonávajú rovnako dobre, ako by to mohlo byť spôsobené vysokou návštevnosťou alebo skrytými problémami, o ktorých neviete.
• 40 Tipy na optimalizáciu WordPressTipy na optimalizáciu v diapozitívach. 40 tipov za 40 minút.

V neposlednom rade…

Tu sú niektoré užitočné webové služby a nástroje, ktoré vám ponúkajú širšiu perspektívu a lepšiu analýzu, ktorá vám pomôže pri webovej optimalizácii.

• Yahoo! YSlow

  YSlow analyzuje webové stránky a navrhuje spôsoby, ako zlepšiť ich výkonnosť na základe súboru pravidiel pre vysoko výkonné webové stránky. To vám dáva dobrý nápad, čo je potrebné urobiť, aby sa web načítať rýchlejšie.

  (Vyžaduje Firebug)

  

• PageSpeed

  Podobný Yahoo! YSlow, Google Rýchlosť stránky je doplnok Firebug s otvoreným zdrojom na hodnotenie výkonnosti webových stránok a ich vylepšenia. (Vyžaduje Firebug)

  

• Pingdom Tools

  Pingdom Tools vykonajte úplné načítanie vašich webových stránok vrátane všetkých objektov (obrázky, CSS, JavaScript, RSS, Flash a rámčeky / iframe) a zobrazuje všeobecné štatistiky o načítanej stránke, ako je celkový počet objektov, celkový čas načítania a veľkosť vrátane všetkých objektov.

  

Odporúčané čítania:Tu je viac tipov a nástrojov, ktoré stojí za to.

• Google Web Optimizer
• 15 Nástroje, ktoré vám pomôžu rozvíjať rýchlejšie webové stránky
• 15 alebo viac tipov na urýchlenie vášho webu a optimalizáciu kódu!