No Future
Weblog přesunut na atd.havrlant.net
Nenechte uživatele čekat
17 listopad 2005, 14:03
rubrika XHTML-semantika
Co je horší než nelogicky uspořádaná stránka, nepodtržené a špatně výrazné odkazy, nesprávně formátovaný text nebo přemnoho animovaných gifů na každé stránce? Odpověď je jednoduchá – stránka, která se načítá déle, než si průměrný uživatel stačí uvařit kávu.
Není snad nic horšího, než když kliknete na odkaz a ještě dlouho vidíte, že se prakticky nic neděje. Támhle je načtený nějaký obrázek, počítadlo ukazuje kolikátý jste návštěvník, nahoře bliká relkamní banner, ale samotný obsah stránky nikde. To je pochopitelně špatně.
Z tohoto příkladu plyne jedno jednoduché ponaučení. Obsah stránky by měl být ve zdrojovém kódu pokud možno co nejvíce vepředu. Nemělo by před ním být velké množství obrázků – pokud možno žádný (i logo se může vkládat jako pozadí nějakého divu nebo až na konec stránky s tím, že se potom napozicuje nahoru). Stejně tak není dobré mít před obsahem spoustu externích skriptů jako vkládání reklamních bannerů nebo počítadel. Ve chvíli, kdy bude načtený obsah, uživatel si již může číst a mohou tak být vesele načítány další a další obrázky.
Dále si je nutné uvědomit, že pro každý externí objekt (obrázek, flash, css soubor atp.) musí být vyslán http požadavek, což znamená další zdržování načítání. Neboli jeden obrázek o velikosti sto kilobajtů se načte rychleji než sto obrázků každý o velikosti jeden kilobajt.
Poslední věc, kterou může webdesigner lehce ovlivnit, aby se stránka
načítala co nejrychleji, je pochopitelně velikost stahovaného souboru. Což
znamená upravit html kód (nebo css) tak, aby byl co nejmenší. Musíte si
uvědomit, že každý zbytečný bajt může nepříjemně navýšit
výslednou velikost souboru, tudíž je nutné, se takovýchto zbytečných
bajtů zbavit. K tomu se moc nehodí novodobý a
postmoderní jazyk xhtml, kde žádné z následujících úprav
zdaleka nejsou validní, takže se hodí spíše na obyčejné a
zastaralé html. Ale už jen tím, že se odhodlám psát v html
namísto xhtml ušetřím několik bajtů, protože nemusím psát všude
lomítka, nemusím psát namísto hodnota –
hodnota="hodnota" apod.
Úpravy v html kódu
- Vynechte zbytečné ukončovací tagy jako například
</td>,</tr>,</li>,</dt>,</dd>,</p>,</option>. Tyto tagy jsou vesměs zbytečné, prohlížeč si bez problémů domyslí, že dva<p>za sebou asi neznamenají, že jeden odstavec by byl vnořený do druhého, protože to je prostě nesmysl. Stejně tak deset<li>také nebude zanořovat stále do sebe, ale vykreslí to jako úplně normální seznam. - Nepoužívejte komentáře, každý webdesigner by se měl ve svém kódu vyznat a každý komentář pouze zbytečně zvyšuje velikost výsledného souboru. Uživatel z komentáře nic nemá a pokud uživatel z nějaké části kódu, která není nezbytná, nic nemá, nemá tam ten kód co dělat. Daleko rozumější je dávat například divům srozumitelný identifikátor.
- Nepoužívejte uvozovky, když nemusíte u každého
atributu, v jehož hodnotě se nevyskytuje nějaký zvláštní znak
(procento apod.) uvozovky používat nemusíte. Stejně tak se tam nesmí
objevit mezera, tudíž u jednoslovného altu uvozovky nejsou potřeba.
Takže můžete napsat toto:
<img src=vedeni.jpg width=50 height=50 alt=asdad.dsaf>ale už ne tohle<img src=http://weblog.oflashi.net/vedeni.jpg width=50% height=50% alt=asdad dsaf>. Prohlížeče to sice nějak přelousknou, ale neriskoval bych. Každopádně když je hodnota altu rozdělená mezerou a není to celé v uvozovkách, prohlížeč přečte pouze první slovo. - Vyhněte se entitám, pokud je to ve vašich silách.
Občas vídám na některých jednoduchých a statických stránkách místo
normálních znaků „ř“ entity. Není jednodušší zapsat
správné kódování? Další poměrně častá entita je pevná mezera
, která se někdy používá jako odsazení (zbytečně, k tomu sloužípaddingnebomargin) nebo se vkládá mezi jednopísmennou spojku (či předložku) a následující slovo, aby se nikdy ono jedno písmenko nezobrazilo na konci řádku. Podle mě je to zbytečné (Derovi se teď patrně otevírá nůž v kapse;-). Pochopím to v tištěné verzi, ale na internetu je zbytečná zhýralost. Já si toho stejně nikdy nevšimnu, že je poslední písmenko na konci řádku a i když nějakou náhodou ano, tak mě to nijak nepohorší. Příčina možná bude v tom, že polovina národa ani neví, že se to takto má zapisovat. Navíc text na webu bývá obvykle zarovnán doleva a vpravo tak vznikají nepříjemné nerovnosti textu, kde se „a“ na konci rozhodně ztratí. Vzhledem k tomu, že správně zapsaná pevná mezera má celkem šest znaků, může ve větším množství pořádně zavařit. - Používejte kratší zápis barev – dlouho jsem nevěděl, že například tento zápis #fff je pouze zkráceně #ffffff. Neboli pokud za mřížkou uvedete pouze tři hodnoty, počítá se, jako by každé písmenko bylo za dvě. Neboli #fad je ve skutečnosti #ffaadd.
- Vynechte zbytečné meta tagy jako například author, copyright, date apod. Běžný uživatel tyto hodnoty stejně nikdy neuvidí, tudíž tento úsek kódu je tam zbytečně. Rozhodně deklarujte znakovou sadu a description, nad keywords bych se ještě zamyslel, většina vyhledávačů klíčová slova stejně nebere v potaz.
- Vymažte bílá místa mezera je znak jako každý jiný, tudíž zabírá místo. Ale tyto mezery opět uživatel neuvidí, takže tam nemají co dělat. Naprosto ideální je na konci zformátovat html kód do jednoho řádku, tím opět ušetříte docela dost místa.
- Používejte tagy
<b>namísto<strong>, má to stejný efekt, i co se týče vyhledáváčů (alespoň jsem o tom byl přesvědčem v této diskusi). Každopádně uživatel neuvidí rozdíl mezi<b>a<strong>tak nevidím důvod, proč<b>nepoužívat. Stejně tak je jednodušší<i>namísto<em>– zde ale ten rozdíl není až tak důležitý, neboť<i>je kratší pouze o jedno písmenko. - Pokud chcete barevně zdůraznit nějaký text, opět k tomu
použijte <b> nebo <i>, je to tak správné. Pokud chcete
mít nějaký text barvně odlišný od ostatních, patrně to děláte
z toho důvodu, abyste byl text důraznější. To znamená opět
použijte
<b>, které pouze nastylujte. Připadá mi, že mnoho lidí neví, že i tyto značky jdou nastylovat. Tento zápis je naprosto v pořádku a prohlížeč zobrazí tučné zelené písmo:b {color:green}. Stejně tak můžete nastylovat ostatní tagy. Pokud byste ovšem chtěli mít na stránce tučné písmo i tučné zelené písmo, máte v zásadě dvě možnosti (nepočítám-li použítí nějaké třídy, což opět zvětší výsledný soubor). Buď použít<b>a<strong>, z nichž jedno přestylujete na zeleno nebo přestylujete tag<i>. Sémantika by měla zůstat bez újmy, příkaz<i>bude stále označovat důležitý text, jenom nebude vypsán kurzívou. Teoreticky můžete i přestylovat<u>ale to už je jenom pro odvážné. I když i tento tag by měl v zásadě vyznačovat důležitý text. - K formátování dokumentu používejte css.
K tomu asi není co dodávat, prostě namísto tisíců značek
<font>použijte třeba jednu deklaraci v css. Ale i css se dá jednoduše zmenšit:
Úpravy v css
- Opět vymažte bílá místa a vymažte komentáře. Obě tyto věci tam jsou prostě k ničemu. Pokud máte vhodně zvolené identifikátory, nejsou komentáře potřeba. Zároveň se ale snažte dávat identifikátory a třídy co nejkratší, využívejte logických zkratek.
- Využívejte dědičnosti, nemusíte pro každý odstavec, který se nachází v jiném bloku deklarovat pořád a to samé písmo, když můžete druh fontu zapsat již pro body a měnit písma pouze tam, kde je to nutné.
- Stejné vlastnosti pro vícero selektorů deklarujte zároveň. Takže pokud chcete, ať je každý nadpis zelený, podtržený, psaný kurzívou, ať má stejný margin a padding a jen se liší velikostí písma, je nejjednodušší zápis tento – je to daleko jednodušší, než psát každý nadpis zvlášť.
h1, h2, h3, h4 {color:green;
text-decoration:underline;font-style:italic;padding:5px;margin:10px;font-size:2em}
h2{font-size:1.8em}
h3{font-size:1.6em}
h4{font-size:1.4em}
- Využívejte zkrácených zápisů například pro font,
margin apod. Zkrácený zápis tedy vypadá asi takto:
font: style variant weight size/line-height family. Kupříkladu margin se dá zapsat buď jakomargin-left:10px,margin-right:15pxatd. Nebo se dají napsat všechny strany do jednoho zápisu:margin:nahoře vpravo dole vlevo. Stejně tak i padding. Pokud napíšete pouze dvě hodnoty, tak první značí nahoře a dole a druhá pak vlevo a vpravo – asi takto:margin: nahoře-dole vlevo-vpravo. Stejně tak padding. Obdobně se dají zapisovat vlastnosti jako border nebo background. - Nepoužívejte zbytečně třídy a identifikátory snažte
se najít jiné řešení, pokud chcete odlišit třeba dva odstavce.
Kupříkladu kdybyste chtěli, aby odstavec v patičce měl jinou barvu
než ve zbytku stránky, stačí použít něco takového:
#patka p {color#999}Všechny odstavce kromě toho v patičce budou mít barvu, kterou jste deklarovali někde výše – třeba v body – a nemusíte tak používat pro každý takovýto odstavec třídu. - Nepoužívejte středníky, když to není nutné, což
znamená, nepiště středníky na konci deklarace nějakého prvku (tzn. před
uzavírací závorkou). Například tady je středník zbytečný:
h1{color:#0b0;}. - Nepodlehněte validátoru, pokud vám bude házet nějaké warningy. Ve Většině případů to je chybějící vlastnost background, pokud máte u něčeho deklarovanou vlastnost color. Je to nesmyslná chyba, kterou nemá cenu opravovat.
Poznámka na konec: Tento článek je silně inspirovaný knihou Zrychlete své www stránky, kdo ji četl, patrně to již poznal. Chtěl jsem napsat takovýto článek již dlouho a na pomoc jsem si právě koupil tuto knihu, leč nic převratného v ní nebylo. Většinou potvrdila mé domněnky. Takže tento článek by se dal brát za krátký a stručný výcuc z oné knihy (plus několik mých postřehů, které v knize nebyly).
Nemá cenu optimalizovat pouze nějakou část kódu. Buď provedu
optimalizaci všeho (nebo alespoň většiny) nebo vůbec. Nemá smysl si
říct, no dobře, tak já vymažu všechny </li> a bude
to. To nemá prakticky žádný význam. Já jsem se zde zabýval pouze
html+css, protože javascript nebo třeba php neumím prakticky vůbec.
Můžete také optimalizovat obrázky, tam se většinou projeví změna
nejvíce.
Související:
Na co
stránka při vykreslování čeká
Co ovlivňuje rychlost
stránek
komentáře
Hledej na weblogu:
Ereses
— 18. listopad 2005, 11:42
„Vynechte zbytečné ukončovací tagy“… „Nepoužívejte uvozovky, když nemusíte“… „většina vyhledávačů klíčová slova stejně nebere v potaz“
Tak to je snad špatný vtip :))). To by mě zajímalo, kdo hlavně ty první dvě „pravidla“ vymyslel, jistě to byl nějaký velký profík :))).
— 18. listopad 2005, 11:56
Lukáš: Vítej, jmenovče. A k čemu jsou ukončovací tagy? Uvozovky jsou také vcelku k ničemu, když to prohlížeče berou a pokud vím, tak klíčová slova už bere v potaz snad jenom jyxo.
Navíc všechny úpravy jsou validní.
— 18. listopad 2005, 14:22
Já vím z vlastní zkušenosti, že z webu stačí oddělat všechny tabulky, veškeré formátování zahrnout do CSS a strukturu stránky udělat pomocí divů a výsledné načítání je pak mnohem rychlejší, než u stejně udělaná stránky v tabulkách i bez ukončovacích tagů. A navíc je to i XHTML 1.1 validní.
Tenhle článek si pak třeba přečte plno lidí, kteří se chtějí naučit tvořit web, a potom to taky tak dopadne – prasácký sránky s ještě prasáčtějším kódem :/. Dřív jsem to taky dělal tak, jak radíš, ale zjistil sem, že tudy cesta nevede… Tvoje změny jsou sice validní v HTML, ale to už se pěkně dlouho nevyvíjí, takže nevidím důvod, proč dělat v něm…
— 18. listopad 2005, 14:25
Teď mě tak napadlo… jak uděláš bez uvozovek:
div style=font-size: 11px; border: 0px;
Toto by asi neprošlo… a to je jen příklad.
— 18. listopad 2005, 15:13
Lukáš: prasácký sránky s ještě prasáčtějším kódem – nevybízím k prasáckému kódu. Všechny úpravy jsou html strict validní. Ale zase na druhou stranu – většina sránek bývá prasácká, už to tak bude;-)
mnohem rychlejší, než u stejně udělaná stránky v tabulkách – v celém článku se spojení tabulkový layout nevyskytuje, nereaguj na něco, co jsem nenapsal. Já sám snad ani tabulkový layout neumím.
Tvoje změny jsou sice validní v HTML, ale to už se pěkně dlouho nevyvíjí, takže nevidím důvod, proč dělat v něm – já zase nevidím jediný rozumný důvod, proč by měl průměrný (případně i neprůměrný) webdesigner psát v xhtml.
K tomu tvému příkladu – viz článek: u každého atributu, v jehož hodnotě se nevyskytuje nějaký zvláštní znak – dvojtečka, středník, mezera. Navíc mě něco takového ani nenapadlo, to se přiznávám, měl jsem na mysli běžné html atributy, ne přímý zápis stylů.
— 18. listopad 2005, 15:36
„mnohem rychlejší, než u stejně udělaná stránky v tabulkách – v celém článku se spojení tabulkový layout nevyskytuje, nereaguj na něco, co jsem nenapsal. Já sám snad ani tabulkový layout neumím.“
viz. "Vynechte zbytečné ukončovací tagy jako například , " (to byla reakce na toto) :)
— 18. listopad 2005, 15:37
Tak ještě jednou, „Vynechte zbytečné ukončovací tagy jako například /td, /tr“
— 18. listopad 2005, 15:47
No ale tabulka má i jiné uplatnění než tabulkový layout. Dokonce bych řekl, že i sémanticky správnější. A přesně v těchto případech nejsou ty ukončovací tagy nutné.
I mimochodem – i stránka psaná v html může mít moderní css layout;-)
— 18. listopad 2005, 15:49
Dobře, dělej jak myslíš…
— 19. listopad 2005, 11:40
A proč se svými radami neřídíš? ;)
— 19. listopad 2005, 12:00
Acci: tak textpattern produkuje xhtml, takže se do toho jen těžko napasuje html. I když – zvaliduj si tenhle weblog… Musím s tím něco udělat, buď to přemluvím na html nebo se budu muset smířit s xhtml a psát xhtml.
Jinak oflashi.net je moc velké, to se mi předělávat nechce (navíc tam 90% velikosti souboru tvoří prostý text – je to přece jenom informační web – který zkrátit nejde, protože je tak akorát) a na těch pár ostatních webů teprve přijde řada, neboj.
— 30. listopad 2005, 19:57
Perfektní článek. 80% popisovaných věcí používám, na nadpisy používám stejnou vychytávku s hromadnou deklarací a následným přepisem pouze těch vlastností, které se mění. Jako perličku mám, že jsem v diskusi na JPW našel odkaz na CSS optimalizátor, pár lidí si pochvalovalo, jak jim smrsknul css kódy a po prohnání optimalizátorem mi vypadl delší kód, než jsem do něj vložil. Musím ale uznat, že pár míst skutečně zoptimalizoval lépe, než já. Jak se tak dívám na tvůj článek, i tobě by z optimalizátoru vypadlo větší CSS, než do něho „hodíš“.
— 25. leden 2006, 02:31
Skvělé. Při čtení mě však napadla ještě geniálnější myšlenka:
Pryč s XHTML a zpět ke starému dobrému HTML! Proč psát tak dlouhé ‹br /›, když můžeme psát pouze ‹br›. To je úspora celých dvou znaků!! A to nemluvím o ušetřeném X v DTD…
Děkuji za tento revoluční článek. Jsem rád, že alespoň někdo si uvědomuje rozsah, jakým tvůrci stránek plýtvají kapacitou linek. Tedy spíš ti tvůrci, kteří ještě neslyšeli o mod_gzip…