 Ahoj, vítám vás na Worldcampu 2021 pořádany Prahou. Mý ménu je Martin Reinoch a připravil jsem si pro vás přednášku jak weby dělat nedělat, je to o chybách na Webech. Ve WordPress komunitě se pravidelně věnujeme velké skupině lidí, kteří jsou na začátku nebo už mají nějakou zkušenost z WordPressem a potřebují poradit, na co si dát pozor. Pojďme se teda podívat na skupiny chyb. Já se mi rozdělil do skupin. První jsou obsahové, designové, pak jsou kodové, jsou chyby v kodu, chyby na sedbru, sell a marketingové. Pojďme se podívat na první čtyři, ty jsou pro vlastní tvorbu. Obsahové chyby ty jsou nejlep eliminovatelné, protože jsou chyby ve slovách, v překladech, překlépech, dlouhé texty na Webech nebo naopak web má málo textu, nebo chybí důležité informace například pobočka a podobně. Nestrukturované texty nebo odkaziná neexistující stránky, případně pop-up okna, které rozčilují náštěvníky na odvádí pozornost, případně je to i to, co firma dělá, že tam chybí, protože když návštěvníky na tam web přijde, tak neví, jestli je na eShopu nebo na firemním webu, nebo je to web vlastně nějaké prodejní společnosti. Dále dosť často se setkávám s tím, že web je dělaný pro majitele, aby měl web a líbil se mu. Musí se líbit zákazníko mné majitele firmy, samozřejmě další chybou jsou příliš odborné texty. Zákazníci nerozumí vašemu oboru do hloupky, je potřeba nebo jenutné snížit tu odbornost na úroveň, která bude přijatelná pro to, aby tomu rozuměli všichni. Tady určitě vymyslíme spoustu dalších. Pojďme se podívat na ukázky. Tady mám připravený web materské školky a samozřejmě paní uštělky nebo paní vychovatelky. Tady píšou do blogu své novinky a když se podíváme, tak samozřejmě toto je typický mimo jiných problémů, mimo jiných chyb, které tady jsou tak typický problém je, každý příspivek má jiný format, zvírazňování tučním, nejlepé samozřejmě vykřičníky, v textu, v barvě další barvou a tak dále. Tady je už ti ukázka webů, kde zase není zřejmé, kde jste se ocitli, jestli to je web s receptama, nebo jestli to je nějaký e-shop na prodej něčeho pašťi, nebo jestli to je firmní web, chybí tady nějaká část, která bude uvádit, o co tady jde. Pojďme na designové chyby. Tady jsou chyby většinou ve strukturze, jako většinou tí lidé tě návčeníci mají velký problém se dostat odpovědi, dostat se tam, kam potřebují. Menu bývá, nebývá dobře stylizovánou, nebývá strukturovánou a podobně. Darši chybou je, že ten vzhled je nepríž nápaditý, nebo je špatná volba barev, třeba instalater by asi neměl mít družovou barvu na svém webu. Grafický stil a forma neodpovídá zamíření stránek, které obdoba stránky jsou čitelné pouze na jednom prožiči, s tím se pořád ještě setkáváme, nepřihledné odkazy není zřejmé, co je odkaz, co je tekst, kontrast, barevnost těch stránek, tlačítka nemají label, nemají teksty a za se bychom vymysleli spoustu dalších jiných, to jsou takové ty hlavní. Pojďme dál, čili chybi v kodu, asi nejvíc důležitá je responsivita a nebo aspoň částečná responsivita, to je velká chyba. Velká chyba i spůsta plug-inu, protože ten web se potom ani lehne co se týká kodu, nedá se v administraci něco udělat. Další chybou jsou nedefinované velikosti obrázku, proč mají být na webu velike obrázky, když ten web je v určitém rozměru a tak ty obrázky se nikdy nebudu natahovat víc, když lidé tam ty obrázky dávají, tak aby byli velké. Takže všechny datak, které se posílají uživately, zatěžují tu linku. Chybějící áldu u obrázku nebo miksovaný kontent, nevšechny zdruje, jdou přes SSL, většinou u obrázku se to stáva. Je to stává se to, kdy se migruje doména nebo na jiný hosting. Chyba je i třeba v minifikaci, nebo v optimalizaci, chybí keš, zaplnoutá keš, nebo v lepším případě nenastavená. Chybí v dževaskrypte, chyby v kaskádových stilech, duplikování selektoru a tříd, když tu šablonu někdo upravuje, tak on vrší další selektory, nebo třídí na sebe a vzniká tam opravdu velký zmatek. Další chyby jsou už patně napsaný web, třeba množí se do tazy do dotabáze, to všechno spomaluje web pro návštěvníka. Kody jsou tam navíc, nebo napak posílá se velká hetemál stránka, což vlastně znamená velký dom objekt na spracování pro hlížečnou. To samozřejmě musí renderovat a spracovat. Web je nepostavený na standardech a podobně, že tady zase najdeme spoustu dalších věcín. Co se týká chybna servru, tak tady jednoznačně bezpečnost a bezpečnostní hlavičky, nebo starý protokol, ještě i dnes, jsou hostingy, které podporují a neumožňují HTTP2 nebo vyšší. Doména nemá SSL certificate, naprosto regulérně se s tím setkávám, a dneska už pro hližičto neoznačuje barvama, tak už to ani není moc vyzpoznat, ale pořád, ešte ty domény takhle jsou. Na ošetřené chyby na stránkách nebo server není správě nakunfigurován, někdy to bývá i malým tarifem, nebo vpůluje více webů, je tam limit paměti, nebo limit zdrojů, procesoru a podobně. Zastarala verze PHP nebo majskvělka, se nemá knihovnike zpracování obrázku a tady zase vymyslíme spoustu dalších jiných věcí. Pojďme se podívat na ukázky, tady co se týká designu a designový chyb, tak samozřejmě první z nich je zase web nějakého installatera, který tady jsme našli, a zase responsivita, samozřejmě už bych se chtěl podívat, a řekl bych, že ten web se zamrzl někdy v roce 2010. Samozřejmě weby se dají dělat i tímto spůsobem a to je ostrašující příklad, který jsem tady chtěl nájít a ukázat, kdy naprosto regularně ve všem ten web to porošuje, jak designu tak v obsahu a nedej bože i v nožství dát, které se tam aploudují. Když se potom podíváme do konzola, tak uvidíme velké množství dát, které se tady nahrává, které se tady nahrává. Takže je tam nějaký video, které se tady nahrává a už jsme na 12 Megách a pořádce nahrává další a další. Nahledě je na to, že přehlednost samozřejmě a design je strašný. Co jsem chtěl ukázat, podívajme se do kodu, podívajme se na zdrojevý kód stránky, protože i zdrojevý kód je v tomto ogladu důležitý, tady nechal dokonce odkaz a tvůrce webu, takže abyste viděli, jaké zbytečnosti se tady nahrávají na vštěvníkový webu. Pojďme dál. Jak vypadá špatná šablona? To zistíme velmi rychle, asi všichni budete moc odpovědět šablona, která nevidělává nebo která ve který nevidělává, to je obdoba. Nehodí se pro vaši strukturu, pro váš záměr. Ve vyhledávačích má špatné hodnocení, není responzivní, nedá se snadno upravit, nepodporuje pluginy v komércev a podobně. Je pomalá chybí zobrazení v některých proližečích, chybné zobrazení v některých proližečích, to znamená, i s tím se stále v šablonách setkáváme. Nedostatečná podpora seho většinou jí lidi nemají ani koupenou nebo málo lidí má koupenou, takže to je otkaz toho. Pojďme se podívat na další oblast, která je problémová pro tvorbu webu a to jsou pluginy. V velmi časté scénáře, které se objevují koupím si šablonou nebo někto si koupí šablonu, šablon asi natáhne nějaký page builder z pravidla Elementor, do Elementoru většinou lidi k Elementoru přidávají další pluginy, jet engine, nebo nějaké podmínkové, konditions, přidají obchod v komers, přidají plugin na upravu, i mailu z vukomers, přidávají na plug-in na upravu do košíku vkládání do košíku bezpečnostní plug-in newsletter, cash plug-in, SEO plug-in, nějaký jazykový Facebook, Google Tag Manager a tak dále. Čili je jasné, že tady po tom letom se ten web ani nehne. To jsou, skutečně, to jsou profily webů, které mají 3,15 třin nebo až 20 třin na čítání nebo response pro toho návševníka. Pojďme se podívat na další ukázku, tohle je, já to přeskočíme, já se tam vrátím, čili tohle je ukázka webu, kde to jsem opravdu zažil, kde bylo 49 plug-inů, skoro žádný nebyl aktualizovaný mimochodem, ani WordPress nebyl aktualizovaný a některé plug-iny tam byli samozřejmě zduplikovány pro istotu, aby se vlastně, aby to, že problém je, že tohle vyrobila firma tohle vyrobila firma která se zabývá webem, nebudu zatím rozširovat dál, nějaký výsledek samozřejmě po malost webů velké HTML, či posilá se návštěvníkovi, velké obrázky, velké zbytečné kaskádové styli JavaScripty a podobně, no a k čemu to vede? Nechodí, je tam níská konverze nebo velká míra opuštění ty lidi okamžitě odchází, protože když tam přídov a omilem, tak vlastně odejdou prýč. No a samozřejmě to má za následek mál zakázek potažmo málo pednes no a rostočí se spirála rozhorštění toho těch vlastníku a rozčílení těch vlastníku toho webu. Čili rychlost hrajeroly a tady jenom vlastně míra opuštění v rách času, čili nejmenší opuštění, míra opuštění je vlastně do 3 vteřin. I když i 3 vteřiny jsou cahodně. Jenom se prozejma spodívejte na konec, kde při desetí vteřinách opouští weby hlasně moc lidí. Čili klíčem je správnost a rychlost, čili správnost, kodu a rychlost je zajímavá ale pomalá, samozřejmě mluvím o webové stránce. Jak na šablonu? Vybrat šablonu a kouky. To je jedna z možností. Nebo můžete šablonu vyrobit a to ručně pokud to umíte, pokud to člověk umí, tak může si ji napsat ručně a nebo přes page builder. Dokonce existuje jedna varianta není nutné a mít zakoupenou šablonu, protože třeba oxyjin vůbec šablonu nepotřebuje. One dokonce zakazuje, když tam dáte. Přesně engine to řeší jinak. Je spoustá page builder, které jsou k dispozici. My se poďme podívat na ty nejvíc používané, které většinu ty lidí používají a kterí mají na webech použité. Chci vám ukázat jak ovlivňuje page builder a to pro Google a vlastně jak vypadá velikost dat jednotlivých page builderů vybraných page builderů a jaké mají request jaké mají požedavky na server tak kupu divu je na tom nejhur pak elementor zlejské velikosti, tam je to asi zřejmé, protože když se podleje tabulka v zlonské roku, ale když se když vlastně udělali optimálizace a vyšli znovu verzí tak vlastně je tam potřeba mít elementor a pak elementor pro že to jsou další JavaScript a další kaskárové stíly, které se tam používají. Takže nejlépe z toho vychází bíver builder a Oxygen a si uděláte obrázek jak to vypadá. A ještě vám chci ukázat jak to vypadá z pohledu, bloudveru což jsou vlastně nutné nebo nejsou to nutné věci, ale ten page builder je tam dodává automaticky čili když dodáte třeba jednoduchý jednoduchý jednoduchý nadpis a vlastně jak to vypadá když ty builderi vlastně zbyldí stránku. Takže je tam dodáno hromada balastu, hromada kodu, které se tam automaticky dodají tím výrobcem toho page builderů. Jak to vypadá z pohledu, hodíte malo kodu podívajte se tady je vložen titulek a na to, aby se tam vložil tak je tam taková dleka skádová struktura v elementoru. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 11 krad vloženo něco abych tam vůbec dostal hárdová titulek naopak třeba v Oxyginu, ten buildery na tom velmi podobně, je to takhle krásně strukturovánočili ten titulek, ten hádníčka tady vlastně schovaná zabalená do dvou částí tak jenom zase pro představu. Podle čeho vybrat page builder nebo szablonu určitě podle čistoty kodu vždycky lidi až jsou trošku na úrovni až tomu rozumí, člo já vám to předstívám říkám do předů podle rychlosti výsledného webu podle jednoduchosti práce s tím page builderem nebo szablonou podle rychlosti práce s page builderem i s podporou, jaká je podpora je potřeba si zjistit jaká je rozšířenost, jaká je komunita a vlastní zkušenost jakou má vlastní zkušenost jestli jsem schopen vůbec ten builder obslugovat, jestli jsem vůbec schopen ho pochopit no a jakou podporu plaginu má mimochodem křivka na učení nebo učení se elementoru a v účí oksiděnu je samozřejmě ve prospych elementoru ten elementor se mnohem rychlej učí tak křivka je samozřejmě strmnější, když to ten oksiděn se učí děle, ale za to vlastní lepší výsledky no jak na to jak na ty obsahové chyby tak samozřejmě je to velmi jednoduché čili krátké texty texty strukturujte mějte jednoduchý web zjednodušte na webu znamená méně je více neotravujte návštěvníky zbytečnost má dělejte web pro zákazníka píšte jednoduchým jazykem skontrolujte odkaz dělejte korektury dělá grafické chyby pokud šavlona tak vyhradně responzivní musíte jí nahíd, musíte vinovať čas tomu hledáni, aby se vám zároveň líbyla, měla ty funkci, co popřebujete a byla responzivní musí podporovat i další plaginy pokud builder tak generující responzivní a rychle web, rychlej pro práci protože samozřejmě není nic nepríjemdějšího než překlikávat mezi stránkama než se nahraje takový builder, který umí strikně vybrat fonty který nebude nahrávat hromadu fontů ale dovolí vám ho vybra če fonty začí najít být problém a bude bez blogveru nebo aspoň s co nejmenší mírou musíte citlivě volit barvy poradit se s UX designerem a tak dále, čili tady je spůsto dalších možností, které lze ve myslep no jak na technické chyby většinou řeší hosting kdyby měli web rozjetí u sebe budete řešit tyto problémy ale volba dobrého hostingu to vyřeší jak rychlost, bezpečnost protokol, HATTP2 bezpečné hlavičky ale hlavně i podpora dívat se na podporu toho hostingu PHP aspoň verzi 7.4 to budouc nám, samozřejmě jde 8 výjde nějaká verze WordPressu která bude podporovat už jen 8 to jasné a zajme Shablona kupovaná nebo svoje pokud plug-in tak malé množství pokud page byl tak rychlej obrázky na přesný rozměr malé obrázky a strátovou kompresy zmenčete ten datový tok pro toho návštěvníka které je gezi nebo pro klik kompresy kéž nebo pro hlížečovou kéž a optimalizovat web nárychlost no, jak web je měřit a kontrolovat samozřejmě nejjedorušší a nejrychlejší je konzole pro hlížeče každý pro hlížeč to má na vývojový tůl, vývojový nástroj ten konzole pak jsou samozřejmě weby které to umoženuje page speed inside getametric, spingdom a český page speed ale jsou i další, které jsou v GRIS pozici nezapováníte, že to jsou syntetické testy ale aspoň vám pomůžou odladit ty chyby tak, tolik za mě děkuj za pozornost a doufám, že se uvidíme někdy face to face na živou