CW(3,x) Prioritizace smysluplného obsahu čistě přeskupením HTML a CSS layoutu

Z Google webmaster academy víme, že Google zahrnuje rychlost načítání obsahu našich stránek do kritérií, z kterých poté počítá svůj index, na kterém mimo jiné záleží pozice stránky našeho webu v organickém vyhledávání Google.

Google k tomu dokonce poskytuje nástroj PageSpeed Insights, který nám na našem konkrétním webu ukáže co by se dalo vylepšit a jak si na tom s jeho rychlostí stojíme. Když pátráme hodně hluboko, zjistíme, že sleduje řadu obtížně vymezitelných faktorů, jimiž skóre rychlosti počítá, jako:

První vykreslení obsahu,
Index rychlosti,
Doba do interaktivity,
První smysluplné vykreslení,
a další.

Teorii stojící za jejich pozadím uvádím dole ve zdrojích a můžete si ji přečíst v originálním znění. Je však silně rozsáhlá a složitá. Jak to tak pročítáte, zjišťujete, že vše se točí kolem co nejkratšího času do prvního vykreslení smysluplného obsahu. Smysluplný čas má být ideálně pod dvě vteřiny. Tím smysluplným obsahem je skutečný obsah vaší stránky, tedy nikoli menu, banner, reklamy, dekorativní grafika atd.

Upřednostnění obsahu změnou HTML a CSS layoutu

Nastíním vám zde postup jak upřednostnit smysluplný obsah jeho vyjmutím z přirozeného toku HTML kódu a jak pomocí CSS absolutního pozicování vytvořit layout stránky tak, aby vypadala jako přirozená. Tímto postupem jsem si kdysi zvýšil moje Speed skóre z 74 na 96.

Princip

Principem je udělat z layoutu 1 layout 2 tak, že v prohlížeči oba vypadají úplně stejně. Přitom v layoutu 1 teče HTML přirozeně shora dolů a obsah zleva doprava dolů pomocí relativního pozicování, floatů, a stránka se načítá v přirozeném pořádku shodně s načítáním HTML kostry stránky. To má tu nevýhodu, že napřed jde úvodní bitmapa, horní menu, levé menu, PAK TEPRVE OBSAH, po něm další prvky.

Je to pouze jeden z přístupů a celkem jsem je kombinoval čtyři. A Google Centrála pro webmastery vám jich nabídne mraky. Zatímco přístupy jako prioritizace položek v hlavičce HTML, odložení javascriptu a optimalizace stylesheetů se mi na skóre projevily asi čtyřmi body ve skóre, předefinování layoutu se projevilo oním nejzásadnějším způsobem. Tedy:

V toku HTML dám obsah co nejdříve za <body> jak to jen jde,
až pod něj dám <footer>,
pak dropdown menu,
a až na konec načítám <header> s úvodní bitmapou a citáty.

Účel je jasný - v toku HTML je obsah článků načten jako první! A nejméně nutné avšak objemné dekorativní a neobsahové prvky jako poslední!

V dalším vysvětlování uvádím:

1 obrázek layoutu - původní, výchozí, přirozený, jako někdy po roce 2000
1 jeho HTML
1 jeho CSS layout s přirozeným pozicováním

a cílem je udělat z toho:

2 obrázek layoutu - upravený, novodobý, absolutně pozicovaný, nepřirozeně přeskupený, jako v moderních prohlížečích někdy po roce 2018, ale přesto vypadá skoro stejně, jako při přirozeném toku kódu
2 jeho přeskupené HTML prvky layoutu
2 jeho CSS layout s absolutním pozicováním

1 Klasická HTML šablona s přirozeným tokem prvků 1

<!doctype html>
<html>
<head> .. </head>
<body>
<header>
<div id="citaty"> .. </div>
</header>
<main>
<section>
<nav> .. </nav>
<article> .. </article>
<div id="vpravo"> .. </div>
</section>
<footer>
<div> .. </div>
</footer>
</main>
</body>
</html>

1 CSS šablona pro přirozené rozložení prvků s přirozeným tokem textu 1

@charset "utf-8";
html {
word-wrap: break-word;
font-size: 100%;
}
body, header, section, footer, aside, nav, main, article, figure {
display: block;

Všechny pozicovací elementy jdou do bloku tak jako tak.
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
body {
top: 0px;
padding: 0px;
width: 1440px;
}

header {
position: relative;
height: 300px;
width: 100%;
top: 0px;
left:0;
right: 0;
float: left;
clear: both;
background-image: url(.....);

Před obsahem se načítá celý header s dropdown menu a bitmapou pozadí.
background-repeat: no-repeat;
}
#citaty {
position:relative;
float:left;
top:200px;
left:50px;
width:550px;

Před obsahem se načítá vše kolem úvodního citátu.
}
main {
position: relative;
float:left;
clear:both;
width: 100%;
}
section {
position: relative;
left: 0px;
top: 0px;
float: left;
}
nav {
position: relative;
float: left;
clear: left;
top: 0;
left: 0px;
width: 300px;
padding: 0px;

Před obsahem se načítá také levé menu se všemi bitmapami a odkazy.
}
article {

Toto je teprve smysluplný textový OBSAH.
position: relative;
float: left;
left: 0;
top: 0;

width: 820px;
height: auto;
padding-left: 5px;
padding-right: 5px;
text-align: left;

A vše pod ním nás už vlastně nezajímá.
}
#vpravo{
Pravý sloupec obsahu.
position: relative;
float: left;
clear: right;
left: 0;
top: 0;
width: 300px;
height: auto;
}
footer {
Patička šablony.
position: relative;
float: left;
clear: both;
width: 1200px;
padding: 20px;
}

2 přeskupená HTML šablona s nepřirozeně tekoucími prvky layoutu 2

<html>
Pozice neviditelné HTML hlavičky je v DOM jasně dána, s tou jako s celkem nic nenaděláme. Musí být nahoře.
<head> .. </head>
<body>
<main>

Jako první viditelný prvek jde ihned article (obsah). Smysluplný obsah se vykresluje na nejsvrchnější možné pozici.
<article> .. OBSAH .. </article>
Oba postranní sloupce jdou až po obsahu a tentokrát oba vpravo. (Je to lepší pro mobily).
<div id="vpravo"> .. </div>
<nav> .. </nav>

Patička je hned pod nimi se zastaveným obtékáním.
<footer> .. </footer>
</main>

Dropdown menu, ačkoli se vykresluje jako úplně první nahoře, ve skutečnosti v toku HTML je až dole na předposledním místě. Dal bych ho na poslední, ale přece jen je to aktivní navigace, tak má přednost před hlavičkou.
<div id="dropdmenu"> .. </div>
Hlavička jako pasivní dekorativní prvek se v toku HTML načítá až nakonec, vykreslena je ale úplně nahoru spolu s Dropdown menu.
<header>
<div id="citaty" style="position:relative; float:left; top:160px; left:40px; width:800px;">
</div>
<div id="reklama" style="position: relative; float: right; width: 320px; height: 200px;"></div>
</header>
</body>
</html>

2 upravená CSS šablona pro absolutní pozicování nepřirozeně tekoucích prvků 1

@charset "utf-8";
html {
word-wrap: break-word;
font-size: 100%;
}

body, header, #main, footer, aside, nav, article, figure {
display: block;
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
}

body {
position: absolute;
top: 28px;
width: 100vw;
}

Hlavní kontejner je také vyjmut ze standardního toku (pos.abs.) a na ose Z má místo 1 (pod headerem, pod dropdownem).
#main {
position: absolute;
Svrchu má odsazeno 205 px; což je výška headeru plus 5 px navíc.
top: 205px;
left: 0;
z-index: 1;
width: 100vw;
}

Article jako jediný skutečný zdroj obsahu jde v main kontejneru ihned na první místo a teče doleva, relativně, má však pevnou šířku, aby se vedle něj vešly dva stejně vysoké sloupce.
article {
position: relative;
float: left;
left: 0;
top: 0;
width: 820px;
padding-left: 10px;
text-align: left;
}

Hned po něm teče také relativně a doleva první svislý sloupec. Vykresluje se mezi obsahem a druhým sloupcem se shodnou výškou nejvyššího z nich, což bývá většinou obsah.
#vpravo {
position: relative;
float: left;
left: 0px;
width: 290px;
padding: 5px;
height: auto;
}

Hned po něm teče také relativně a doleva druhý svislý sloupec s navigací. Vykresluje se vedle obsahu a prvního sloupce se shodnou výškou nejvyššího z nich, což bývá většinou obsah.
nav {
position: relative;
float: left;

Má zastaveno obtékání zprava, protože vedle něj v hlavním kontejneru už nic nenásleduje.
clear: right;
left: 0;
width: 300px;
height: auto;
}

Po všech třech svislých následuje vodorovný footer.
footer {
width: 100%;
position: relative;
float: left;

Má zastaveno veškeré obtékání, protože je pod třemi sloupci a roztažen na celou šířku.
clear: both;
left: 0;
top: 0;
background-image: url( .. );
background-repeat: no-repeat;
}

V HTML skoro nakonec následuje dropdown menu, které je tenkou vodorovnou linkou jako panel vykresleno úplně na vrchu stránky.
#dropdown menu {
Je nahoře v nezměněné pozici i při scrollování.
position: fixed;
display: inline-block;
float: left;

Vedle něj se nesmí zobrazit nic ani z jedné strany.
clear: both;
/*height: 34px;*/

Umístění na úplný TOP stránky.
top: 0px;
left: 0px;

Bez jakýchkoli odsazení a okrajů.
margin: 0px;
padding: 0px;
width: 100%;

Na pomyslné ose Z má nejvyšší pořadí, čili je úplně nahoře nad všemi elementy.
z-index: 4;
}

header {
Hlavička je vyjmuta z přirozeného toku absolutním pozicováním,
position: absolute;
height: 200px;
width: 100vw;

a ač je v HTML poslední, vykresluje se úplně nahoru.
top: 0;
left: 0;
background-image: url( .. );
background-repeat: no-repeat;

Pro pořádek věcí na pomyslné ose Z jsem jí dal druhé místo (nad obsahem, pod dropdownem).
z-index: 2;
overflow: hidden;
}

A tím je hotovo

Jak jste si mohli všimnout, hlavní vtip je kromě prioritizace obsahu také v tom, že po vykreslení vypadají oba případy navlas stejně, tedy kromě levého menu <nav> napravo. Pouhý čtenář vizuálně nepozná rozdíl. Jinými slovy dokument je v obou případech vykreslen s jakoby stejným pozicováním. V druhém případě je narušený přirozený tok HTML přeházen do takových pozic pomocí absolutního pozicování, aby to vypadalo stejně jako přirozený tok a relativní pozicování.

Čtenář nic s pozicováním nezaznamená, pocítí to však rychlostí načtení hlavního obsahu.

Zdroj

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

First Meaningful Paint
https://web.dev/first-meaningful-paint/?utm_source=lighthouse&utm_medium=unknown

Time to First Meaningful Paint
https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view#

DC home |
Portál vojenských technologií |
Ostatní články |
Organizační

Mahal je jen jeden z mnoha Tádžů, stejně jako Angkor je jen jeden z mnoha Watů.
DigCest