28.03.2024 14:30 Od ledna 2022 je i v Česku nutné od uživatelů žádat souhlas s ukládáním personalizačních a analytických cookies do jejich prohlížečů. Stačí když na webu máte základní analytiku, např. Google Analytics, a máte povinnost před uložením cookies žádat uživatele o souhlas pomocí takzvané cookie lišty. Pravděpodobně jste to už řešili, pravděpodobně to už máte vyřešené. Pokud spravujete velké weby, tím spíše. Pokud jste to to nechali až na nynější dobu, čtěte. Text budu spíše cílit na majitele menších webů nebo ty, kteří zatím neměli potřebu to řešit. Dole v textu odkazuji na všemožné zdroje, takže to můžete dostudovat. V textu základy řešit nebudu, spíše otevřu témata, která mě zaujala a jinde jsem je nenašel. Předem říkám, že se v téhle oblasti nepovažuji za odborníka – pokud se webařinou živíte, nasazení na weby konzultujte s advokáty , případně také experty na UX a marketing. Můj pohled je víceméně pohledem „hobbíka“, člověka, který spravuje pár webů, ale denodenní vývojařinou se neživí. Než se do toho pustíme, velmi rád bych zde nejprve ventiloval svůj celkový osobní dojem. Uživatelé platí soukromím za to, že my šetříme čas a peníze Ještě na podzim '21 jsem nechápal, proč bychom měli už i v Česku na všechny weby nasazovat cookie lištu. GDPR už máme vyřešené a od roku 2015 nějak i v Česku řešíme „EU cookies“. Vždyť přece stačí, že uživatele informujeme… Čím více jsem se do problematiky ponořoval, tím více dávám za pravdu zákonné úpravě, která platí od ledna. Jasně, forma je fakt nešťastná. Cookie lišta je zlo. Cookie lišta je zlo pro uživatele i provozovatele, takže se těším se na normu ePrivacy, která to přesune do nastavení prohlížeče. To soukromí ale fakt musíme řešit. Jenže jak? Nepoužívat a nešmírovat. Za analytické nástroje nechat platit toho, kdo data měří a nenechávat to na ceně uživatelského soukromí lidí, kteří ani nevědí co schvalují. – Honza ChemiX Černý na Twitteru Představte si situaci že přijdete do obchoďáku a u vchodu vám bez ptaní dají do kapsy krabičku, která bude ukládat vaši polohu – jaké obchody jste navštívili, co jste tam dělali. Dají vám ji s úsměvem a s tím, že příště ta data použijí pro zlepšení vašeho nákupního prožitku. A že je možné, že ta data někomu prodají. Pro vaše dobro. Líbilo by se vám to? Mně ne. Ale na webu je to úplně běžné: Přijdete, dostanete cookie od Google Analytics, která sleduje váš pohyb webem. Pokud je na webu vložené YouTube video, cookie se ukládá nejen pro úpravu obsahu a reklamy nejen na navštíveném webu, ale také na YouTube a také na jiných webech. Taková komentářová služba Disqus se s tím už vůbec nemaže. V Cookie Policy přiznává jen zlomek cookies, které reálně ukládá, a rovnou říká, že data vašich uživatelů posílá i dalším firmám. To všechno proto, že na webech mocně využíváme služby třetích stran. Zvykli jsme si na to. Šetří nám to jako webařům čas a peníze. Jenže nic jako komponenta třetí strany zdarma neexistuje. I ty placené mají daleko vyšší cenu než si myslíme. Za náš ušetřený čas a peníze platí uživatelé svým soukromím. Jejich data, informace o pohybu našim webem využíváme nejen my, ale i úplně cizí firmy. Někomu sledování nevadí. Ale vědět to předem je asi dobré, ne? Můj postoj je silně ovlivněný studiem třetích stran, které jsem dosud běžně používal zde na Vzhůru dolů a které pravděpodobně používáte taky – Google Analytics a vkládaný obsah od YouTube, Twitteru, Facebooku… Jejich přístup k soukromí je prostě o dost horší, než jsem si myslel. Takže – pojďme soukromí řešit. Pojďme jej řešit bez paniky a nadávání na zákon nebo EU. Pojďme vzít ty cookie lišty jako příležitost se něco naučit a zlepšit web jako celek. Jednou třeba lišty dáme pryč a zůstanou nám, doufám, weby, které více dbají na soukromí lidí. Neprodávají jejich duši, aniž by to jako návštěvníci věděli. Teď už se pustím do praktických rad, co s tím dělat na malém webu. Dávám sem svůj stav mysli. Nutné základy Nejprve pár textů a videí, které se vám mohou hodit při studiu základů z pohledu právního, marketingového nebo UX: Právní pohled: Lupa.cz, od Petry Dolejšové nebo Dostupného advokáta. Marketingový pohled: House of Řezáč. UX pohled: Ondřej Ilinčev. Můj pohled k rychlosti webu na PageSpeed.cz. Komplexní webinář organizovaný Pavlem Ungrem. Diskuze o cookies u Frontendistů. Které cookies jsou nově se souhlasem a jak zjistím, že je na webu mám? Tohle jste už asi četli stokrát, ale pro jistotu to opakuju. Pravděpodobně na webu používáte cookies nutné např. pro přihlášení nebo uložení nastavení jazyka . Touto kategorií se vůbec trápit nemusíte, dále je možné je bez souhlasu v podobě cookie lišty používat. Dejte si pozor na tyto typy cookies: reklamní analytické personalizační K těmto potřebujete od 1. ledna 2022 souhlas. Nástroje, které pomáhají odhalit, které cookies na webu potřebujete: CookieBot.com CookieServe.com Nejdříve dobrá zpráva – analyzovat těmito nástroje je jednoduché. A teď ta špatná. Ani na Vzhůru dolů, takže strukturou menším webu, mě to nenašlo zdaleka všechny cookies, které bych měl „řešit“. Navíc jde samozřejmě o statickou analýzu webu, takže např. komponenty načítané líně nebo na akci uživatele, to neodhalí. Prostě bez zkoumání uložených cookies ve vývojářských nástrojích prohlížečů a čtení „Cookie Policy“ dodavatelů třetích stran se asi neobejdete. Zákon praví… Z jaké změny v zákoně vlastně celý ten humbuk vychází? Každý, kdo hodlá používat nebo používá sítě elektronických komunikací k ukládání údajů nebo k získávání přístupu k údajům uloženým v koncových zařízeních účastníků nebo uživatelů, je povinen tyto účastníky nebo uživatele předem prokazatelně informovat o rozsahu a účelu jejich zpracování a je povinen nabídnout jim možnost takové zpracování odmítnout. Tato povinnost neplatí pro technické ukládání nebo přístup výhradně pro potřeby přenosu zprávy prostřednictvím sítě elektronických komunikací nebo je-li to nezbytné pro potřeby poskytování služby informační společnosti, která je výslovně vyžádána účastníkem nebo uživatelem. – Zákon o elektronických komunikacích To je vše. Složitě napsané, ale překvapivě krátké, že? Víte co, pojďme se tedy nejprve zkusit na to celé vykašlat. Není možné se na to vykašlat? Osobně vám to nedoporučuji. Cookie lišta je otrava. Ano, to je. Víte jaká je nejlepší cookie lišta? Žádná! – Z ohlasů na Twitteru U malinkých webů asi nemá smysl propadat panice, ale u větších jsou postihy za nedodržení zákona samozřejmě udělovány od úřadu ÚOOU. Advokáti říkají, že vás nejprve úředníci musejí vyzvat k nápravě, takže i kdyby na vás „vlítli“, máte čas to opravit. Pokuty by prý neměly být likvidační. Kontrolu provádí @UOOUCR, sankce dává samozřejmě podle uvážení, ale horní hranice je vždycky předpisem limitovaná, navíc nesmí být nepřiměřená a likvidační. – Petra Dolejšová na Twitteru Jen pro pořádek – je potřeba odlišit GDPR a nový odstaveček zákona týkajícího se cookie lišty. Píšu tady o tom druhém. Pokuty za porušování GDPR jsou myslím úplně jiná písnička. GDPR by už ale měli mít v pořádku všichni. A dávno. Lze nemít cookie lištu a zároveň dodržovat zákon? V prvé fázi jsem u všech svých webů přemýšlel nad tímto nejčistším řešením. U miniaturních webů je to realizovatelné například tím, že přestanete měřit analytikou, která nějak identifikuje uživatele. Nebo analytiku opustíte úplně a vystačíte si například s daty z Google Search Console. Pokud potřebujete jakékoliv běžně měření typu Google Analytics, cookie lištu musíte mít. Pokud do webu vkládáte jakoukoliv jinou komponent třetí strany , pak vysoce pravděpodobně cookie lištu musíte mít. Touto cestou se kdysi vydaly i velké weby jako Github. Když si ale ke dnešku prohlédnete cookies, které vám Github a jimi používané third-parties uloží na stránce tohoto oznámení, vůbec není jisté, zda byli schopní tu proklamovanou čistotu udržet. Takže – nezajímá vás návštěvnost a chování návštěvníků, nepotřebujete kód třetí strany? Lištu nepotřebujete. Jinak nejspíš ano. → Více popisuji v textu o zbavování webu cookies třetích stran. Lze mít Google Analytics bez ukládání cookies? Ano, Google Analytics můžeme zakázat ukládání do lokálních úložišť: 'client_storage': 'none', Ztratíte ale přehled o počtu shlédnutých stránek na jednu návštěvu a vše související. Navíc se nezbavíte povinnosti mít cookie lištu, protože je dále možné identifikovat uživatele na straně dat z analytiky. Celé řešení pro GA popisuji v textu o zbavování webu cookies. Taky je ale možné nepoužívat Google Analytics, že ano? Alternativy ke Google Analytics Popularitu teď nabírají alternativní nástroje jako je Matomo nebo Fathom a další. Z toho co jsem pochopil z komentářů analytiků, kterým věřím… Je to past. Tyhle nástroje často nepoužívají cookies, to je fajn, ale zároveň uživatele identifikují jinak, nejčastěji kombinací různých faktorů, takže fingerprintingem, což je z pohledu soukromí úplně to samé. Simple Analytics, další alternativu, údajně bez fingerprintingu, ale bez sledování uživatele napříč webem, doporučovali další lidé, jako např. Jan Smitka na Twitteru. Zdá se mi, že ani přes alternativní řešení ke GA cesta nevede. GA navíc mají velkou výhodu – jsou de facto průmyslovým standardem. Další možností je zaměřit se na server. Serverová analytika je věc, která má dle mého budoucnost, ale zatím nevidím snadné a přímočaré řešení. Co další komponenty třetích stran? Musím se přiznat, že právě tahle část analýzy, kterou jsem si dělal pro Vzhůru dolů a další menší webíky, mě přesvědčila, že soukromí na webu je fakt problém. A že dodavatelé komponent třetích stran dělají většinou vše proto, aby to problém zůstal. Pojďme si projít pár third-parties, které jsem zkoumal. Google Fonts: názory se různí. Nějakou personalizaci dělají, ale spíše na základě lokality. Ve FAQ píší, že „no cookies are sent“. Vladimír Smitka ale říká, že „Google fonty sbírají data o koncovém uživateli“ a tak je při přísném výkladu potřeba souhlas. Nebo si fonty stáhnout lokálně. Vložení obsahu z Twitteru: Ukládají cookies, personalizační i reklamní, tzn. souhlas by myslím standardně byl potřeba. Je to však možné vypnout a chránit soukromí uživatele, viz nápověda. Vložení videa z YouTube: Standardně souhlas potřebujete, ukládají reklamní cookies. Embedy lze servírovat z domény youtube-nocookie.com a cookies se neuloží dokud uživatel video nepustí. Tzn. pak není potřeba souhlas? Nevím. Vladimír Smitka píše, že ta cookieless doména je fejk. Facebook embed i Facebook pixel: Ukládají cookie jak diví a nikde jsem nenašel možnost to změnit. Komentáře Disqus: Ukládá cookies jak divý, v Cookie Policy přiznává jen část a ještě vesele prohlašuje komu všemu ty údaje cookies nepředává. A to je prosím placená služba! Zde budu muset při pročišťování webu od nepořádných služeb třetí strany začít. Můj celkový dojem? Pardon, ale asi budu blinkat… Takhle špatné jsem to nečekal. Čest výjimce, čest Twitteru. → Související: Jak jsem dělal analýzu cookies třetích stran. Hodně se mi líbí řešení, kdy si souhlas k vložení obsahu vkládaném třetími stranami vyžádáte až při najetí na tento obsah. Připravené je to např. v komponentě Iframe Manager. Iframe Manager. Chce opravdu přehrát tohle video? Počkejte… i za cenu šmírování? Celé moje vlákno k problematice third-parties je na Twitteru, pokud by vás to zajímalo doplněné o cenné názory dalších. Dobře, teď už vím, že s vysokou pravděpodobností budu i na Vzhůru dolů nějakou lištu potřebovat. Jak to ale implementovat? Řešení souhlasu s Google Tag Managerem Martin Kolář udělal o tomto jednoduchém řešení pěknou přednášku. YouTube: youtu.be/KW7lNaLfu9c Martin ukazuje řešení vhodné právě pro jednoduché weby a vlastní implementaci lišty. Veškeré komponenty třetích stran je ale nutné vložit právě přes Google Tag Managera: window.dataLayer = window.dataLayer || ; function gtag gtag ; V GTM se pak nastaví souhlas pro konkrétní kategorii v nastavení kontejneru. Více je v přednášce, ale upozorňuji, že to je opět vhodné spíše pro menší weby. Přes Google Tag Manager je pak možné i nastavit nesouhlas se vším, nechat přes nastavení GTM pak např. Google Analytics běžet v Consent Mode a uživatele netrápit cookie lištou. Řešení pro cookie lištu třetích stran Pro Vzhůru dolů jsem zvolil řešení cookie lišty pomocí Cloudflare Zaraz. Jde o komplexní řešení pro správu komponent třetích stran na vašem webu, včetně jednoduchého consent-managementu. Pokud už nyní máte web na Cloudflare, je to vcelku přímočaré. Ušetří vám to energii za řešení zobrazování samotné cookie lišty. Ale i tak potřebujete nějaké analytické znalosti, sám jsem se docela zapotil, abych to zprovoznil. Dále využiji možností získaných od kolegů: CookieConsent: Malý plugin i s ukázkovým kódem od Vladimíra Smitky. CookieConsent.com se jmenuje stejně, dělá to podobné věci, ale je to něco jiného. Complianz : Kolega Dan Střelec mi píše: „V základu je zdarma, nasazení pár hodin hodina práce . Pokud potřebujete ukládat souhlasy, je třeba placená verze . Větší řešení jsou například Cookiebot: V ČR velmi populární. Dan Střelec: „Neplacená verze je pouze do 100 stránek/web, od 500 stránek/web stojí €9/měsíc.“. Zajímavé srovnání řešení, hlavně pro weby běžící na WordPressu, připravili v eHub.cz. Větší weby využívají velmi robustní OneTrust , Didomi nebo Funding Choices od Google. Cookie lišta a rychlost webu Na blogu PageSpeed.cz jsem psal o trablech z pohledu rychlosti webu, které může nasazení cookie lišty způsobit. Svoje jsme si užili s OneTrust, Didomi i Google Funding Choices. Nicméně vždy jsme nalezli cestu k optimalizaci. Pravidlo číslo jedna? Načtěte tu lištu co nejdříve: Mezi vývojáři se rozšířil mýtus, že vykreslení obsahu typu cookie lišty se musí odložit co nejvíce to jde. Nejde přece o hlavní obsah stránky. Jde ale o jednu z velkých chyb, které můžete při implementaci lišt udělat. Co dál? Po počáteční negaci beru ale celou věc kolem cookies od roku 2022 za velkou příležitost brát oblast soukromí uživatelů našich webů daleko vážněji. Pokud potřebujete měřit uživatele i základní analytikou nebo si do webu vkládáte jakékoliv komponenty třetích stran, nezapomeňte dobře ošetřit souhlas uživatele pomocí cookie lišty. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
24.03.2024 08:30 V první části naší předvánoční živé diskuze v pražských kancelářích Productboardu jsme si povídali o rychlosti a výkonu JavaScriptu a pak o moderních způsobech vkládání CSS do JS, přičemž nemůžeme minout Tailwind. Našimi milými hosty byli Riki Fridrich, Libor Vaněk a Petr Glaser. Shodli jsme se na několika bodech, které zde míním. Ohledně performance: Problém performance je využívání klientského JavaScriptu na věci, kde není vůbec potřeba. Ačkoliv jsme si mnozí stále myslí, že SPA je cesta k lepší performance, data ukazují pravý opak. My vývojáři si musíme uvědomit, že sedíme u násobně rychlejších zařízení než lidé tam venku. Základ je začít performance rozumně měřit a řešit už během vývoje. Ohledně CSS : CSS in JS je nadužívaný koncept, vhodný zejména pro velké projekty. Problém většiny CSS in JS řešení je závislost na JavaScriptu a runtime zpracování stylů. Proto jsou zajímavé systémy, které dokáží generovat styly staticky, jako StyleX. U Tailwindu velmi zaleží na způsobu vaší práce – např. pro živý design a prototypování v prohlížeči je to skvělé. Podcast Celá epizoda na videu Hosté Riki Fridrich Riki píše JavaScript ve firmě Outreach. Učí ostatní, jak psát Javascript. Přednáší na konferencích a setkáních. Většinou o Javascriptu. Riki je z Ládví. Web – Twitter – Github – LinkedIn Libor Vaněk Head of Front-End Development v CDN77, kde poskytují infrastrukturu pro globální internet. Fanoušek World Wide Web platformy a rozumného přístupu k web developmentu. Má rád všechny JS frameworky, ale ještě radši je podrobuje kritickému pohledu. Kdysi dělal meetupy Vue.js, dneska migruje většinu věcí z Nextu na SvelteKit. Ve volném čase dělá pro bono projekty, jako např. web a newsletter pro novináře Davida Klimeše a konzultuje architekturu a výkon webových aplikací. LinkedIn – Twitter Petr Glaser Petr Glaser v rámci projektu Nauč mě IT pomáhá lidem získat dovednosti a znalosti vhodné pro práci v IT. Říká o sobě, že je vývojář zapálený pro technologie a vzdělávání. Zaměřuje se na performance, kterou vnímá jako součást UX a přístupnosti. I díky tomu si oblíbil framework Qwik, o kterém je řeč v podcastu. LinkedIn – Twitter O čem si povídáme? Představení hostů Navazujeme na diskuzi na FrontKonu Statistická vsuvka a všechna naše výročí První téma: performance Aktuální stav JS, SPA, zacyklení mezi serverem a klientem, MPA Jak z toho ven a nová metrika INP Velký rozdíl mezi našim zařízeními a těmi mězi lidmi tam venku Dotazy z publika Druhé téma: CSS a zápis CSS v JS Zase ten Tailwind Rikiho obhajoba sémantického webu Otázky: utility v Bootstrapu, správné přístupy u různých projektů StyleX a obecně statický export CSS Přepis celého dílu . Děkujeme za spolupráci Jiří Nečas, Productboard — Vladimír Příhoda, Productboard — Honza Michálek — Johana Kratochvílová, Signatura . Přejeme vám příjemný poslech! Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – RSS podcastů Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo kamkoliv jinam, hlavně, aby se to k nám dostalo.
22.03.2024 22:17 Covid nás všechny něco naučil a změnil toho více, než si možná myslíme. Roky 2020 - 22 pro mě znamenaly velký kariérní posun. Ukončil jsem aktivitu se školením, začal firmám pomáhat s rychlostí webů, napsal čtvrtou knížku… Bylo toho opravdu hodně. A taky mě remote režim naučil dělat webináře a videa. Bavilo mě to a myslím, že časem by mi to i šlo tak, jak si představuji. Jenže pracovní posun stále probíhá a já jsem nikdy nebyl fanouškem hromadění aktivit, které pak člověk dělá jen na půl. Od nynějška jsou proto všechny webináře natočené v letech 2020 - 23 zdarma na YouTube. Děkuji všem, kteří si naše videa koupili, za jejich podporu a feedback. Díky všem spoluautorům videí: Rikimu, Michalovi a Tomášovi. Ti přispěli výborným obsahem, který ve velké většině pomůže lidem i těch pár let po natočení, a byli pro poskytnutí videí komunitě zadarmo. Všech zhruba 24 hodin obsahu tedy najdete na YouTube.
14.03.2024 14:00 Zdá se mi to nebo je program WebExpo letos opravdu neuvěřitelně nabitý? V centru Prahy uvidíme velmi známá jména, ale na to jsme zvyklí. Letos to bude například Nathan W. Pyle, Cassie Evans, Bramus Van Damme, Kat Marchán a další. Obsahově se mi WebExpo zdá letos ještě zajímavější než obvykle. Je to samozřejmě do velké míry subjektivní. WebExpo jako svědek mojí webařské kariéry Na WebExpo chodím každý rok téměř od samotného začátku. Původně jako frontend designér, později jako specialista na CSS, responzivní design a další. Zajímaly mě novinky kolem vývojářiny a tvorby uživatelského rozhraní. To byl pro mě hlavní důvod jít na největší zdejší webařskou konferenci. Později jsem zjistil, že držet prst na tepu svých oborů si umím zajistit pomocí Twitteru a článků. WebExpo pro mě v tu chvíli začalo hrát jinou důležitou roli – chodil jsem tam potkávat lidi z komunity, které mám rád a kteří mě vždycky něčím posunou, inspirují nebo se kterými je prostě sranda. Prostě networkovat. Na WebExpo 2023 jsem přednášel o metrice CLS. Zároveň jsem začal chodit na přednášky, které nesouvisely s mým hlavním zaměřením, což mi pomohlo rozšířit si obzory a udržovat se jakž takž v obraze s webařinout na obecné úrovni. Webař v přechodu a síla obecné webařské konference Nyní jsem takříkajíc v přechodu. Samotná webová vývojařina mě zajímá už relativně málo. Pomáhám našim klientům s rychlostí webu, vedu tým a jako produkťák se podílím se na vývoji SaaS produktu, od freelancera přecházím do firmy… Profesních přechodů jsem zažil hodně, ale na stará kolena jsem si nadělil ten nejintenzivnější. A je tu zase to WebExpo, aby v mém profesním životě sehrálo důležitou, ale zase trochu jinou roli. *Už se také těšíte…? Začal jsem se být opět nedočkavý a tak vám zde, po studiu programu, uvedu několik přednášek, na kterých já osobně nechci chybět. Kde se uvidíme? Produktový vývoj je pro mě vlastně úplně nové téma, takže budu sedět na každé přednášce, která se jím zabývá: Markéta Kabátová: Will people love your product? Test it! Michal Pastier: How to start/restart a brand for global success Claire Suellentrop: How to operationalise customer value to maximise product growth Yannic Kilcher: Building & Selling AI Products Honza Valder & Daniel Nádvorník: Global product personas Jirka Bachel: Thinking about self-funding a startup? Here’s how to do it. Performance je další téma, které sleduji a sledovat budu: Nishu Goel: Breaking down long tasks Harry Roberts: Cache rules everything Zároveň se chci udržet v obraze kolem webového vývoje a udržet si kontakt se sousedícími obory. Tady se těším na následující borce: Vitaly Friedman: Inclusive Design Patterns Robin Pokorný: Evolutionary architecture: Agile meets software design Bramus Van Damme: Scroll-driven animations with CSS Je zde ale mnoho dalších, které by určitě stálo za to vidět, jako například: Nathan W. Pyle: How to form a habit of universe construction Amy Hupe: How not to kill your design system Nezvládnutelný. Takový je proto můj program pro letošní WebExpo. Uvidíme se? Také letos můžete koupit vstupenku o fous levněji, s kódem VZHURUDOLU.
09.03.2024 00:15 V PageSpeed.cz jsme po několika letech práce na testeru pro měření rychlosti spustili také jeho placenou variantu, tarif PLUS. Stojí kolem 5 tis. Kč bez DPH ročně na jeden web. Postavili jsme jej pro majitele webu, marketéry a vývojáře a to na základě mnohaleté zkušenosti s poradenstvím k rychlosti. V tomhle článku vám ukážu, jaké problémy tester PLUS nám a našim klientům řeší. Na jedné případové studii pak budu ilustrovat proces ladění konkrétního problému s pomocí našeho nástroje. Pokud se raději chcete podívat na video s velmi podobným obsahem, který je v článku, pak mrkněte na YouTube: Rychlost je důležitá, jenže se často kazí, aniž byste to věděli Kdo neměří, ten neřídí. V přednášce jsem si dělal legraci, že to řekl Baron von Blitzenschnell, otec moderního měření rychlosti webu. Ve skutečnosti nikdo neví, kdo to prohlásil. Ale je to moudrý výrok. Po mnohaletých zkušenostech s optimalizací rychlosti u desítek webů vím, že pokud existuje nějaký základní kámen, bez kterého to celé nefunguje, je to spolehlivý monitoring rychlosti. Bez měření rychlosti nevíte, co se na webu děje a nemůžete na to reagovat. Bez měření neznáte výsledky vašich optimalizací. Bez měření nemůžete říct, jak si vedete, kam směřujete. Bez měření neřídíte optimalizaci rychlosti, takže ji nemůžete dělat. Rychlost přitom zvyšuje konverze, ale má také další pozitivní dopady. Co tester PLUS přináší oproti verzi zdarma? Náš tester rychlosti můžete používat už zhruba dva roky. Co tedy odlišuje novou placenou verzi od té stávající? Zjednodušeně řečeno je to stabilita výsledků, možnost detailního zkoumání příčin a v neposlední řadě také Hlídač, který vám umožní na rychlost zase tak moc nemyslet. Jste zvědaví? Vše vám vysvětlím, chvíli vydržte. Nejprve je ale potřeba říct, že vám tu neprodávám nový a neodzkoušený produkt. Tester PLUS už více než půl roku používá většina našich klientů, počínaje velkými značkami jako je Dr. Max, Sazka, Livesport až po středně velké nebo menší e-shopy jako je Čisté dřevo, Goldea a další. „Plusko“ je odladěné na základě připomínek těchto a dalších více než 50 značek, kterým s rychlosti pomáháme. Pojďme teď na ty fíčury, na ty se jistě těšíte nejvíc. Stabilní infrastruktura Ve stávající bezplatné verzi testů na app.pagespeed.cz testujeme vaše URL méně často a výsledky bereme z API PageSpeed Insight od Googlu. Jak na následujícím grafu sami uvidíte, výsledky PageSpeed Insight nepatří zrovna k etalonům stability: Obrázek: Metriky FCP a LCP pro tentýž web. U verze PLUS to prostě „neskáče“. Příčinou velmi různorodých výsledků z API od Googlu je kromě jiného to, že Google testuje weby na různých serverech různě rozmístěných po světě. Pro tarif PLUS jsme připravili vlastní infrastrukturu postavenou na evropském Amazon Web Services , takže můžeme garantovat, že zkreslení způsobené měřením je zde velmi malé. Důležité je, aby byl jednoznačně patrný krátkodobý trend metrik, takže můžeme identifikovat případné problémy. Kromě toho testujeme vícekrát a častěji než ve verzi zdarma, tudíž můžeme eliminovat výrazně odlišné hodnoty, které občas testy vracejí. Shrňme si to ještě v tabulce: Vlastnost testování Verze zdarma Tarif PLUS Počet testů týdně 3 7 Počet testování jednoho URL 1 5 Infrastruktura PSI API vlastní, AWS Denní výsledky nestabilní stabilní Jste webaři-hobbíci a stačí vám vidět trend z týdne na týden a tříměsíční období? Volte verzi zdarma, v opačném případě vám doporučuji PLUS. Dále se pojďme zabývat tím, co v PageSpeed.cz PLUS potěší vývojáře, a to sice detailním technickým rozborem. Technické detaily pro pátrání po příčinách Do tarifu PLUS jsme přidali několik možností, jak se dopátrat příčině zhoršení nebo zlepšení rychlosti a najít ty správné příležitosti: Obrázek: Detailní reporty pro všechno možné. Vysvětlení čísel je níže. Co na obrázku vidíte? První dvě ilustrace pocházejí z nového reportu „Technické“, kde najdete technické ukazatele jako velikost DOMu nebo datový objem CSS či JS. Pravá část ukazuje detailní výsledky nástroje Lighthouse, kde máte k dispozici opravdu hodně informací. Zaměřme se nyní na čísla v obrázku: Tady vidíte graf s datovým objemem HTML, který se u tohoto webu po spuštění redesignu razantně snížil. Palec hore, tohle vždy pomůže! Datový objem fontů zde narostl, ale vidíte, že díky grafu jsme si toho mohli všimnout a pak pomoci s opravou tohoto problému. V detailním reportu Lighthouse máte k dispozici JSON se všemi výstupy tohoto nástroje , dále Trace a HAR . Tahle technická data vám usnadní optimalizace a hledání příčin zhoršení. Vydržte chvilku a ukážu vám to na případové studii za pár odstavců. Mimochodem, všimli jste si poznámek v grafech? I to je vlastnost tarifu PLUS, která vám usnadní dohledávání změn. Hlídač hlídá, zatímco vy můžete… třeba spát „Hlídač“ je vlastnost, ze které mám opravdu velkou radost, a se kterou jsme se piplali nejvíce. Z poradenské praxe totiž víme, že většina nástrojů člověka rychle zahltí zbytečnými notifikacemi. Vezměme příklad z následujícího obrázku: Obrázek: Některé vrcholky nestojí za to zdolávat. Na prvním kopečku je vidět, že hodnoty metriky LCP jeden den vylétly, ale hned se vrátily zpět. Šlo tedy o krátký „peak“, špičku, která představovala výjimku. Druhá šipka zase ukazuje na mírné dvoudenní překročení stanoveného limitu. Zajímá vás tohle? Zde musím říct, že jistě existují týmy, které sledují performance na hodinové nebo dokonce minutové bázi. Je jich ale jen zlomek. Ono to totiž vyžaduje, aby rychlost měla naprostou prioritu a vy jste měli kapacity ji každý den řešit. Naprostá většina našich klientů má sice rychlost ve svých prioritách vysoko, ale reálně na ni pracuje jednou za pár dní. Ti menší dokonce jednou za týdny nebo v měsíčních cyklech. Právě pro tyto případy stavíme našeho Hlídače. Ten začne „panikařit“ a posílat notifikace až po několika dnech, kdy se původní hodnota zhoršila a zůstala na nové horší úrovni. To vám ušetří vyhodnocování spousty notifikačních hlášení. Do Hlídače jsme ale přidali ještě jednu vychytávku. Jde o automatické nastavování hladin rychlosti . Však se podívejte na následující obrázek, z toho budete moudřejší: Červená linka zda ukazuje limit rychlosti, tedy maximální hladinu. V tomto případě se však metrika FCP postupně zlepšuje. V jiných nástrojích byste museli pravidelně prohlížet grafy a limity rychlosti si ručně přenastavovat podle změn v rychlosti webu. Kdo z vás to ale reálně dělá? Náš Hlídač nastavuje limity sám podle algoritmu, který jsme ladili několik měsíců. Takže pokud dojde ke zlepšení, schůdek v grafu se nastaví automaticky. Navíc vám pošleme notifikaci, protože dobrých zpráv kolem rychlosti není nikdy dost. Sečteno, podrtženo: Hlídač vám obstará automatické sledování rychlosti webu. Nebude vás zahlcovat velkým množství zpráv. Funguje automaticky, takže vy můžete dále dělat, co vás baví – rozvoj webu, programování nebo prostě flákání se. Notifikace z hlídače chodí do e-mailu, do Teams nebo do Slacku. Tester rychlosti od PageSpeed.cz vám však umožní jít dál. V momentě, kdy nastane skutečný problém, můžete se díky výše uvedeným technickým detailům dopátrat až k příčině zhoršení a tu pak opravit. Pojďme se na optimalizaci rychlosti s pomocí tarifu PLUS podívat prostřednictvím příběhu z praxe. Případovka: ladění CLS na Goldea.cz Web Goldea.cz funguje z pohledu rychlosti webu skvěle. Je radost spolupracovat s klientem, který rychlost považuje za důležitou, a vývojáři, kteří jsou velmi kompetentní. Podívejte se na čísla z Chrome UX Reportu, tedy od uživatelů Google. Jsou výborná: Ale my v PageSpeed.cz moc dobře víme, že monitoring rychlosti se vyplatí i u webů, které jsou technicky stabilní a obstaráváné schopnými lidmi. Stále se totiž nasazují nové úpravy, nejen na straně vývojářů, ale třeba i přes GTM. Problémy se prostě dějí pořád. Obrázek: Chybička se vloudí. Problém s metrikou CLS nám Hlídač nahlásil po třech dnech, když už bylo jasné, že nejde o náhodnou špičku. Navíc šlo o výrazné zhoršení hodnot. Takže jsme to šli řešit. V testeru je možné si každý graf rozkliknout do modálního okna, které vám ukáže přesné hodnoty testů pro jednotlivé typové stránky. Tohle je stav, kdy všechno bylo zelené: Obrázek: Před zhoršením jsou hodnoty CLS nulové nebo skoro nulové. Krása. Tohle je stav po zhoršení: Obrázek: Ajaj, co se nám to tady přihodilo? Snadno zde vidíme, že problém je u typové stránky BlogPost, tedy u detailu článku. Kliknutím na čas testu se pak dostanete do detailního výsledku testování s výpisem reportu nástroje Lighthouse: I zde vidíme vysokou hodnotu CLS. Nástroj Lighthouse nám občas může poradit relevantní rady, proto se podíváme, co nám říká k CLS. Ukazuje na velký posun tohoto objektu: Kódeři a specialisté na rychlost mezi námi už mohou něco začít tušit, protože podle názvu elementu a hodnoty posunu může jít o posun celé stránky. Jak zkoumat dál? Ve výsledku testu si v testeru PageSpeed.cz můžu stáhnout tzv. Trace, což je detailní záznam práce prohlížeče při stahování a renderingu stránky. Soubor z Trace můžu otevřít v nástroji Performance Insights, který mám z Chrome DevTools nejraději právě pro ladění metriky CLS. Tady vidíme to, co potřebujeme: Obrázek: Dvě místa v Performance Insights, která mi ukáží problém s CLS. Šipka nahoře ukazuje na panel, který informuje o nechtěných posunech, jež metrika CLS zaznamenává. Vidíme tam oranžový sloupec, takže vysoká hodnota shiftu a pak screenshot, co se tam přesně renderuje. Větší screenshot také ukazuje spodní šipka. Můj obrázek je statický, takže vám neukáže rozdíl mezi renderem před a pro. K tomu jsem vám udělal ještě jeden obrázek: Obrázek: Před a po. A našli jsme viníka. Už je vám to jasné? Na webu proběhne ke změna výšky horní zelené lišty. Dojde k tomu kvůli náhradě systémového písma za webfont. Co s tím? Nebojte, poradím vám. V týmu PageSpeed.cz jsou pro nás tyhle horní lišty takovým vánočním evergreenem, který pravidelně velké části webů ničí kvůli poskočení layoutu čitelnost obsahu a tím i metriku CLS. Možnosti řešení jsou například tyto: Lépe ošetřit rozdíly mezi systémovým písmem a webfontem, např. pomocí vlastnosti size-adjust. Zajistit u autora nebo autorky textu, aby jeho délka ani na mobilu nepřetekla na druhý řádek. Ošetřit „jednořádkovost“ na straně kódu, např. pomocí vlastnosti overflow a vytečkování pomocí vlastnosti text-overflow. Možné jsou i kombinace těchto postupů, kreativitě se meze nekladou. Metrika CLS je v tomto přísná, protože je citlivá i na velmi krátké posunutí celého layoutu. Tak. Už se blížíme k závěru. Teď se pojďme podívat, co za tarif PLUS zaplatíte a co přesně vám nabídne. Tarif PLUS Za cenu 5 148 Kč ročně bez DPH za jeden detailně monitorovaný web dostanete: 5 detailně sledovaných URL jednoho webu . 5 domén – kromě té hlavní ji klienti využívají na subdomény, jazykové mutace nebo konkurenci . Vlastnosti o kterých hovořím výše: hlídač rychlosti, detailní technické informace, stabilní infrastrukturu, poznámky v grafech a tak dále. Stavíme to tak, aby to bylo dostupné i pro menší, ale vydělávající weby. Obrázek: Nastavení PLUS testu může vypadat třeba takhle. Samozřejmě zde dále platí výhody stávající bezplatné verze – máte k dispozici týmový dashboard, kam si můžete pozvat libovolný počet spolupracovníků, můžete si tam přidávat testy zdarma a chodí vám pravidelné měsíční reporty. S onboardingem a nastavením testu vám navíc osobně pomůžu. Více o tarifu PLUS, včetně srovnání s verzí zdarma: app.pagespeed.cz/plus Co si zapamatovat? Tohle je to nejdůležitější, co byste si mohli z článku odnést: Měření je základ performance. V PLUS dostanete detailní a spolehlivý monitoring. Hlídač vás nebude otravovat, ale dá včas vědět, že se něco děje. V PLUS dostanete všechny technické podklady pro optimalizaci. 5 148 Kč ročně bez DPH za jeden detailně monitorovaný web. Shrnutí? Rychlost je důležitá, jenže se často kazí. My ji za vás pohlídáme, zatímco vy se soustředíte na to, co umíte nejlépe. Samozřejmě budeme rádi za každý váš feedback, buď přímo sem nebo třeba na e-mail info@pagespeed.cz.
07.03.2024 15:15 Pojďme si v padesátém prvním díle ukázat, kdo je a kdo není produkťák a jak týmům pomáhá někoho takového mít. S Martinem Snížkem, expertem na produktové řízení, který sbíral zkušenosti také v Rohlíku, v Mallu nebo Rossumu probíráme i tipy a triky v občas napjatých vztazích produkťáků s vývojáři. Jako zvláštní téma jsme pak vytáhli význam koučování a mentoringu v produktovém řízení, ale i obecně v profesním rozvoji. Podcast Celá epizoda na videu Host: Martin Snížek Martin se už 20 let zabývá tím, jak stavět dobré weby a digitální produkty. Po zkušenostech z Rohlíku, Slevomatu, Mallu a Rossum v současnosti pomáhá zvenčí zlepšovat produktové týmy, weby a aplikace. Web – X – LinkedIn Kdo je manažer digitálních produktů? Produkták je podle Martina někdo, kde je zodpovědný za hodnotu a životaschopnost toho, co se vyvíjí. To znamená, že produkt přináší hodnotu pro firmu a také pro uživatele. Jsou prý tři základní vlastnosti, které by měl mít dobrý produkťák: Empatie k uživatelům, to znamená opravdu chápat, co uživatelé chtějí, jaké jsou jejich touhy, potřeby a problémy. Produkťák musí také chápat firmu a její business, vědět, o co firma usiluje a jaké metriky potřebuje zlepšovat. Třetí aspekt je, aby rozuměl technicky tomu, jak se produkt buduje, což je u digitálních produktů programování. Více je v článku na SnížekWeb.cz. Zdroje o product managementu Pokud byste měli zájem o další zdroje ke studiu téhle problematiky, zde jsou tipy od Martina: Lenny’s Newsletter Shreyas Doshi Marty Cagan Teresa Torres V Česku samozřejmě Snížekweb.cz. O čem všem se v podcastu bavíme? Robinův tip: WebExpo 2024 Martinův tip: HTML: The Bad Parts a jedno velké uf! Představení Martina Snížka Kdo je produkťák? Čím se liší od projeťáka? Hlavně uživatelskou dimenzí. Klíčová je empatie vůči zákazníkovi a přetavení do produktu Organizovanost týmu, má ji přinést produkťák? Ideální forma spolupráce mezi produkťáky a vývojáři Proč vývojáři nesmějí být „poslední kolo u vozu“ Zapojení vývojářů do procesu vymýšlení Shape Up: wireframy až moc konkrétní, text příliš abstraktní; tlustá fixka, malé post-ity Další téma: koučování ve firmách od externisty Co když si můj šéf na mě najme kouče? Tipy na zdroje o product managementu Děkujeme za spolupráci: Honza Michálek . Odebírejte podcast ze Vzhůru dolů Spotify – Apple Podcasts – Google Podcasty – TuneIn – RSS podcastů Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo kamkoliv jinam. Hlavně, aby se to k nám dostalo. Přejeme vám příjemný poslech!
04.03.2024 20:01 Už jistě víte, že od 1. ledna se změnily sazby DPH. Knížky se pak přesunují do nulové sazby daně. Vzal jsem to jako příležitost k celkové aktualizaci cen mých knížek. Jsem přesvědčený, že každá jednotlivá kniha může být stále pro hodně lidí užitečná, ale třeba ta první už bude slavit deváté narozeniny. Knížky prostě zestárly a tak i tohle znovu promítám do ceny. Takže si teď představte něco jako famfáry, ukřičeného Alzáka… Nebo prostě jenom relativně decentního autora knížek, který vám tímto oznamuje, že je to teď skoro všechno o hodně levnější: Kniha Cena ‘23 Cena ‘24 Vzhůru do CSS3 99 99 Vzhůru do AMP 249 99 Vzhůru do designu 249 199 CSS: moderní layout 399 299 CSS: moderní layout 699 499 CSS: moderní layout 899 649 Přeji vám vše dobré v roce 2024 a ať vám knížky dělají radost a dobře slouží! → vzhurudolu.cz/ebooky
