Mobile friendly web

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ě.
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.
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.