Optimalizace webu pro zvyseni rychlosti a snizeni trafficu

Destroyer · 2010-07-19 12:36:48

Využívá se: https://developers.google.com/speed/pags?hl=cs-CZ

Popř. doplňky do FF/Chrome - https://developers.google.com/speed/pag … extensions

Bližší popis jak řešit jednotlivé problémy:
1. Specify image dimensions
v kódu u tagů img/css chybí šířka a výška

width="číslo" height="číslo"

2. Specify a character set early
charset je nastaveny v kodu jinde než má být, nejlépe je ho mít co nejvíc nahoře
např.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="cs-cz" xml:lang="cs-cz">
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

3. Serve resources from a consistent URL
většinou se jedná o to že 2x nebo i vícekrát aplikujete jeden a ten samý soubor (většinou javascript)

4. Put CSS in the document head
cssko nepatří do body! musí být v části head

5. Minimize request size
pokud to není třeba například při php kodu nebo extra generovanem kodu se tato hláška zobrazí pouze tehdy když máte zbytečně dlouhý odkaz

6. Minimize DNS lookups
pokud máte více domén a přesměrováváte z jedny na druhou (příklad samotného googlu), zpomaluje to také načítání stránky

7. Avoid bad requests
docela zásadní prvek ve stránce
pokud u toho máte nějaký soubor hledejte v html kodu a smažte tento odkaz, když nefunguje výrazně tím zpomalujete načítání

8. Optimize images
další zásadní věc
pokud u toho máte hodnoty v řádech jednotek kilobytů je to ještě v pořádku
pokud ale máte desítky až stovky kilobytu měli byste provést optimalizaci ... s tou také souvisí další bod

9. Serve scaled images
důležitý prvek spolu s optimalize
většina začátečníků používá velký --- tím i kvalitní obrázek pro jejich stránky. To ale extrémní sníží rychlost načítání. Nejlepší je zachovat poměr 1:1 - jaká velikost obrázku taková na webu. Jinak provést nejdřív zmenšení a pak optimize

10. Remove unused CSS
toto je spíš trochu pro štouraly a ne pro ty co sou začátečníci a stáhli si volitenou šablonu
pokud ale děláte web sami a víte co jste kde použili a co web již nepoužívá tak to smažte nejen z html kodu ale pak i z css

11. Leverage proxy caching
většinou s tím nic neuděláte ale pokud je v odkaze ? nebude se ukládat v archivech např. googlu

12. Optimize the order of styles and scripts
k tomu lze jen dodat vše v head a nejdřív csska a pak javascripty

13. Minify CSS/HTML/JAVASCRIPT
pro zpřehlednění kodu je velmi často na stránkách mnoho mezer a tabulátorů
to je sice pro další vyvíjení stránky hezké a přehledné ale uplně zbytečné pro toho kdo stránku prohlíží
v extrému to mohou být opět desítky kilobytů

14. Leverage browser caching
většinou stačí vyřešit přidáním těchto řádků do souboru .htaccess

ExpiresActive on
ExpiresDefault A604800
ExpiresByType application/x-javascript A604800
ExpiresByType text/javascript A604800
ExpiresByType text/js A604800
ExpiresByType text/css A604800
ExpiresByType image/ico A604800
ExpiresByType image/gif A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/jpg A604800
ExpiresByType image/p-jpeg A604800
ExpiresByType image/png A604800
ExpiresByType image/swf A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800

kdyžtak lze samozřejmě doplnit o libovolný formát

15. Enable compression
většinou lze vyřešit v souboru .htaccess přidáním

# Apache2 deflate support if available
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

16. Combine external JavaScript/CSS
většina javascriptů nebo cssek jde vložit do jediného souboru, stačí smazat všechny z kodu, spojit pod jeden a hodit spouštění pouze jednoho
pozor na cache prohlížečů (zvlášt těm co se ukládá v pc všechny soubory a po spuštění stránky se jim načte cssko z starého umístění), umístění csska/javascriptu a cache přímo v aplikacích - může nadělat docela potíže

17. Combine images into CSS sprites
toto používá již spousta moderních webů - ve zkratce to znamená to, že všechny obrázky (ikonky) dáte do jednoho souboru a pak je jen pomocí csska nastylujete. Např. youtube: http://s.ytimg.com/yt/imgbin/www-refresh-vflMLqC23.png . Podstatně se tim sníží doba načítání stránky zvlášť, pokud je obrázků hodně a nebo pokud hosting omezuje počet stahovaných souborů zároveň.
Nezapomeňte však, že tuto věc zatím nepodporují staré a hlavně mobilní prohlížeče!
Pokud se do toho i tak pustíte, můžete vyzkoušet perfektní nástroj http://spriteme.org/ který vám tu práci zjednoduší.

18. Defer parsing of JavaScript
ve zkratce to znamená to, že prohlížeč musí zpracovat příliš mnoho javascriptu a to zpomaluje zobrazení stránky
v době jquery a html5 kdy je vše přes js je ale někdy velmi těžké se tomu vyhnout

--SCORE
1-60 - hrozná stránka - potřeba zásadních úprav
60-75 - průměrná stránka - může být lepší
75-84 - již nějaké změny byly provedeny
85-100 - ideální skóre v kterém by se měla stránka pohybovat

Upravil Destroyer (2013-07-10 18:02:28)

Lukenzi · 2011-01-12 18:51:29

pozor na cache prohlížečů (zvlášt těm co se ukládá v pc všechny soubory a po spuštění stránky se jim načte cssko z starého umístění), umístění csska/javascriptu a cache přímo v aplikacích - může nadělat docela potíže

jen bych dodal že pokud chcete mít jistotu že prohlížeče načtou nový např. CSS soubor a ne starý ze své cache stačí ve zdroji za název souboru umístit (např. pomocí PHP) nějaký request

např. mám soubor style.css který jsem upravil a chci aby si prohlížeč stáhnul tento nový soubor a nepoužil ten z cache tak ve zdroji nahradím

<link href="./design/style.css" ...

za například

<link href="./design/style.css?v=new" ...

prohlížeče tento soubor pak budou brát jako nový ale vše ostatní budou cacheovat dál normálně

#1 2010-07-19 12:36:48

Re: Optimalizace webu pro zvyseni rychlosti a snizeni trafficu

#2 2011-01-12 18:51:29

Re: Optimalizace webu pro zvyseni rychlosti a snizeni trafficu

Zápatí