Co ovlivnuje rychlost stránky z hlediska webdesignu?

Zdravím, zajímalo by mě jestli je: a) podstatné na rychlost načítání stránky jestli styluji dokument pomocí css přímo v hlavičce nebo na něj odkazuji? b) použitý formát. JPG je kompresní formát z roku 1990, dá se použít něco modernějšího s čím si prohlížeče rozumí nebo aspon nějak rozumě ještě snížit velikost bez výrazné ztráty kvality?

a) nelze obecně odpověď. CSS přímo v html je k dispozici okamžitě, nemusí se dělat žádný request a může se zpracovat hned po naparsování html. Na druhou stranu se musí parsovat při každém requestu znovu, což při velkém objemu to znamená dopad na přenášená data a čas parsování. Externí soubor může být nacachovaný a naparsovaný v paměti, časově stojí jen pár ms ověřit jestli se změnil. Konkrétně ti vždy odpoví reálné měření (Chrome, developer tools, záložka performance).b) png, gifl jsou alternativy, ale velikost obrázku s tím nesmížíš. V současné době není náhrada. To, že je jpeg starý neznamená, že je špatný, naopak na webu svoji funkci plní obstojně. Velikost snížíš převodem grafiky na css, vektory a nepoužíváním jpeg obrázků jako grafických prvků na webu. Fotky nemáš zatím čím nahradit.

CSS by mělo být vždy v samostatných souborech a vždy odkazované z hlavičky tedy mezi značkami .... To nemá moc společného s rychlostí načítání, ale spíše to má vliv na SEO, na přehlednost kódu a v neposlední řadě na snadnou změnu designu.Pokud se budeme bavit o CSS v souvislosti s rychlostí načítání webu, tak hlavní význam má velikost CSS. Tedy to, zda je CSS dobře strukturované a logicky napsané, tudíž relativně malé. Další co má vliv, je počet odkazů na externí CSS soubory. Mnoho odkazů znamená více dotazů a více stahování. Je lépe používat méně externích souborů, byť datově větších.Co se týká obrázků. V první řadě jde o velikost obrázků. Čím menší, tím lépe. Je naprosto zbytečné, aby prohlížeč stahoval obrázky přes 3000px na šířku, když je stejně nezobrazí a často se stejně zobrazují např. 250px na šířku. Je lépe náhledy obrázků načítat jen tak malé, jak je zobrazujeme a až po kliknutí na obrázek začít stahovat obrázek ve větší velikosti.U obrázků JPG má také vliv to, v jaké kompresi je ukládáte. Pro tisk mohou mít malou kompresi, tudíž značnou datovou velikost, ale na monitorech návštěvníků je to k ničemu, oni to stejně neocení, protože jim to v takové kvalitě nezobrazí monitory.

Ok, díky za přínosné příspěvky. Btw: jaký zápis vám přijde líbivější?

CSS by mělo být vždy v samostatných souborech a vždy odkazované z hlavičky tedy mezi značkami .... To nemá moc společného s rychlostí načítání, ale spíše to má vliv na SEO, na přehlednost kódu a v neposlední řadě na snadnou změnu designu.

Stránka se nezačne vykreslovat dokud nenačte všechny js a link/style zdroje z head sekce. Není nutné, aby u malých webů bylo css v samostantých souborech (podívej se na google.com), css se často inlinuje kvůli rychlosti načítání (homepage google je opět dobrý příklad). Na SEO umístění css co vím vliv nemá. Snadná změna designu platí jen pokud html dělám ručně, častěji se web generuje, pak to je jedno.V praxi nejpodstatnější vliv na rychlost načítání má používání správných http hlaviček u css/js/image souborů. Počet požadavků na soubory, informace, jestli načítání souboru zdrželo vykreslování stránky nebo nikoliv a množství načtených dat se opět nejlépe zjistí z Developer tools, na záložce Network, zajímá vás (pouze při opětovné načtení stránky) ststus 304 a načtených pár stovek B dat (bajtů), to znamená, že server řádně odpověděl, že se css/js/image nezměnil a prohlížeč může použít u sebe uloženou verzi, v případě css už je tahle verze naparsovaná a připravená k vykreslení. Je potřeba tohle důkladně měřit, obecné rady nemusí platit vždy.Pokud jde o jpg, komprese má vliv na velikost barevných fragmentů, které v obrázků mohou vzniknout, česky řečeno. Existují technologie, jak z jpg obrázků odstranit data, která opravdu monitory a lidské vnímání nezohledňuje a výrazně ušetřit velikost, stejně tak je vhodné z obrázků odstranit textová metadata (exif), existuje na to spousta služeb jako např. http://www.jpegmini.com/.

Napsal TomášX;1443232

Není nutné, aby u malých webů bylo css v samostantých souborech (podívej se na google.com) ... Na SEO umístění css co vím vliv nemá.

Tyto informace v žádném případě nejsou pravdivé. Podle standardu HTML veškeré CSS styly musí být v externích souborech. Pokud nejsou, je to porušování pravidel a Google i Seznam vám za to strhávají body při výpočtu pozice ve výsledcích vyhledávání, jinými slovy si mršíte SEO. Zkuste si na jakémkoli analyzátoru zjistit kvalitu kódu a hned vám vynadají za CSS vložené v HTML kódu, a to zcela oprávněně. CSS mimo externí soubory je prasečina na entou. Analýza zdrojového kódu www stránek - SEO Servis Ale souhlasím, že než mýt 20 samostatných souborů CSS, tak raději třeba jen tři soubory, byť velké. Samozřejmostí by mělo být, že tam nebudete mít žádný odkaz na CSS soubor, který by nefungoval. T by byla ještě větší prasárna, než CSS vkládat do HTML.

Tyto informace v žádném případě nejsou pravdivé. Podle standardu HTML veškeré CSS styly musí být v externích souborech. Pokud nejsou, je to porušování pravidel a Google i Seznam vám za to strhávají body při výpočtu pozice ve výsledcích vyhledávání, jinými slovy si mršíte SEO.

O jakém standardu mluvíš (html5, xhtml, html 4 všichni to mají)? Jsem v tom ale trochu nováček. Google nic takového netvrdí. Seznam nic takového nezohledňuje, to vím.Bylo by absurdní, kdyby Google jako bojovník za rychlejším načítáním webu zároveň zakazoval jeden ze způsobů jak web zrychlit, ještě k tomu způsob, která sám masivně používá.Analyzátory jsou něco čemu bych příliš nevěřil (a nevěřím), není to žádná autorita a tvrdí často pěkné nesmysly, důvodem jejich masivního rozšíření je nejspíš jen cesta jak nalákat lidi na svoje "seo" služby. Pokud říkají, že css může být jen v externích souborech, je to jejich názor, možná podložený tím, že se v tom dělá příliš chyb, ale nemá to nic společného s pravidly nebo standardy, ani s tím co je vhodné pro Google, Seznam, Baidu, Bing, Yandex.K tématu, dobré ověření toho jak si z hlediska performance web stojí je třeba nástroj od Googlu, poskytuje užitečné typy, které možná i sám zohledňuje. Další zajímavý nástroj je aplikace https://www.sitespeed.io/, není sice webová, ale zase poskytne přesná čísla podle vašeho připojení, je to za mě velice důležitá, řada nástrojů sídlí v DC, v cloudu a tam mají dobrou konektivitu, naopak poznat jak se web chová v reálném prostředí přímo na mém spojení je velice užitečné, dají se třeba pak weby snadno optimalizovat pro nestabilní mobilní spojení, pro cesty vlakem atd., je možné držet dlouhodobou statistiky či průběžný monitoring a spousty dalších věcí.Nefungující soubor nemusí být tak velký problém, děje se to běžně, žádný zdroj na webu není 100% dostupný, vyhledávače i prohlížeče s tímhle stavem počítají, stejně tak řadu externích souborů může zablokovat adblock či bezpečnostní FW.

Napsal TomášX;1443273

O jakém standardu mluvíš (html5, xhtml, html 4 všichni to mají)? Jsem v tom ale trochu nováček. Google nic takového netvrdí. Seznam nic takového nezohledňuje, to vím.

Tak to víte špatně. Všechny vyjmenované standardy HTML už od HTML 4.01 až do dnešního HTML 5 považují CSS styly zapsané přímo do HTML kódu za nekorektní. Přímo do HTML (tzv. inline styles) jsou v HTML funkční především pro JavaScript, který občas nezbytně nutně musí zapsat CSS přímo do HTML. Pokud ale kodér píše CSS do HTML, tak je prasátko. Studujete špatně. Google i Seznam vám za inline styly dávají vždy body dolů. To je zcela nesporný fakt už minimálně 10 let, což je doba, po kterou se tímto živím. Ještě si mi nestalo, aby některý z mých kolegů tvrdil opak, protože by byl za blbce. Důvod je velice jednoduchý. Roboty Google a Seznamu nějaké CSS nezajímají. Je zajímá jen obsah (texty, obrázky, tabulky, odkazy...). Stejně je převede do čísel, tak na co by mu byla třeba barva textu. Tím, že dáváte CSS do HTML, tak spotřebováváte výkon jejich serverů, jinými slovy, stojíte Google a Seznam peníze. Za to vás krásně ohodnotí minusovými body. To je vcelku logické. Jestli používáte externí CSS, nebo to naopak prasecky rvete do HTML kódu nemá na rychlost načítání stránek téměř žádný význam. Pokud je to značný objem dat, tak už pro internetové prohlížeče nezáleží, zda je to v externím souboru, nebo namatlané do HTML. Prohlížeč to musí stáhnout tak, jako tak. Něco jiného je robot vyhledávače. Ten odkazy na externí CSS jednoduše ignoruje a nestahuje je. Bohužel namaštěné CSS přímo do HTML si bohužel stáhnout musí a pak ještě tento balast musí vyházet. Pokud by všichni kodéři na světě dodržovali zásady HTML, tak Google ročně ušetří miliony dolarů zbytečně vyhozené za stahování a vyhazování něčeho, co do HTML nikdy nepatřilo. Neučte orla létat a raději se přihlaste k někomu znalému na kurz: Školení

dáš mi svolení tě citovat? Až vám příště budu přednášet, tohle je krásná ukázka.Mnou odkázané standardy slovo nekorektní nepoužívají, můžeš poskytnout paragraf, kde se tak činí? V době jsme tohle řešili v diskuzních skupinách w3c, byly velké spory o tom, jestli v dokumentu pouze popisovat technickou strukturu nebo naopak přidat i sémantické návody na použití či nedoporučení postupů, většina se ale klonila a k tomu, že co je moderní v jedné době nemusí být in v jiné. Boj o tabulkové layouty si každý pamatuje, ukončilo ho až technické omezené na straně prohlížečů (tabulku nebylo možné renderovat postupně).Rozlišuj inline css (jako atribut u tagu) a css uvnitř style tagu (či elementu). Vliv inline css u Google je složitě měřitelný (jako jakýkoliv jiný parametr) a dával bych si pozor na tak tvrdá konstatování, u Seznam informace o inline/style css není součástí atributů, které jdou do stromů.Sám Google inline css doporučuje jako techniku pro zlepšení performace webu za určitých okolností (v Developer tools si to každý může změřit sám). Před pár lety dokonce nabízel službu, která inline css u webů dělala.Google robot odkazy na externí css neignoruje, dokonce to sami popisují: "For optimal rendering and indexing, always allow Googlebot access to the JavaScript, CSS, and image files used by your website". Seznam je v současné době opravdu ignoruje, ale doba se mění a bude to také plně zohledňovat.Na externí soubor musí prohlížeč udělat http dotaz, datový objem šetří korektní vrácená http hlavička 304, kdy prohlížeč použije již u sebe uloženou verzi a nic nestahuje. Http dotaz na soubor může být za určitých okolností problematický, zejména na sítích s vysokou latencí. Http/2 řeší režii takovýhle http spojení a recykluje již existující TCP sezení, tím je možné mít u moderních prohlížečů i více css souborů a vliv na rychlost to nemá značný. Vkládání malých css předpisů přímo do html je právě způsob jak zlepšit uživatelské pohodlí, web se pak dokáže načíst jediným http dotazem, dokonce v některých případech se do html vkládají i samotné obrázky. Určující je výsledný objem html souboru, nic se nemá přehánět :). Tohle není tolik věci kodéra, ale samotného redakčního systému jak se rozhodne.Barva textu je velice důležitá pro uživatele, Google jí hodnotí, na druhé straně to býval častý způsob u black seo jak mít na stránce texty pro vyhledávače, které uživatel neviděl (stejná barva textu jako pozadí), dnes jíž Google tohle vše detekuje a penalizuje.O tom, že bychom v Seznamu měřili a měli kpi na spotřebu proudu při parsování html style atributů slyším poprvé, zeptám se provozu, tohle zní vtipně :).Možná se na tvoje školení podívám a napravím některé tvoje mýty ohledně fungování "internetu".

Napsal TomášX;1443312

TomášiX motáte páté přes deváté a sčítáte hrušky s jabkama a navíc to násobíte melouny. Nebudu vám dementovat nesmysly, protože jich jsou ve vašem textu desítky a dementování by vydalo už na malou knihu. Navíc byste to asi stejně nepochopil, protože na místo pochopení se jen snažíte posbírat argumenty i v oblastech, které s tématem vůbec nesouvisí. Uvedu jeden nesmyslný argument z mnoha. Např. vůbec nechápete rozdíl mezi běžnými roboty a roboty hledajícími podvodné techniky. Běžné roboty CSS prostě nezajímá, což můžete vidět ve statistikách návštěvnosti serveru, do kterých jste se zjevně nepodíval. Běžný robot při každé návštěvě nezkoumá, zda nemáte stejnou barvu textu jako pozadí. Pokud by to dělal každý den při každé návštěvě, tak by vyhledávače ekonomicky nepřežili. CSS si stahují jen specializovaní roboti, kteří většinou prověřují udání. Ti potom stahují nejen CSS, ale JavaScrip, datovou strukturu obrázků atd. Tím, že jsem smotal páté přes deváté jsem zmátl ještě větší laiky, než jste vy. A z takových nesmyslů se váš text skládá prakticky celý. Na stranu druhou. Díky lidem jako jste vy, mám já práce víc, než dokážu zvládnout. Takže bych vám měl vlastně děkovat, že tyto nesmysli šíříte. Tím tuto debatu končím, pro zbytek se přihlaste na školení, nejsem charita.

Robot od Seznamu generuje průměrný tok z nix 15 Gb/s, co myslíš, že pořád dokola stahuje? Html tvoří 15 % stahovaného objemu. Google stahuje už několik let rovnou celý obsah webu vč. css/js/obrázků, Seznam statické soubory stahuje bokem a jen pomalu jdou do parametrů indexace, má třeba specializovaného robota na snímky webu, google snímek webu dělá při jeho indexaci, jeho robot do českého nixu generuje průměrný datový tok 20 Gb/s. O tom, že bychom v Seznamu měli specializovaného robota hledající podvodné techniky slyším poprvé od tebe, děkuji za informaci :).By mě zajímalo odkud tvoje znalosti pocházejí, ještě před pár lety jsi nic takového netvrdil a dalo se s tebou o tématu dobře hovořit, teď to vypadá, že vše zakládáš na svých domněnkách a iluzích.

ad 1 - externí css a zapnuté http/2ad 2 - webp (s fallbackem pro prohlížeče, které ho nepodporují ... pro generování a kompresi třeba https://kraken.io/)

Napsal Tomáš Herout;1443289

Studujete špatně. Google i Seznam vám za inline styly dávají vždy body dolů. To je zcela nesporný fakt už minimálně 10 let, což je doba, po kterou se tímto živím. Ještě si mi nestalo, aby některý z mých kolegů tvrdil opak, protože by byl za blbce. Důvod je velice jednoduchý. Roboty Google a Seznamu nějaké CSS nezajímají. Je zajímá jen obsah (texty, obrázky, tabulky, odkazy...). Stejně je převede do čísel, tak na co by mu byla třeba barva textu. Tím, že dáváte CSS do HTML, tak spotřebováváte výkon jejich serverů, jinými slovy, stojíte Google a Seznam peníze. Za to vás krásně ohodnotí minusovými body. To je vcelku logické.

Není to logické, je to naprostý nesmysl. Tohle platilo možná tak před těma 10 rokama, kdy robot poznal dobrou stránku skutečně jenom na základě technikálií jako je to o čem mluvíš. Tahle doba je už ale hodně dlouho pryč a tyhle věci mají nulovej, nebo téměř nulovej vliv.Vyhledávač má jedinej úkol - najít návštěvníkovi stránku, která nejlíp zodpoví jeho dotaz. A to dělá. A dělá to podstatně inteligentnějším způsobem, než hodnocením čehokoliv, co nemá na informaci předávanou návštěvníkovi žádnej vliv - tedy věc typu existence inline stylu. Proč by měl taky něco takovýho řešit? Proč by měl například dávat "mínusové body" webu, kterej sice návštěvníkovi perfektní odpoví na jeho dotaz, ale má inline styly? Není k tomu jedinej logickej důvod. Taky že to vyhledáče nedělají. A indexovací roboti dneska zvládnou nepoměrně složitější věci - například přelouskat single-page aplikace v JS, rozpoznat styly a dle toho něco ohodnotit - například odhalit "black-seo",... Nějakej inline styl jim fakt nedělá žádnej problém.Snad tyhle nepodložený bludy nešíříš i na těch přednáškách, na který v tom příspěvku odkazuješ.

Napsal Registrace;1443418

Není to logické, je to naprostý nesmysl. Tohle platilo možná tak před těma 10 rokama.

Vyhledávač má jedinej úkol - najít návštěvníkovi stránku, která nejlíp zodpoví jeho dotaz. A to dělá. A dělá to podstatně inteligentnějším způsobem, než hodnocením čehokoliv, co nemá na informaci předávanou návštěvníkovi žádnej vliv - tedy věc typu existence inline stylu.

Snad tyhle nepodložený bludy nešíříš i na těch přednáškách, na který v tom příspěvku odkazuješ.

O tom, že Google a Seznam má algoritmus, jak vyhodnocovat, který odkaz bude první, druhý... už jste někdy slyšel? Pokud neslyšel, tak věřte, nebo nevěřte, že ho má. Jeden z mnoha faktorů je i dodržování standardů HTML. O standardech HTML už jste slyšel? Pokud ne, věřte, nebo nevěřte, že existují. Inline styly jsou ať tomu věříte nebo ne porušení pravidel HTML. Pokud neumíte vložit CSS styly do externího souboru je dobře, že se neživíte tvorbou webů. Jsem rád, že je tolik lidí nevzdělaných, díky tomu se nemusím bát o práci.

Když

Napsal Tomáš Herout;1443421

O tom, že Google a Seznam má algoritmus, jak vyhodnocovat, který odkaz bude první, druhý... už jste někdy slyšel? Pokud neslyšel, tak věřte, nebo nevěřte, že ho má. Jeden z mnoha faktorů je i dodržování standardů HTML. O standardech HTML už jste slyšel? Pokud ne, věřte, nebo nevěřte, že existují. Inline styly jsou ať tomu věříte nebo ne porušení pravidel HTML. Pokud neumíte vložit CSS styly do externího souboru je dobře, že se neživíte tvorbou webů. Jsem rád, že je tolik lidí nevzdělaných, díky tomu se nemusím bát o práci.

To že jedním z mnoha faktorů je i kvalita kódu nikdo nezpochybňuje. Nicméně Google samozřejmě dokáže poznat, jestli je něco proti validitě problém i ve vztahu k uživateli. A pokud to problém není, tak mu to je logicky úplně fuk. Musí u to být fuk, protože by to nedávalo smysl. Jak jsem psal - Google nebude znevýhodňovat relevantní stránku jenom proto, že daná stránka obsahuje inline styl - o kterém uživatel neví, nijak nepozná, že tam je a v žádným případě nic negativně neovlivňuje. Spíš naopak - inline styl může to být přínosem pro uživatele, protože je to jedna z technik pro zlepšení performance webu, kterou Google mimo jiné sám doporučuje (jak už ti tu psal někdo vejš). Využívá se to, je to přínosem a Google to doporučuje, i přesto, že je to vůči HTML nevalidní.Konec konců - zkus se podívat do zdrojáku samotných webů od Google. Jenom namátkově jsem prošel první tři stránky, které mě napadly. Vyhledávání, Youtube a nápovědu. Co tam najdeš? Ano. Hromady inline stylů v hlavičce.Dneska se inline styly používají naprosto běžně. Jako critical CSS, CSS in JS u SPA,...Tvoje znalosti ohledně toho SEO evidentně pochází z těch dob před 10 rokama, kdy to tak opravdu fungovalo. Ale svět se od té doby fakt hodně změnil.