Lesk a bieda nástrojov na testovanie rýchlosti webu

16.1.2016 12:49 | Přečteno: 2293× | Web

Na internete sa povaľuje mnoho nástrojov, ktoré testujú „rýchlosť webu“ zadarmo. Medzi najčastejšie používané nástroje patria Pingdom a PageSpeed Insights od googlu.

Webdeveloperi sa často spoliehajú namiesto svojho rozumu na rôzne online nástroje. Predpokladám, že kvalita webu bude logicky kopírovať kvalitu týchto nástrojov. Poďme sa teda pozrieť ako si jednotlivé nástroje poradia s jedným z najhoršie optimalizovaných webov aké som kedy videl - web apple.

Pingdom

Keď stránku apple vyskúšame cez tools.pingdom.com zistíme, že web je rýchlejší než 92% všetkých testovaných stránok, jeho veľkosť je 17.0MB, pri načítaní vykoná 103 požiadaviek a skóre je 81/100.

Tento nástroj pri analýze webu vôbec nekontroluje veľkosť webu. Ich servery majú veľmi dobrú konektivitu. To umožňuje odhaliť potenciálny problém s konektivitou nášho servera, ale nemá prakticky žiadnu výpovednú hodnotu o rýchlosti u klienta.

Hodnotu Perf. grade ovplyvňuje hlavne nastavenie servera. Nie je problém dosiahnuť hodnotu 100/100 zatiaľ čo web sa bude na mobilnom pripojení načítavať desiatky minút.

PageSpeed Insights

Ďalším často používaným nástrojom je PageSped od googlu.

Tento nástroj nám ukáže skóre 60/100 a navrhne:

• Nastaviť cachovanie (nulový vplyv pri prvom načítaní)
• Minifikovať javascript (zmenší web z 17MB na 16.9MB, fakt účinné ;) )
• Vožiť css priamo do stránky (vďaka tomu vyradí cache, fakt účinné najskôr ju nastaviť a potom vyradiť)
• Optimalizovať obrázky (zmenší web z 16.9MB na 16.87MB, fakt fakt si tým pomôžeme ;) )

Dva najpoužívanejšie nástroje nástroje ukážu priemernému webdeveloperovi aký je skvelý v „optimalizácii“. Nehovorím, že v niektorých prípadoch nemajú opodstatnenie, ale pri skutočnej optimalizácií odporúčam vyhnúť sa im veľkým oblúkom.

Yellow Lab Tools

Nástrojov, ktoré skutočne analyzujú veľkosť webu a výkon je ako šafránu. Jediný, ktorý som našiel je Yellow Lab Tools.

Stránka apple má podľa Yellow Lab Tools skóre 0/100. Do celkového skóre sa započítava celková veľkosť webu, počet dotazov, výkon skriptov (na strane servera sa spúšťa profiler, testuje sa počet prístupov do DOM, globálne premenné, scroll udalosti), kontroluje sa počet pravidiel CSS, ich komplexnosť, používanie zastaralých pravidiel, prefixov …

Zdrojové kódy Yellow Lab Tools sú dostupné na GitHube. Službu je možné prevádzkovať na vlastnom serveri.

Na záver ešte porovnanie jednotlivých nástrojov na webe LinuxOS.sk.

• Yellow Lab Tools - 100/100
• tools.pingdom.com - 94/100, web je rýchlejší než 100% testovaných webov
• PageSpeed - 97 / 100, vraj CSS treba umiestniť ako inline

Väčšina textu je z môjho blogu.

       

Komentáře

[Dreit]

A co teprve taková patnanina jako DeviantART

[mirec]

Krásne skóre má aj táto recenzia na apple hodinky ;)

[chrono]

Naozaj PageSpeed odporúča vložiť celý css do html kódu?

[mirec]

Teoreticky nie, prakticky áno. Trochu rozoberiem.

V googlackom helpe sa píše:

The critical styles needed to style the above-the-fold content are inlined and applied to the document immediately.

Takže inlinovať by sa mali štýly, ktoré vykreslia stránku po zalomenie. Zalomením je myslená bez scrollovania viditeľná časť stránky. Na mobile to môže byť pomerne malá časť, ale ja momentálne sedím pri desktope. Ak si otvorím abclinuxu.cz vidím celú hlavičku, ľavý panel, obsah a ešte dokonca aj diskusiu. Valstne jediná vec ktorú nevidím je pätička, všektko ostatné by malo byť teda inlinované. Tých zvyšných možno 10% CSS, ktoré tvorí pätičku sa ani neoplatí dávať do samostatného súboru kvôli réžii HTTP.

Druhý problém, ktorý tu ešte vidím je, že google odporúča externé css vkladať nie cez tag link na to určený v hlavičky, ale cez javascript (žeby snaha eliminovať používateľov noscriptu?). Takže namiesto:

<link rel="stylesheet" href="small.css">

Je podľa googlu lepšie:

<script>
  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'small.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>

[Jendа]

Je strašné, jak jsou weby ohromné a nepřístupné. Oblasti webů, o kterou se zajímám, se to dlouho vyhýbalo, ale už to začíná pronikat i tam. Mimochodem další neduh je tenké šedé písmo na šedém. Pak ještě pozoruji stránky, které se vůbec nezobrazí bez JS !!!, občas proto, že je v CSS veliký bílý <div> přes celou stránku. Nechápu.

Například výše odkazovaná stránka mi ve Firefoxu bez JS ukazuje polovinu jako bílý text na bílém pozadí.

Kromě JavaScriptu jsem tak začal vypínat i CSS (!!), na některých webech to dost pomůže. Třeba z toho TheVerge se najednou stane čitelná stránka.

Včera jsem se zase snažil použít zbozi.cz z Midori. Nešlo to, jejich clickthru tracker mě prostě nepustí.

YellowLab mi doporučil "lazyloader", takže už konečně vím, jak se jmenuje ten mor, kvůli kterému

• nemám obrázky na některých stránkách bez JS. To je přece jasné, tag <img> z HTML 2.0 nám nestačí, je potřeba kvůli tomu spouštět na klientovi náš kód.
• otevřu stránku, nechám ji natáhnout, odpojím se od sítě s tím, že si ji přečtu (ve vlaku, ...), a tam kusy chybí!

Nevím, co s tím mám dělat :-/

[jadd]

Zkousim Midori bez js a normalne se stranka nacte i s obrazky, mas tam neco spatne.

[Jendа]

Jak na kterém webu. (příklady si neukládám a žádný teď z hlavy nevykouzlím)

[jadd]

zbozi.cz, i u firefoxu s javascript.enabled(false) to ty obrazky nacte jen nefungujou ovladaci prvky.

[Jendа]

Midori, Preferences → Behavior → [ ] Enable scripts. Jdu na zbozi.cz, zadám "vysavač", dám entr, problikne to a hodí mě to na /?_escaped_fragment_=.

[Jendа]

A po té, co jsem selektivně povolil několik domén, jsem se nějak dostal na výsledky vyhledávání, ale jakmile jsem klikl na nějaký výrobek a pak na odkaz do eshopu, tak jsem dostal prázdnou stránku.

[jadd]

Tak jsem to zkoušel, vyhledávání funguje jen se zapnutým js (login.szn.cz) a taky to nejde bez zapnutého html5 storage. Zkusil jsem dát do hosts domény h.imedia.cz c.imedia.cz, ads.pubmatic.com, dot.seznam.cz, 1.im.cz a cdn.rawgit.com které tam jsou i bez nich to funguje.

[Josef Kufner]

Pokud si chceš něco v klidu přečíst, doporučuji tisk do souboru. Mnoho webů má použitelné tiskové styly a moc nehrozí chybějící obrázky či nefunkční JavaScript.

[R]

Alebo nastavit User-agent na Googlebot.

[Acci]

Nevím, co s tím mám dělat :-/

Přestat žít v roce 1995?

[Jendа]

Právě že kdybych žil v roce 1995, tak bych chodil na přístupný web.

[Odin1918]

Je treba se smirit s tim, ze je rok 2016 a javascript patri neodmyslitelne k webu. Doby linksu/lynxu jsou jiz davno pryc.

[Jendа]

JavaScript sám o sobě by mi tak nevadil, ale výsledkem je web žeroucí procesor, s nečitelným textem a rušivými animacemi.

[pavlix]

Já jsem s tím smířený, před pár dny jsem začal používat noscript.

[mirec]

Lazy loading je hnusný hack typu nevieme opraviť problém, ale urobíme to tak, aby to na prvý pohľad nebolo viditeľné.

Teoreticky by lazy loading mohol riešiť priamo browser (jednoducho by sa niekde v nastaveniach dalo zaškrtávatko a browser by nenačítaval to, čo je mimo viditeľnej plochy ... lenže to by sme zabili celé onload).

Celé je to momentálne trochu na hlavu padnuté. Dnes som pozeral analýzu linuxos.sk v nástroji moz kvôli divnému poklesu návštevnosti z googlu. Celkom ma prekvapil vysoký rank v spam analýze. Čerešničkou na torte je:

Site Mark-up is Abnormally Small
There's a high ratio of visible text compared to HTML, JavaScript, etc.

Takže keď má stránka dobrý pomer obsahu k bordelu je považovaná automaticky za spam.

Neviem, či si niekto pamätá časy keď HTML maily padali do spamu pretože boli HTML. No nedávno sa mi stalo, že mi textové maily začali padať do spamu pretože obsahujú len pár slov v plain texte.

[kotyz]

doba se změnila. pokrok nezastavíš... :-/

[washeck]

Nehovorím, že v niektorých prípadoch nemajú opodstatnenie, ale pri skutočnej optimalizácií odporúčam vyhnúť sa im veľkým oblúkom.

Tohle je imho klíčová věta. Pingdom je zaměřený hlavně na monitoring dostupnosti a odezvy serverů. Měří sice rychlost webu, ale je podle mě myšlen hlavně pro odhalení provozních problémů (např. uživatelům v určitém regionu jede web pomalu, zálohování db způsobuje pravidelně nárůst odezvy apod.) než pro kóderskou optimalizaci.

[mirec]

Problém je, že mnohí kóderi to používajú ako de facto test rýchlosti čo ani náhodou nie je. Na monitoring webu, nastavenie cachovania a mnoho ďalšieho je to veľmi dobrý nástroj.