26.03.2022 07:30 Lighthouse je velmi důležitý nástroj. Chcete vědět proč? Google jeho prostřednictvím totiž webařům radí jak weby technicky zlepšit. Je to nástroj pro analýzu technické kvality webu, která důležitá jak pro návštěvníky, tak pro umístění webu právě ve výsledích vyhledávání Googlu, například v oblasti Page Experience Obsah: Proč jej používat? Co umí analyzovat Jak jej používat Test rychlosti User Flows Příkazová řádka Pravidelné spouštění Používám jej hlavně pro analýzu rychlosti načítání, ale o webu umí podat daleko barevnější obrázek. Pokrývá přístupnost, SEO a další oblasti. Podívejte se na video „Lighthouse: Základní představení“. YouTube: youtu.be/2VIJU7NNKYw Velmi doporučuji pomocí Lighthouse testovat vaše weby a webové aplikace. A nejlépe to dělat pravidelně a automaticky. → Související novinka: V listopadu 2021 vyšel Lighthouse 9. Proč jej používat? Lighthouse vám pomůže najít problémy na úrovni designu a frontendového kódu, které nějakým způsobem škodí nebo mohou škodit přísunu uživatelů na web a jeho použitelnosti. Za výhody Lighthouse považuji především: Snadnou dostupnost komukoliv. Rychlé výstupy. Rozumné rady. Ale bavme se i o nevýhodách: Dává spíše základní přehled a bez pokročilejších nástrojů se v případě vážnějších auditů neobejdeme. Psal jsem například o nástrojích pro měření rychlosti. Výsledky auditu rychlosti webu jsou obvykle ovlivněné aktuálním výkonem počítače, na kterém jej spouštíme. Dělá jen syntetickou analýzu v jednom umělém uživatelském kontextu. Zdaleka nám tedy nedá obrázek o celé šíři problémů na naší uživatelské základně. Data o rychlosti od uživatelů nám částečně poskytne například jiný nástroj od Google – PageSpeed Insights. I s historií v čase pak tester PageSpeed.cz. Co Lighthouse umí analyzovat? Je toho hodně. Ukázkový report pro Vzhůru dolů. Vidíte celkové skóre a výsledky pro první oblast – performance neboli rychlost. Oblasti webařského pachtění, které Lighthouse pokrývá: Performance – rychlost načítání a výkon při vykreslování. Pro mě velmi důležité. Progressive Web App – jak se web drží doporučení pro progresivní webové aplikace. Best Practices – guláš osvědčených postupů mimo uvedené škatulky, například k bezpečnosti nebo upozornění na použití zastaralých technologií . Accessibility – přístupnost webu. SEO – technická připravenost webu na indexování vyhledavači. Jak jej používat? Ligthouse je balíček pro Node.js, proto způsobů jeho použití existuje fakt hodně: Chrome DevTools – stačí otevřít developerské nástroje Chrome a jít do záložky „Audits“. Online verze – web.dev/measure/. V dalších nástrojích – výstupy „majáku“ jsou dostupné z testů aplikací jako WebpageTest.org, SpeedCurve a dalších. K dispozici je seznam integrací. Příkazová řádka – právě jí vděčí za tolik možností použití: github.com/GoogleChrome/lighthouse. Test rychlosti Lighthouse se ve většině případu použití spouští na vašem počítači a dělá se jen jeden test, takže se výsledky testů mohou lišit podle momentálního vytížení. Hlavně v oblasti Performance. Test rychlosti Lighthouse v Google Chrome. V testech jsou na výběr dvě zařízení: Desktop – váš Chrome v aktuálním nastavení rozlišení, rychlosti připojení atd. Mobile – ve výchozím nastavení jde o „Emulated Nexus 5X“ se simulovaným zpomalením procesoru a rychlosti připojení, které odpovídá zhruba „3G fast“ z nastavení WebpageTest.org . Zajímavá možnost je v nastavení zpomalení – Throttling: Simulated – rychlejší test, navíc s lépe porovnatelnými výsledky. Znamená to, že se web otestuje na vašem aktuálním připojení i výkonu procesoru. Pak se čísla přepočítají, jak by asi vypadaly na slabším stroji. Tohle je myslím lepší používat. Applied – přesnější, ale pomalý test. Připojení a procesor se uměle zpomalí a pak teprve Lighthouse operuje. Jde o původní metodu. No a poslední možnost – Clear storage – před testy smaže obsah lokálních úložišť, aby Lighthouse dokázal zachytit prožitek úplně nového uživatele. Podívejte se na video „Lighthouse: Test rychlosti webu“. YouTube: youtu.be/zkbzYJ7xNKw User Flows, průchody uživatele službou V Lighthouse 9 autoři přidali možnost testovat nejen úvodní načtení, ale také průchod webem nebo webovou aplikací. Jmenuje se to User Flows. Lighthouse User Flows. K dispozici je to také v Chrome, koncem roku 2021 jen ve verzi Canary. Zde pod záložkou Recorder. Příkazová řádka Jak už víte, Lighthouse je možné nainstalovat na příkazovou řádku: npm install -g lighthouse Otestovat konkrétní web je pak snadné: lighthouse https://www.vzhurudolu.cz --view Tohle jen otevře Chrome nejprve pro otestování a následně pro zobrazení reportu . Další příkaz pak uloží výstupy do formátu JSON: lighthouse https://www.vzhurudolu.cz --output json --output-path vzhurudolu-report.json Související Nástroje pro analýzu rychlosti PageSpeed Insights Lighthouse Performance Score Videokurz o Lighthouse Zpracování JSONu pak je možné dělat automaticky. Toho je možné využít při pravidelném spouštění. Pravidelné spouštění Optimální varianta je samozřejmě pravidelné spouštění Ligthouse, tak abyste na auditování nemuseli myslet při nasazování nových verzí webů a aplikací. Kromě vlastního řešení postaveného na příkazové řádce tady máme několik hotových možností: Integrace do lokální automatizace – Gulpu ). Řešení pomocí CI – například pomocí Lighthouse CI. Hotové vizualizační nástroje jako SpeedCurve, Calibre, Treo a jim podobné. Shrnutí Používejte Lighthouse. Určitě! Pouštějte jej pravidelně a nejlépe automaticky. Držte se jeho doporučení, jsou velice rozumná. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
26.03.2022 07:30 Sledovací cookies jsou všude. Překvapilo mě, že i na menším webu není vlastně úplně jednoduché se jich zbavit. Asi víte, že od letoška mají weby povinnost si před ukládáním analytických „sušenek“ vyžádat souhlas uživatele. O cookies v roce 2022 jsem psal text, který průběžně aktualizuji. Zároveň se tam můžete dočíst, jak se můj postoj k problematice soukromí uživatelů na internetu za poslední měsíce změnil. Je to díky tomu, že jsem se věci začal více věnovat sám jako uživatel, ale také například díky kauzám Facebooku. Povedlo se mi web zbavit cookies třetích stran, a to dokonce i u Google Analytics. Jenže i přes to se zdá, že přítomnost Google Analytics souhlas uživatele pomocí cookie lišty vyžaduje tak či tak. První řešení: Google Search Console U hodně malých webů jako je třeba ten kamarádčin s nabídkou ubytování v Provence, jsem se rozhodl, že úplně odstraním komponenty třetí strany. V zásadě stačilo smazat kód Google Analytics a pár dalších. Jak získávám data o návštěvnosti? Stačí mi Google Search Console, které ukazují přístupy z ekosystému Googlu, včetně vyhledávání. Tyto typy webíků mívají velmi malou návštěvnost odjinud , takže to vůbec nevadí. Na Vzhůru dolů se ovšem bez nějaké základní analytiky neobejdu. Co když Google Analytics potřebuji? Proč potřebuji GA? Jednak se mi hodí znát hrubou čtenost článků a také zde prodávám knížky a videa, takže je to takový malý e-shop podporující mou publikační snahu. Zde není od věci například moci vyhodnocovat konverze. Google Analytics ale sbírají obrovské množství další dat, které nepotřebuji. Chtěl jsem tedy najít řešení bez ukládání cookies v prohlížeči, které by zachovalo alespoň základní data. Po delším pátrání se mi povedlo najít a ověřit tento kód pro verzi Universal Analytics, který cookies ani žádné jiné lokální úložiště nepotřebuje: Pokud vás to i tak zajímá, vysvětlím to více: Konfigurace client_storage zakazuje ukládat do cookies nebo jiného lokálního úložiště. anonymize_ip zapíná anonymizaci IP. Toto není pro potřeby cookie lišty nutné. Respektive, ehm, názory se různí… Pokud kód budete někam kopírovat nezapomeňte namísto UA-XXXXX-XX doplnit svůj identifikátor pro Google Analytics. Pozor, toto řešení je vhodné jen pro verzi Universal Analytics . Novější Google Analytics 4 sice do režimu „neukládej lokálně“ přepnete taky, ale bohužel pak v rozhraní nevidíte žádná data. Prý se ukládají, ale nezobrazují. Nepotřebujete pak cookie lištu? Teď vás zklamu. Cookies sice tohle řešení nevyžaduje, ale dále je možné uživatele přes data uložená v GA identifikovat: Řešení odesílá i data o uživateli, tj. s jeho nastavení prohlížeče etc. — Marek Lecián na Facebooku Takže i s tímto řešením cookie lištu potřebujete. Marek se ale zmínil, že možná nasdílí řešení, které ponechá možnost mít na menších webech dále GA a zároveň nemít cookie lištu. Moje řešení je navíc problematické v tom, že pochopitelně přijdete o část dat. O co jsem vypnutím client storage přišel? Pokud nemá analytický nástroj k dispozici cookie , nemůže samozřejmě navázat jednoho uživatele na návštěvy různých URL. Přijdete tak o délku trvání session , bounce rate , page views na jednoho uživatele . Dále budou všichni uživatelé bráni jako noví, ve zdrojích silně naroste „direct“… Hurá, narostla mi návštěvnost. Nebo ne? Srovnání měření s cookies a bez nich v Google Analytics. Bohužel zmizelo i počítání konverzí, což se trochu divím. Jde přece jen o zasílání událostí… Tohle mi zatím hlava nebere a budu to dál řešit. Google Analytics se tak stanou jednoduchým počítadlem návštěv webu . Dobře ale vidím návštěvy jednotlivých stránek a další data. Pro potřeby menšího webu, který něco vydělává, to je tedy díky ztrátě konverzí na hraně použitelnosti. Pro cokoliv většího a profesionálnějšího toto samozřejmě nebude dobrá cesta. Alternativní řešení pro analytiku Během svého pátrání po „cookieless Google Analytics" jsem narazil na řadu zdrojů. Nejvíc se mi líbilo řešení Helgeho Kleina, který v GA vypne lokální uložiště a klienta si identifikuje na straně serveru. To je fajn, pokud nechcet cookies, ale identifikace uživatele je opět možná: …cookie se jen vyměnila za IP uživatele . Což je z mého pohledu ještě horší než ukládat cookies. — Marek Lecián na Facebooku Jaké další alternativy jsou možné? Jiné měřiče jako Plausible, Fathom, Matomo, Simple Analytics… Než se pro ně nadchnete, prosím ověřte si, zda opravdu neidentifikují uživatele, ať už pomocí cookie nebo fingerprintingem. Do budoucna bude jistě zajímavá server-side analytika nebo pokročilá analýzy serverových logů. Audit komponent třetích stran Na Vzhůru dolů jsem ale komponent třetích stran používal daleko více než jen Google Analytics. Jakýkoliv obsah tahaný z cizích domén může ukládat sledovací cookies, takže člověk musí být obezřetný. Jak jsem postupoval? V prvé řadě jsem si udělal seznam všech třetích stran. Už ten mě vlastně svou délkou překvapil: Cast Cloudinary Codepen Disqus Facebook Twitter Vimeo YouTube Dále jsem si udělal analýzu vkládaných cookies. Pro oddělení špatných od dobrých cookies jsem použil nástroje cookieserve.com a cookiebot.com, ale neobešel jsem se bez poctivého koukání do DevTools prohlížeče nebo procházení „Cookie Policy“ poskytovatelů komponent. DevTools. Hlavní pracovní nástroj sušenkového detektiva. Připomínám, že cílem bylo obejít se bez cookie lišty, takže jsem komponenty rozdělil do několika kategorií a podle toho s nimi naložil. Komponenty, které musejí pryč Zde jsou tři nejzlobivější služby, které jsem nakonec bez náhrady odstranil. Disqus Služba, která pod každý článek vkládá komentáře. Dříve poměrně užitečná, později se z toho stávalo stále větší peklo díky přibývajícím reklamám , a to i přes fakt, že jde o placený produkt. Přínos pro Vzhůru dolů nebyl malý, takže jsem komponentu nechával žít. Říká se, že patří Číňanům, ale podle všeho to pravda není. Pohled na ukládané cookies a do jejich cookie policy mě ale přesvědčil o tom, že Disqus půjde pryč. Ukládají toho hodně a předávají to spouště firem. To nechci. Komentáře jsem v tuhle chvíli odstranil úplně. Facebook Tuhle firmu vnímám jako vedoucího jezdce v pelotonu zneužívačů soukromí lidí. Kdysi jsem jim platil nějaké drobné za kampaně podporující naše kurzy a videa, ale od dob provalení Facebook Papers jsem se rozhodl, že tam sice zůstanu přítomný, ale peníze té firmě platit nebudu. Analytiku nepotřebuji a šmírovací pixel od Facebooku jsem tedy ze Vzhůru dolů odstranil. YouTube Embedy ukládají a šmírují a to i v případě „nocookie“ domény, která sice neukládá cookies, ale do local storage, což je to z pohledu zákona totéž. YouTube jsem z článků úplně odstranil spolu s dalším vkládaným obsahem ze sociálních sítí. Je možné to nahradit obrázkem s odkazem. Já si zatím vystačil s pouhým odkazem na sociální síť. Firmy v téhle kategorii mají leccos společné. Celkově špatné renomé v oblasti soukromí, podivnou cookie policy a nemožnost dohledat cokoliv kolem omezení sledování ve vývojářské dokumentaci. Komponenty nastavená jako „do not track“ Další kategorii embedů bylo možné je ponechat, protože umožňují nastavit režim bez sledování. Poskytovatelé zařazení v této kategorii projevili alespoň snahu. Vimeo Pro vkládání videí do stránek používám placený tarif, takže mě překvapilo, že do prohlížečů ukládají nemalé množství cookies. Umožňují ale zakázat analytické cookies pomocí přidání parametru dnt=1. Viz například: Trochu bolestivé je, že člověk pak přijde o všechny statistiky zobrazení videí. Je podivné, že úplně o všechny. Viz Google Analytics, které bez cookie zobrazí alespoň nějaká data o zobrazení stránek. Zatím jsem to vyhodnotil, tak že statistiky o videích nutně nepotřebuji, ale je možné, že mi to dlouho nevydrží. Twitter Sociální síť plná tweetů umožňuje zrušit sledování dvěma způsoby. První je atribut data-dnt v kódu embedu: Druhá je meta značka v HTML: Snaha byla, že ano. Zatím jsem ale neověřil, zda to funguje, protože jsem se rozhodl vkládaný obsah odstranit úplně. Pro jistotu. Ale je pravda, že Twitteru v tomto věřím výrazně více než například Facebooku. Asi tak o parník. Poskytovatelé, kteří jsou v pořádku Tohle je nejlepší skupina. Patří do ní poskytovatelé vkládaných komponent, kteří pro poskytování služby nepotřebují ukládat cookie a tedy sledovat uživatele. Cloudinary – původně mě vcelku vyděsili, protože v návaznosti na jejich doménu jsem u Vzhůru dolů viděl řadu uložených cookies, včetně analytických. Ale tyto cookies dostanou jen přihlášení uživatelé, tedy ti, kteří Cloudinary využívají na svých webech. Čtenáři webu už ale mají prohlížeč čistý jako studánku. Cast – poskytovatel přehrávače pro podcast, je v pohodě. Neukládá žádné sušenky. Codepen – poskytovatel vkládaných ukázek, se také zdá v pořádku a jiné než nutné cookies neukládá. Pojďme to shrnout V tabulce následuje katovna – seznam komponent i s mým subjektivním hodnocením. Služba Hodnocení Poznámka Cloudinary ★★★ bez cookies CodePen ★★★ jen funkční cookies Cast ★★★ bez cookies Twitter ★★☆ umožní „do not track“ Vimeo ★☆☆ umožní „do not track“, ale přijdete o měření Google Analytics ★☆☆ bez identifikace uživatele to nejde YouTube ☆☆☆ sleduje tak či tak Disqus ☆☆☆ sleduje Facebook ☆☆☆ sleduje jak divý Tuhle analýzu jsem dělal hlavně pro Vzhůru dolů, což je zčásti volnočasový projekt. Problematikou soukromí se nezabývám a nejsem na ni expert, takže si to vše ověřte u svých vývojářů a advokátů. Neberte to jako návod, jak postupovat u větších a komerčních projektů. Spíše jako pomocníka pro jiné „hobbíky“ a ty, kteří usilují o provozování webu bez ukládání sledovacích cookies. Berte ten text také jako zprávu o stavu soukromí na internetu, o tom co stojí za vlnou vášní kolem cookie lišty. Česko bylo asi jednou z posledních zemí EU, které povinnost cookie lišty zavedlo. Přesto mám pocit, že ani zahraniční poskytovatelé zatím většinou webařům příliš vstříc nevycházejí. Možnost „do not track“ je vzácná, dokumentace chybí a analytické nástroje na tuhle situaci zatím vůbec nejsou připraveny. Jsme na začátku cesty. Ale vidím to tak, že prakticky každý web může pro ochranu soukromí svých uživatelů už teď něco udělat, pokud chce. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
26.03.2022 07:30 Nástroj pro audit webu Lighthouse vyšel v deváté verzi. Musím tomu věnovat alespoň stručnou poznámku, protože přináší minimálně dvě zajímavé novinky. No a taky je to už tradice. Na Vzhůru dolů se tomuhle nástroji věnuji pravidelně. Psal jsem zápisky například k verzi 8 nebo 6. Nový Lighthouse 9 v Chrome. V devátém vydání přinesli autoři nástroje z Googlu zejména razantně předělané rozhraní výsledků testu, včetně těch na PageSpeed Insights, ale hlavně User Flows. User Flows, průchod uživatele službou Velkou nevýhodou Lighthouse byla možnost testovat jen první načtení stránky. Ano, určité výjimky existovaly – například při testování v Chrome bylo možné nastavit, zda vytvořit audit s plnou nebo prázdnou keší prohlížeče. User Flows umožňují skriptované testování. Lighthouse tak můžete pouštět v rámci jednoho testu vícekrát – ať už jde o načtení různých stránek nebo spouštění na základě interakcí na stránce. Nově tak budete moci testovat například tyto scénáře: Průchod uživatele webem – testem si nasimulujete procházení uživatele například nákupním procesem na e-shopu. Interakce uživatele se stránkou – Lighthouse nemusíte pouštět jen při úvodním načtení, ale také například po kliknutí na element nebo scrollování. Posbíráte metriky a vzniklé problémy. Fixnete to. Pustíte test znova. To se mi líbí. Dosud bylo možné skriptovat testy rychlosti například pomocí proprietárního rozhraní skriptů ve WebpageTestu. Ale přítomnost v Lighthouse je důležitá, jde o nejpoužívanější nástroj pro testování webů. Navíc to zde udělali pomocí už poměrně standardizovaného API pro ovládání Chrome zvaného Puppeteer. Autoři Chrome nyní ve verzi Canary testují možnost si uživatelský proces naklikat pomocí nástroje Recorder. I tohle vypadá zajímavě. Hlavně pro ty, kteří raději klikají než píší javascriptový kód. Nové rozhraní výsledku testu Další velkou změnou je vylepšené rozhraní výsledků testu. Ukažme si to na příkladu testu oblasti Performance pro úvodní stránku Vzhůru dolů: Lighthouse User Flows. Můžete tady vidět hned několik novinek: Celkové skóre je trochu menší a vedle je nově screenshot hotové stránky. To abyste lépe viděli. Viděli, jak vypadala stránka při dokončení testu. To se hodí, protože Lighthouse často testuje web ve stavu, v jakém jej vy nevidíte – například s cookie lištou. Jednotlivé metriky, ze kterých se skládá celkové skóre , jsou nyní větší. I to hodnotím kladně – zaměří to pozornost lidí na správné místo, tedy nikoliv LPS, ale konkrétní ukazatele, které je potřeba optimalizovat. V každém testu, včetně toho na PageSpeed Insights, je nyní lépe vidět nastavení testu - na jakém zařízení a odkud proběhl. To je důležité pro pochopení rozdílů mezi Lighthouse testy, které mohou být i dost velké. Všechny novinky se rovnou projevily také v PageSpeed Insights, asi nejpopulárnějším nástroji pro jednorázový test rychlosti webu. Nově je najdete na adrese: pagespeed.web.dev PageSpeed Insights dávají nově také větší důraz na metriky od uživatelů z Chrome UX Reportu. To je bezpochyby chvályhodné, protože to je nejlepší způsob, jak se zdarma k číslům o rychlosti dostat. Na druhou stranu – metriky posbírané od uživatelů jsou k dispozici jen pro více navštěvované weby, takže nové pojetí výsledků bude řadu lidí mást. V oblasti „web performance”, rychlosti webu, jsou laici obecně dost v pasti mezi srozumitelností podávaných informací a jejich přesností. Ale to je na jiné povídání a jiný článek. Výsledky testů z Lighthouse 9 už také uvidíte v našem testeru rychlosti na PageSpeed.cz. Všechny novinky z Lighthouse 9 si můžete přečíst v changelogu. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
19.03.2022 12:45 Pojďme už lišty nechat lištami a zamyslet se nad důvody, proč vlastně my webaři máme řešit soukromí uživatelů. Chtějí to uživatelé nebo se jen EU zbláznila? Zkusme přijít na to, jak asi bude vypadat soukromí na webu z pohledu tvůrce webů za pár let. Kdy přijde norma ePrivacy a co to vlastně je? Zakáže nám EU po pomazánkovém másle i Google Analytics? Přejeme vám příjemný poslech. Podcast MP3 ke stažení My webaři si vždycky nějak poradíme. Zvládli jsem GDPR, teď i cookie lišty. Přesto je pro nás téma soukromí uživatelů stále plné otazníků. Aktuální spory EU s americkými korporacemi ohledně používání Google Analytics nebo Google Fonts, výhružky Facebooku, že může opustit evropský trh to ukazují. Do toho vstupují různé postoje různých advokátů. Situace ohledně soukromí se prostě pro běžného webaře stále více komplikuje. V budoucnu leccos může řešit a zjednodušit norma ePrivacy, opět od EU, ale nyní je, alespoň podle Martina Kopty, řada na technologických gigantech, zejména výrobcích prohlížečů. Přes to všechno jsou zde slibné signály od českého Úřadu pro ochranu osobních údajů, který podle Petry Dolejšové sice začne s kontrolami, ale nebude řešit malé ryby a i u velkých bude podstatné, aby ukázali snahu situaci řešit. Takže nervozita je, hlavně u menších webů, možná zbytečná a situace nám dává možnost se ještě chvíli v klidu učit chápat problematiku a třeba nevyžadovat ze soukromí uživatelů něco, co nakonec nepotřebujeme. Hosté Petra Dolejšová Petra je advokátka na volné noze a zabývá se právem v marketingu, e-commerce, GDPR a médii. Říká o sobě, že boří mýty o nudných právnících a že z cookie lišt už jí krapet píská v uchu. Twitter, LinkedIn, petradolejsova.cz Martin Kopta Martin je jeden z nejzkušenějších českých UXáků. Nyní Product Manager v Tipsportu. Board member v Asociaci UX. Budoucí webaře učí na FIS VŠE v Praze. Twitter, LinkedIn O čem mluvíme? Proč potřebujeme řešit soukromí na webu? Chtějí to vlastně uživatelé? Načítání dat o provozu jako senzor v prohlížečích, který můžeme povolit. Je to o hodných a zlých firmách nebo o možnosti zakázat. Zbytečná démonizace cookies a svobodná vůle uživatele. Odkud jdeme a kam směřujeme? GDPR, cookie lišta, ePrivacy Poněkud otravná forma cookie lišty Někdy možná přehnaně opatrný přístup advokátů ePrivacy a budoucnost soukromí v EU. Kdy stav doženou tech giganti? Kauza Google Fonts a Google Analytics. O co jde v boji EU s korporáty z USA? Alternativy ke Google Analytics. Postoj Úřadu pro ochranu osobních údajů. Snaha se prý cení. Bude možné řešení bez právníků pro malé ryby? Prý stačí zdravý selský rozum. Co se budeme muset naučit my, webaři? Dále na Vzhůru dolů Jak jsem web zbavoval šmírovacích cookies Cookie lišta GDPR Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Pište nám na e-mail podcast@vzhurudolu.cz.
12.03.2022 18:30 Po čase máme znovu vypsané termíny dvou půldenních školení rychlosti webu. Proběhnou 15. a 17. února online a tímto vás na ně zvu. Na školeních vám ukážeme tipy a triky, které používáme v praxi při práci pro klienty PageSpeed.cz – od velkých jako je Livesport, po menší e-shopy jako Čisté dřevo nebo Smarty.cz. Google Page Experience bude od letoška ovlivňovat také umístění desktopových výsledků vyhledávání, takže téma rychlosti je dobré neopomíjet. První den: měření, procesy a načítání Spolu se podíváme na celý proces optimalizace. Připravil jsem jej pro vás do obrázku: Vezmeme si zkušební web a projdeme celým procesem, kdy na konci vypadnou příležitosti k úpravám, které jsou efektivní a zároveň mají velký dopad. Bavit se budeme hlavně o procesu, metrikách a rychlosti načítání. Základy se zdržovat nebudeme, ty si zájemci dostudují ve videu, které všichni účastníci dostanou v ceně školení. Tento půlden je určený vývojářům, ale zvládnutelný je také technicky vybavenějšími marketéry. → Více o školení Rychlost webu 1: načítání. Druhý den: fungován prohlížeče a rychlost v něm Michal Matuška na mě naváže a půjde do hloubky testování. Stránka se vám může načíst rychle, ale JavaScript nebo třeba CSS animace uživatelský zážitek kazí. Michal s vámi bude trávit hodně času v Chrome DevTools, konkrétně záložce Performance, ale i dalších nástrojích v DevTools, o kterých možná ani nevíte. Půlden s Michalem je určený vývojářům, od mírně pokročilých až po ty pokročilejší. Na obou školení jsme připravení zabývat se různými devstacky, od klasiky s PHP až po moderní frameworky jako je React, Next.js… → Více o školení Rychlost webu 2: prohlížeč. Obě školení v jednom balíčku Pokud vás zajímají oba půldny, neváhejte si objednat balíček Rychlost webu. Ušetříte 490 Kč. Účastníci v ceně školení dostanou záznam. Kapacita je limitovaná a zatím nemáme v plánu vyhlásit další termíny.
10.03.2022 00:16 Jako každý leden jsem i letos podlehl nutkání ohlédnout se za technickými novinkami roku 2021, zavzpomínat, uronit slzu pro Internet Explorer… mám prostě sentimentální náladu. Je to ostatně tradice, takhle jsem přemítal už nad roky 2020, 2019, 2018, 2017, 2016 a 2015. Letos se navíc chci zamyslet, co se mi na Vzhůru dolů povedlo a kam to celé má směřovat – nastavit si nějaké plány do roku 2022. Chci se totiž pořádně zasmát, až budu své plány za rok vyhodnocovat. State of CSS 2021 Ankety mají své mouchy, ale State of CSS se vyplatí sledovat. V tomto ročníku se jí zúčastnilo na 9 tisíc vývojářek a vývojářů z celého světa. Na výsledcích je toho zajímavého docela dost, ale nejstručnější je shrnutí: Nejčastěji nově používaná funkce: CSS Comparison Functions Nejvyšší spokojenost: PostCSS Nejvyšší zájem o naučení: CSS Modules Umístění CSS Modules pro mě bylo záhadou, protože v podobě komponenty pro zpracování CSS do Webpacku jde o poměrně starou věc. Vysvětlení nabídl Aleš Roubíček na Discordu Frontendisti.cz: Zájem může budit tento proposal, který nabízí nativní podporu v platformě. Jde o zmatení, kdy si lidé pod jedním názvem představují dvě různé věci. Vlnu zájmu ale nejspíš vyvolala možnost nativní podpory. „State of rychlost“ 2021 Škoda, že nemáme podobnou anketu zaměřenou na optimalizaci rychlosti webu, moje nejoblíbenější téma. Budeme se tím pádem muset spokojit s mým vysoce subjektivním výběrem. Kvalita stránky aneb Page Experience v Google Search Console. Report, který od loňska mnohým dělá vrásky. Tohle jsou novinky roku 2021, které dle mého oborem rychlosti nejvíce zahýbaly: Začátek hodnocení webů podle Google Page Experience pro mobily, od letoška i pro počítače. CSS vlastnosti size-adjust pro typografii a aspect-ratio nebo image-set pro obrázky. Lighthouse verze 9 a nové PageSpeed Insights. Podpora obrázkového formátu WebP ve všech moderních prohlížečích. Kolega Michal Matuška mě ještě upozornil na méně viditelné, ale do budoucna zásadní pohyby v technologiích – vylepšování ladění rychlosti v DevTools, containment v CSS nebo nativní lazyloading ve všech prohlížečích a úprava jeho „boundries“. Nezapomněli jsme na něco? O rychlosti jsem toho ale loni napsal více, nejen pro Vzhůru dolů, ale také na blog PageSpeed.cz. Nejčtenější články na Vzhůru dolů Jednou ročně se dívám, co vás zajímá, abych věděl o čem zhruba psát. Ať nepíšu jen tak, do větru. And the winner is… CSS grid. Ale až po flexboxu. Výsledky pro rok 2021 nejsou překvapivé. Z obsahu, který jsem nově vytvořil nebo významně aktualizoval, je to tento: Příručky pro flexbox a grid . Obrázkový formát Webp . Pozornost upoutal také významně aktualizovaný checklist nebo text o cookie liště pro rok 2022. Z těch, které jsem neaktualizoval vládnou základy CSS a HTML: CSS jednotky, Media Queries, metodika BEM a text o tlačítkách . Nejposlouchanější díly podcastu Některé díly podcastu nám vystřelily z běžných čísel poslechovosti. Diskuze o Tailwind CSS má ke dnešku kolem 5 300 stažení. Díl o výběrových řízeních s Janem Řezáčem šplhá k číslu 4 900. Z ostatních vás zaujalo hlavně povídání o microfrontends, které má zatím 2 700 stažení. Co je na Vzhůru dolů od loňska nového? Pracuji na přerodu do online světa. Udělali jsme několik online školení, dále je nabízíme firmám, ale podstatná jsou pro mě do budoucna hlavně videa. Aktuálně si můžete za rozumnou cenu koupit kolem 22 hodinových záznamů z webinářů, upravených pro potřebu sledování z pohodlí práce nebo domova. Všechny najednou dostanete s 20 % slevou. Ve zkušebním režimu je k dispozici předplatné pro firmy. Zároveň jsme nově naprogramovali uživatelské účty, které umožní další rozvoj výše uvedeného. Tohle je i pro mě nové a tak velmi vítám každou zpětnou vazbu. Plány na rok 2022 „Pokud chcete Boha rozesmát, řekněte mu o svých plánech“ říká se. Nějaké menší plány si ale vždycky dělám a není důvod, abych si je nechával pro sebe. V nejhorším se s pánem Bohem můžeme na konci roku zasmát i my, že? Kniha o CSS layoutech – aktuálně jsem ve fázi připomínek k obsahu a během několika týdnů až měsíců vám o ní řeknu víc. Sledujte moje sociální sítě. Další rozvoj videí – až dokončím knížku, mám v plánu mocně přidávat nový obsah nejen k placeným videím, ale také na YouTube kanál. Předplatné chci časem rozšířit i mimo firmy. Dále budu rozvíjet i půldenní nebo denní živá školení – pro veřejnost online, pro firmy dle domluvy i prezenčně. Mimo Vzhůru dolů budu samozřejmě rozvíjet svoj hlavní obživu – konzultace k rychlosti webu a komunitu Frontendisti.cz. Ale to už je na jiné články. Přeji vám vydařený rok 2022! Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
