Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile friendly web

Mobile friendly web

428a9c6e5b151e618d4db288105bc5f3?s=128

Aleš Roubíček

July 02, 2015
Tweet

Transcript

  1. mobile friendly web @alesroubicek

  2. Když píšeme weby, které mají běžet v mobilních zařízeních, většinou

    to je tak, že uděláme úpravy stránky, aby se nerozpadala na nižších rozlišeních a když už máme dost malý prostor nahodíme hambáče. A máme hotovo!
  3. Jenže to není mobile friendly. To je maximálně tak mobile

    aware. Mobile friendly web není jen o rozlišení displeje a patřičnému rozložení stránky. I když je to také často zanedbávaný aspekt.
  4. ? Co myslíte, jaký mobilní počítač používám nejčastěji?

  5. Ano právě se na něj díváte.

  6. Pod kapotou má 16GB paměti, čtyřjádrové i7 a baterii, která

    má vydržet 9 hodin provozu na Wifi.
  7. Ale nevydrží!

  8. Proč? Protože autoři webů většinou nepočítají s tím, že…

  9. … sedíte v lese, připojený přes 3G/LTE a nejbližší zásuvka

    je od vás kilometr daleko.
  10. I tento talk jsem připravoval na lavičce v jednom Barcelonském

    parku.
  11. Když se koukám pod kapotu běžných stránek, vidím megabajty JavaScriptů

    a podobně nabobtnalé stylopisy. A to je běžný jev i na obyčejných obsahovkách a microsajtách.
  12. • Přenášíme spoustu dat, kterou nepotřebujeme • Používáme neefektivní techniky,

    které zvyšují požadavky na spotřebu energie • Testujeme v neadekvátním prostředí • Myslíme si, že obecné pravdy, které fungují na desktopu fungují i na mobilních zařízeních Pojďme si projít pár nejčastějších chyb a třeba i pár řešení.
  13. Plýtvání přenosovým pásmem je nejčastějším problémem. 9 z 10 webdesignerů

    vám poví, že ho trápí jeho FUP, ale jen 1 ze 100 optimalizuje své výtvory, aby byly skutečně efektivní v množství přenášených dat.
  14. Minifikace JS může být celkem účinná, u CSS a HTML

    už zas tak moc ne. gzip pomáhá hodně.
  15. None
  16. Browser musí všechny skripty a styly naparsovat a vyhodnotit. Když

    máte ve stránce stylopis, kde se 87 % pravidel nepoužije, je to velice neefektivní.
  17. Obzvláště vypečené jsou selektory, které vypadnou z šestiúrovňového zanoření v

    Lesse/Sassu. Browser vyhodnocuje každý selektor a to od konce a i když má spolehlivý match už v půlce selektoru, stejně musí dojet až do konce.
  18. *  {      margin:0;      padding:0;   }

    Pak tu máme resety a úpa nejvíc je ten hvězdičkový. Nedělejte to!
  19. Místo preprocessorů, které generují spoustu neefektivního bordelu, používejte postprocessory, které

    vám dokáží CSS zoptimalizovat a dovolí vám používat syntaxi, která ještě není v browserech implementovaná (mj. proměnné).
  20. Neefektivní techniky ovšem nepotkáte jen v CSS, ale také v

    JavaScriptu. Je běžné, že všechny jQuery funkce máte v jednom souboru, kde se skripty aplikují pomocí selektorů, podobně jako v CSS. Stejný problém.
  21. Případně máte obsahovou stránku napsanou v Angularu, kde se nejprve

    čeká na natažení a inicializaci zbytečného scriptu a pak se čeká na asynchronní natažení obsahu a pak se čeká na brutální mutaci DOMu. Nedělejte to.
  22. Co můžete udělat na serveru, tak udělejte. Má mnohem větší

    výkon a mobilnímu uživateli ušetří spoustu potřebné energie.
  23. var  els  =  document.getElementsByTagName('*');   for  (var  i  =  0;

     i  <  els.length;  i++)  {      els[i].addEventListener('click',  e  =>  {      /*  do  something  */   },  false);   } Další věc je paměť. Obrovským jedlíkem paměti, jsou všudypřítomné ovladače událostí s uzávěry přes globální sdílený stav.
  24. Obzvláště, když je zapomínáte odhlašovat.

  25. None
  26. Když testujeme jak stránky vypadají na mobilních zařízeních, použijeme emulaci

    v browseru, případně emulátor mobilního OS. To nám ušetří spoustu nákladů na testovací zařízení.
  27. Ale nezapomínejte na šířku pásma! Mobilní připojení se chová úplně

    jinak než váš broadband v kanclu nebo UPC doma.
  28. A stejně testujte i na fyzických mobilních zařízeních, emulace nefunguje

    přesně a spousta důležitých detailů vám uteče.
  29. $  npm  install  -­‐-­‐global  psi Důležitým pomocníkem je taky Page

    Speed Insight od Googlu. Dokonce existuje jako npm balíček, který byste si měli přidat do buildu.
  30. JavaScriptové VM jsou velice rychlé a díky JITu mají výkon

    srovnatelný s Javou/CLR. Jenže to platí pro superoptimalizovanou platformu x86.
  31. V mobilních zařízeních máme procesory ARM, které mají redukovanou instrukční

    sadu a JIT nemůže využít chytrých optimalizací, musí fungovat jinak. Procesory jsou navíc mnohem pomalejší, aby ušetřily energii.
  32. Paměť nám pro změnu v JS řeší Garbage Collector. Mobilní

    zařízení mají většinou velmi málo dostupné paměti. GC funguje dobře jen, když máte paměti nadbytek. Když máte paměti jen 4x víc než ji potřebujete, začínáte mít problém…
  33. Problém, který roste exponenciálně s poklesem dostupné paměti. Tím problémem

    jsou GC pauzy. Ve výsledku se pak browser začne sekat a přestane odpovídat na vaše požadavky.
  34. None