Zrychlete své WWW stránky

CYAN

MAGENTA

YELOW

CYAN

BLACK

MAGENTA

E N C Y K L O P E D I E

Uživatelská trpělivost je časovanou bombou na webu. Vše začíná v okamžiku, kdy se uživatel nedostane na vaše stránky z důvodu jejich pomalosti. Jako webdesigner musíte počítat s tím, že k dispozici máte pouze několik málo vteřin pro zobrazení obsahu. Po této době návštěvník ztrácí trpělivost a odchází z vašeho – ani nenačteného – webu. Vy ztrácíte eventuálního zákazníka a s ním i peníze.

Nemůžete počítat s tím, že každý váš navštěvník bude mít rychlé připojení k internetu. Nemá a v dohledné době ani mít nebude.

Převážná většina uživatelů internetu se připojuje pomocí pomalého dial-upu o rychlosti 56 kbps a tak je problém v rychlosti načítání webových stránek především problémem vaším. Návštěvníci instinktivně dávají přednost rychlejším stránkám – proč do této skupiny nepatří i váš web?

Tato kniha vám pomůže zmenšit velikosti vašich stránek a zrychlit tak podstatným způsobem jejich načítání. Dozvíte se, jak zmenšit HTML, CSS, webovou grafiku, multimediální soubory, JavaScript a další prvky stránky. Po přečtení knihy dokážete uplatnit uvedené postupy a sami poznáte rozdíl v rychlosti načítání vašich stránek!

ZONER software, s.r.o. významný producent software v oblasti digitální fotografie, počítačové grafiky a multimédií, poskytovatel internetových služeb, souvisejících s prezentací na internetu a e-komercí, a nakladatelství odborné literatury.

Z obsahu

• Optimalizace webové grafiky • Minimalizace multimédií • Optimalizace pro vyhledávače • Techniky optimalizace na straně serveru

www.zoner.cz

• Řada případových studií

E N C Y K LO P E D I E W E B D E S I G N E R A Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. Na vydavatelský plán a výhody, které můžete získat, se informujte na adrese vydavatelství.

ZONER software, s.r.o., Koželužská 7, 602 00 Brno

obal_speed_2.indd 1

MAGENTA

YELOW

KATALOGOVÉ ČÍSLO: ZR402

ISBN 80-86815-02-1

Zoner Press tel.: 543 257 244 fax: 543 257 245 e-mail: knihy@zonerpress.cz http://www.zonerpress.cz

CYAN

© Foto: Jiří Heller, www.heller.cz

Fotografie z nabídky fotobanky HELLER.CZ

BLACK

9 7 9 8 0 8 6

Zrychlete své www stránky!

Anrew B. King

a JavaScript

BLACK

W E B D E S I G N E R A

ENCYKLOPEDIE WEBDESIGNERA

Zrychlete své WWW stránky

• Psychologie výkonu • Odezva: 8 vteřin ± 2 • Tok ve webdesignu • Optimalizace HTML • Optimalizace DHTML: CSS

YELOW

Zrychlete své WWW stránky!

• Postupy pro efektivní

zmenšení webových stránek.

• Pokročilé metody optimalizace HTML, CSS a JavaScriptu.

• Úpravy webové grafiky

a minimalizace multimédií.

• Možnosti komprimace webových stránek.

• Psychologie výkonu a tok ve webdesignu.

• Optimalizace klíčových slov pro vyhledávací servery.

• Techniky

optimalizacena straně serveru.

• Množství případových studií a praktických postupů.

Andrew B. King Andrew B. King

www.zonerpress.cz

8 1 5 0 2 2

CYAN

MAGENTA

YELOW

BLACK 26.3.2004 13:04:13

Zrychlete své WWW stránky!

ZRYCHLETE své WWW STRÁNKY!

© Foto: Jiří Heller

Andrew B. King

Authorized translation from the English language edition, entitled SPEED UP YOUR SITE: WEB SITE OPTIMIZATION, 1st Edition, 0735713243 by KING, ANDREW B., published by Pearson Education, Inc, publishing as New Riders; Copyright © 2003.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. CZECH language edition published by ZONER software s.r.o., Copyright © 2004 Autorizovaný překlad anglického vydání nazvaného SPEED UP YOUR SITE: WEB SITE OPTIMIZATION, první vydání, 0735713243, autor KING, ANDREW B., vydal Pearson Education, Inc, ve vydavatelství New Riders; Copyright © 2003.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována nebo rozšiřována žádnou formou nebo způsobem, elektronicky ani mechanicky, včetně fotokopií a natáčení, ani žádnými jinými systémy pro ukládání dat bez výslovného svolení Pearson Education, Inc. České vydání vydal ZONER software s.r.o., Copyright © 2004.

Zrychlete své WWW stránky!

Autor: Andrew B. King Copyright © ZONER software s.r.o.

Vydání první v roce 2004. Všechna práva vyhrazena. katalogové íslo: ZR402 Zoner Press ZONER software s.r.o.

Koželužská 7, 602 00 Brno Překlad: Jan Gregor, Roman Slavičinský, Václav Šimek Odpovědný redaktor: Miroslav Kučera © Foto: Jiří Heller, HELLER.CZ s.r.o., www.heller.cz © Cover: Ing. Pavel Kristián Informace, které jsou v této knize zveřejněny, mohou být chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb.

Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí.

Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software s.r.o.

Koželužská 7, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz

ISBN 80-86815-02-1

Obsah O autorovi

11

O přispívajících autorech

12

O technických korektorech

13

Poděkování

14

Pošlete nám svůj názor

16

Předmluva

17

Úvod

18

Každá stránka může těžit ze své optimalizace

19

Kdo by měl číst tuto knihu

20

Komu není tato kniha určena

21

Jak pracovat s touto knihou

21

Doprovodná webová stránka

22

Konvence

23

Poznámky

23

Psychologie výkonu

25

Doba odezvy: Osm vteřin, plus – mínus dvě

27

Rychlost: klíčový prvek použitelnosti

29

Stručná historie výkonu na webu

30

Emoční počítače

31

Modely uživatelského hodnocení kvality

31

Automatizované testování kvality

31

Doba odezvy a uživatelská spokojenost

33

Míra opuštění webu a prahy pozornosti

37

Sladitelnost

40

Shrnutí

42

Poznámky

43

Tok ve webdesignu

49

Tok a Mihaly Csikszentmihalyi

49

Co způsobuje tok na internetu

51

Navození toku ve webdesignu

55

Shrnutí

56

Poznámky

56

Optimalizace kódu: HTML a XHTML

59

Optimalizace HTML

61

Co je optimalizace HTML?

62

Zvýšení složitosti = vyšší přenos dat

62

Jak moderní prohlížeče pracují s HTML

65

Jak optimalizovat HTML

66

Shrnutí

81

Poznámky

82

Pokročilá optimalizace HTML Tipy na optimalizaci tabulek

85 85

Optimalizace formulářů

102

Zkracování URL

108

HTML a komprimace

110

Shrnutí

112

Poznámky

113

Extrémní XHTML

115

Výhody XHTML

116

XHTML versus HTML

118

Syntaktická pravidla XML

122

Konverze z HTML do XHTML

128

Optimalizace XHTML

129

Shrnutí

133

Poznámky

134

Případová studie: PopularMechanics.com

135

Automatická optimalizace

139

Ruční optimalizace

140

Shrnutí

146

Optimalizace DHTML: CSS a JavaScript Optimalizace CSS

147 149

Aplikujte styly rozvážně

150

Odstraňte prázdné místa

151

Zkraťte komentáře

151

Minimalizujte požadavky HTTP

152

Používejte jednoduché selektory a substituce

152

Seskupování

155

Dědičnost

157

Vrstvení stylů pro rychlost

158

Zkrácený zápis vlastností

158

Optimalizace barev v CSS

167

Délkové jednotky: vše je relativní

169

Shrnutí

170

Poznámky

171

Pokročilá optimalizace CSS

173

Optimalizace pravidel CSS

173

Substituce

176

Tabulky a CSS

191

Řízení layoutu CSS

192

Shrnutí

195

Optimalizace JavaScriptu na rychlost stažení

197

Kdy se rozhodnout pro optimalizaci

197

Ořežte přebytečné

198

Aplikujte JavaScripty rozvážně

200

Minimalizujte HTTP požadavky

201

Zkracujte a mapujte

204

Drcení a zatemňování kódu

206

JavaScript a komprimace

209

Shrnutí

210

Poznámky

211

Optimalizace JavaScriptu na rychlost vykonání

213

Designérské úrovně

214

Změřte dopad vašich změn

214

Algoritmy a datové struktury

215

Zjednodušte svůj kód refaktorizací

216

Minimalizace interakcí DOM a I/O

217

Lokální optimalizace

222

Vylaďování výrazů

234

Shrnutí

236

Poznámky

237

Případová studie:DHTML.com

Optimalizace grafiky a multimédií Optimalizace webové grafiky

239

243 245

Získávání a příprava obrázků

246

Optimalizace souborů JPEG

247

Optimalizace souborů GIF

257

Optimalizace souborů PNG

264

Doba stažení: počet paketůversus velikost stránky

270

Na dohled: JPEG2000 a vektorovězaložená grafika

271

Shrnutí

272

Poznámky

274

Minimalizace multimédií

277

Základy multimédií

277

Komprimace a optimalizace audia

289

Optimalizace videa

296

Optimalizace formátu PDF

309

Shrnutí

313

Případová studie: Apple.com

315

Záložka Output

316

Záložka Tracks

316

Záložka Image

316

Záložka Adjust

317

Záložka Encode

317

Záložka Audio

317

Konečné výsledky

318

Optimalizace pro vyhledávače Optimalizace klíčových slov

319 321

Velký obrázek

321

Průvodce pro optimalizaci klíčových slov

324

Jak na pavouky

337

Charakteristika dobře hodnocených stránek

338

Shrnutí

340

Poznámky

341

Případová studie: PopularMechanics.com a iProspect.com

343

PopularMechanics.com

343

iProspect.com

348

Pokročilé techniky optimalizace

353

Techniky optimalizacena straně serveru

355

Server-Side Includes

356

Výhody SSI: rychlost a široká kompatibilita

357

Nevýhody SSI

358

Ladění modulu mod_include

358

Detekce prohlížeče na straně serveru

360

Zkracování URL s mod_rewrite

372

Optimalizace formulářů a CGI

379

Už žádné www

382

Shrnutí

383

Poznámky

384

Komprimace na webu

387

Algoritmy pro textovou komprimaci

388

Komprimace obsahu

389

Komprimace obsahu na straně klienta

391

Komprimace obsahu na straně serveru

394

Komprimace obsahu s proxy serverem

410

Nástroje na měření výkonnosti

411

Co nás čeká

413

Shrnutí

413

Poznámky

414

Případová studie: Yahoo.com a WebReference.com

417

Zkracování odkazů na Yahoo.com

417

Zkrácení WebReference.com

419

Poznámky

422

Kapitola 4 Pokročilá optimalizace HTML

Zkracovat lze pouze kód HTML, který je využit pro zobrazení stránky v prohlížeči. Pro úplnou optimalizaci HTML se musíte do kódu více ponořit a změnit jej. Tato kapitola popisuje, jak vyladit tabulky, zoptimalizovat formuláře, zkrátit adresy v odkazech a zkomprimovat HTML – to vše pro dosažení maximální rychlosti stažení a zobrazení stránky. Poslední dvě techniky vyžadují zvláštní kroky na serveru, které vysvětlím i v této kapitole, ale především v kapitole 17, Serverově orientované techniky a v kapitole 18, Komprimace webu.

Tipy na optimalizaci tabulek Je škoda, že tabulky přišly před CSS. Mnoho designérů, kteří navrhují design stránek s přesností na jeden pixel, bývá často rozčarováno, když zjistí, jak málo toho HTML nabízí pro ovlivnění spolehlivého umístění všech prvků na stránce. Někteří průkopníci, například David Siegel1, který představil trik používající jedno-pixelový neviditelný GIF, zjistili, že k hrubému rozmístění prvků na stránce je možné použít tabulky. Následovala exploze používání tabulek.

Tabulky byly původně zamýšleny pro zobrazování tabelovaných dat a jejich nadměrné používání pro design doslova znečistilo web na miliardách stránek zbytečnými formátovacími strukturami.

S příchodem moderních prohlížečů uznávajících standardy je možné tabulky nahradit lepší alternativou kterou je CSS2. Ale protože je tato část věnována tabulkám, předpokládám, že bych měl hovořit o technikách, které urychlí jejich zobrazení.

86

Zrychlete své WWW stránky!

Složité tabulky = pomalé zobrazení Používání tabulek pro zalamování složitých stránek mnohdy vede k pohromě. Obsah nacpaný do tří nebo čtyř sloupců ve struktuře, která byla původně vyvinuta pro uchovávání vědeckých dat, je velmi vzdálen původní myšlence webu definované organizací W3C. Designéři pracující s HTML editory ve WYSIWYG režimu obvykle zalomí stránku do jedné velké tabulky, do které vloží celý obsah. Často je tento obsah rozdělen na další tabulky, které mohou obsahovat opět velké množství dalších tabulek.

Problém spočívá v tom, že výpočty velikostí tabulek jsou dynamické a navzájem provázané.

Veškeré takové "spletitosti" musí být prohlížečem "rozmotány" a zpracovány, což je jeden z důvodů, proč je tak mnoho webových stránek zobrazováno pomalu, dokonce i s použitím velmi rychlého připojení k internetu. Čím je tabulková struktura složitější, tím je její zobrazování pomalejší, zejména při použití obrázků, které ji vyplňují nebo určují její rozměry. Každý z těchto obrázků generuje jeden požadavek HTTP, čímž výrazně zpomaluje zobrazení stránky. Řešení, jak urychlit tabulky, spočívá v předávání pouze takového množství informací prohlížečům, které je nezbytně nutné k vytvoření struktury a zobrazení obsahu a také v redukci složitosti tabulky.

Zkuste tabulky co nejvíce zjednodušit a "rozmotat". Pro naformátování tabulek použijte CSS, místo obrázků na pozadí použijte barvy a pokud je to možné, definujte tabulky s pevnými rozměry. Úplně nejlepším řešením je ale používat na zalamování obsahu prvky div a CSS2 místo tabulek. Ale tím se bude zabývat jiná kapitola (kapitola 8, Pokročilá optimalizace CSS). Začněme tedy s optimalizací tabulek.

Umožněte postupné zobrazování Pokud mají tabulky dostatek informací, mohou se vykreslovat postupně podle toho, jak přicházejí jednotlivé řádky namísto toho, aby prohlížeč čekal na všechny údaje, než je začne zobrazovat. Pokud chcete, aby prohlížeč vykresloval tabulku během jednoho průchodu kódem, musíte specifikovat počet řádků v tabulce a jejich šířku. Tuto informaci předáte prostřednictvím prvků colgroup a col. Pokud mají některé sloupce relativní šířku, je potřeba také určit šířku tabulky. Pokud prohlížeč nedostane tyto přesné údaje, zpracovává tabulku pomocí dvou-průchodového algoritmu, přičemž se při prvním průchodu zjišťuje počet sloupců. Předáním přesných informací o struktuře tabulek můžete tedy urychlit jejich zobrazení.2 Řádky a sloupce v tabulkách lze seskupit, aby se daly formátovat jako skupiny. V prohlížečích vyhovujících standardům – například Internet Explorer 5 pro Mac, Internet Explorer 6, Netscape 6 a Opera 6 – získáte sloučením atributů ohromné úspory. Pomocí atributů frame, rules a border je pak možné řídit, jak se zobrazí externí rámec tabulky a jak se budou aplikovat interní pravidla.

Seskupování řádků Řádky v tabulce mohou být použitím prvků thead, tfoot nebo tbody seskupeny do hlavičky, patičky nebo těla. Tyto skupiny se mohou formátovat odděleně a používat na tisk delších, vícestránkových tabulek, u kterých se má informace z hlavičky/patičky tisknout na každé stránce.

Kapitola 4 – Pokročilá optimalizace HTML

87

Například: <table frame="border" rules="groups"> <thead> <tr> ...informace v hlavičce... <tfoot> <tr> ...informace v patičce... <tbody> <tr> ...první řádek datového bloku jedna... <tr> ...druhý řádek datového bloku jedna... <tbody> <tr> ...první řádek datového bloku dva... <tr> ...druhý řádek datového bloku dva... <tr> ...třetí řádek datového bloku dva... </table>

Prvek tfoot se musí objevit ještě před prvkem tbody, takže prohlížeč může zpracovat patičku ještě před obdržením všech údajů o řádcích. Tato optimalizace používaná CALS3 je vhodná ke zpracování velmi dlouhých tabulek. Umožňuje, aby byla patička zobrazena bez čekání na zpracování celé tabulky4. Ale pro naše účely je mnohem důležitější schopnost seskupování a specifikování vlastností sloupců.

Seskupování sloupců Seskupování sloupců umožňuje strukturální zalamování tabulek a definovat styl sloupců pomocí CSS nebo atributu rules v prvku table.

Tabulka obsahuje jednoduchou implicitní skupinu sloupce (není uveden colgroup) nebo jednu a více přesně určených skupin sloupců oddělených prvkem colgroup.

Prvek col umožňuje přiřazení vlastností jednomu nebo více sloupcům. Pro vícenásobné sloupce se používá atribut span5.

S použitím atributu span v prvku colgroup lze specifikovat na jednom místě atribut width pro více sloupců. Atribut width je také možné vložit do každého prvku col. Efektivnější je pochopitelně definice stejně širokých sloupců prostřednictvím span: <colgroup span="10" width="60"> </colgroup>

88

Zrychlete své WWW stránky!

Pro porovnání, zde je alternativa s col: <colgroup> <col width="60"> <col width="60"> ...celkem deset prvků col... </colgroup>

Zjištění počtu sloupců V HTML 4.01 je možné vymezit počet sloupců v tabulce dvěma způsoby:

• použitím prvků col nebo colgroup (v tomto pořadí) • pokud neexistují prvky sloupce, je vymezen počet sloupců vyžadovanými řádky Počet sloupců v tabulce je shodný s řádkem s více buňkami používajícími span. Definováním údajů o sloupcích si mohou prohlížeče ušetřit průchod dovnitř tabulky ke zjištění, kolik sloupců je potřeba.

Zjištění šířky sloupců Jakmile prohlížeč zjistí počet sloupců, počítá šířku každého sloupce. Šířku sloupce lze zadat třemi způsoby:

• Pixely – pevná šířka (například: width="125"), umožňuje postupné vykreslování tabulky.

• Procenta – procentuální šířka (například: width="33%"), je určena poměrným rozdělením vodorovného prostoru dostupného pro tabulku a pochopitelně také umožňuje postupné zobrazování tabulky.

• Relativní – relativní šířka (například: width="2*"), je založena na vodorovném prostoru vyžadovaného tabulkou. Pokud máte tabulku s pevnou šířkou, prohlížeč ji může stále vykreslovat postupně. Pokud však tabulka nebude mít pevnou šířku, prohlížeč musí obdržet veškeré údaje z tabulky před tím, než stanoví rozměry tabulky6.

Postupné zobrazování tabulky tedy umožníte tím, že stanovíte počet a šířku sloupců. Pokud ne, prohlížeč bude muset počkat, než dorazí veškeré údaje nutné k rozdělení místa na stránce. Výpis 4.1 demonstruje příklad použití.

Výpis 4.1 – Specifikace šířky sloupců v tabulce <table width="100%"> <colgroup> <col width="33%"> <col width="67%"> </colgroup> <tr>

Kapitola 4 – Pokročilá optimalizace HTML

89

<td colspan="2"> <p>horní navigační řádek (název webu a reklama)</p> </td> </tr> <tr> <td> <p>levý navigační sloupec</p> </td> <td> <p>oblast pro hlavní obsah stránky</p> </td> </tr> <table>

Pevná nebo procentuální šířka umožňuje postupné zobrazování tabulky. Protože designéři nemají možnost ovlivnit nastavení tabulek a velikost písma na straně uživatele, spoléhání se na pevnou šířku tabulek je poměrně riskantní, pokud obsah nemá předem známou velikost.

Sloučení atributů v tabulce Další místo se dá také ušetřit používáním výchozích hodnot a sloučením specifických atributů do atributů globálních. Pro definici zarovnání obsahu v buňkách použijte pouze jeden <tr align="center"> místo mnoha výskytů <td align=’center‘>. Ještě lepší je ale použití skupin řádků (pomocí thead nebo tbody) pro definici celých bloků řádků. Výpis 4.2 uvádí příklad takového zápisu.

Výpis 4.2 – Sloučené atributy <table width="100%" frame="border"> <colgroup> <col width="33%"> <col width="67%"> </colgroup> <tr> <td colspan="2"> <p>horní navigační řádek (název webu a reklama)</p> </td> </tr> <tbody align="center"> <tr> <td> <p>levý navigační sloupec</p> </td> <td>

90

Zrychlete své WWW stránky! <p>oblast pro hlavní obsah stránky</p> </td> </tr> </tbody>

</table>

V HTML jsou uzavírací značky pro prvky skupin řádků a col nepovinné (</thead>, </tbody>, </tfoot> a </col>, nicméně jsou povinné v XHTML. Pozor, některé verze Netscape 4 chybují při uzavírání prvku </colgroup> pro div a mohou vést při vykreslování k nepředvídatelnému chování prohlížeče. Jednoduše řečeno, pro nastavení zarovnání jednoho nebo více sloupců můžete používat colgroup namísto individuálního zarovnávání každé buňky.

Například, používejte tento zápis pro zarovnání jednoho sloupce: <colgroup align="center">

Nebo použijte tento zápis pro zarovnání skupiny tří sloupců: <colgroup align="center" span="3">

Tato technika funguje v prohlížečích vyhovujícím standardům, přičemž ve starších prohlížečích je půvabně degradována (zarovnání doleva). Pochopitelně, kromě výše uvedeného, je možné pro nadefinování col a colgroup použít CSS (viz výpis 4.3).

Výpis 4.3 – Tabulka s využitím CSS <style type="text/css"> <!-table#skel {width:100%;} col#left {width:33%;} col#right {width:67%;} tbody#main {text-align:center;} --> </style> </head> <body> <table id="skel" frame="border"> <colgroup> <col id="left"> <col id="right"> </colgroup> <tr> <td colspan="2"> <p>horní navigační řádek (název webu a reklama)</p> </td> </tr>

Kapitola 4 – Pokročilá optimalizace HTML

91

<tbody id="main"> <tr> <td> <p>levý navigační sloupec</p> </td> <td> <p>oblast pro hlavní obsah stránky</p> </td> </tr> </tbody> </table>

Všechny tyto informace dejte dohromady a nasypte je do jednoho tabulkového turbokompresoru.

Rychlé vykreslování tabulky V prohlížečích, které podporují CSS27, jako jsou IE6 a NS6, mohou být tabulky významně urychleny s použitím nové vlastnosti table-layout. Tato vlastnost umožňuje designérům rozhodnout, jaký algoritmus prohlížeč použije pro zalomení buněk, řádků a sloupců.

Pevný layout tabulky Prohlížeč využívající nejrychlejší fixovaný algoritmus table-layout nenastavuje vodorovný rozměr tabulky podle obsahu buněk, ale podle šířky tabulky, sloupců, okrajů a mezer. Tento algoritmus je rychlejší, protože vodorovný zlom tabulky není závislý na obsahu každé buňky, ale na definovaných nebo výchozích šířkách. Takže prohlížeč zobrazuje tabulku již při prvním průchodu a nemusí tak čekat na načtení zbývajících části tabulky. To je užitečné zejména u delších tabulek.

Jak funguje fixní návrh tabulky? V každém sloupci určuje první buňka, jejíž šířka není nastavena na automatickou hodnotu, šířku daného sloupce. Následující buňky v daném sloupci jsou pak nastaveny na stejnou šířku, bez ohledu na jejich obsah. Při použití fixního algoritmu pro zobrazení tabulky musí být první buňka v každém sloupci nejširší.

Vlastnost table-layout může nabývat tří hodnot:

• auto (implicitní hodnota) • fixed • inherit Například: table { table-layout: fixed } col.sum { width: 10em }

92

Zrychlete své WWW stránky!

Použití výchozí hodnoty auto může být neefektivní. Vyžaduje až dva průchody prohlížeče pro správné zjištění rozměrů tabulky, protože musí zpracovat celý obsah tabulky.

Pokud nastavíte vlastnost table-layout na fixed, nastavíte pevné šířky sloupců (a volitelně i jejich pevné výšky) pro celou tabulku. Šířky sloupců jsou odvozeny od šířek definovaných prvky col (neautomatické hodnoty) nebo pokud nejsou použity, podle první buňky v každém sloupci. Bez prvků col je prohlížeč schopen zalamovat tabulku ihned, jakmile dostane data prvního řádku. S prvky col již není tento krok potřebný. Buňky v následujících řádcích již neovlivňují šířky sloupců.

V prohlížečích, které podporují CSS2, dokáže takové nastavení podstatně zvýšit výkon zpracování a zobrazování tabulek. Microsoft prohlašuje, že použití vlastnosti table-layout nastavené na hodnotu fixed přináší až 100násobné urychlení v Internet Exploreru 6 a vyšším. Pevný algoritmus umožňuje postupné zobrazování tabulky, najednou po řádcích. Výpis 4.4 uvádí příklad.

Výpis 4.4 – Příklad tabulky s fixním layoutem <style type="text/css"> <!-table#skel {table-layout:fixed;width:100%;} col#left {width:33%;} col#right {width:67%;} tbody#main {text-align:center;} --> </style> </head><body> <table id="skel" frame="border"> <colgroup> <col id="left"> <col id="right"> </colgroup> <tr> <td colspan="2"> <p>horní navigační řádek (název webu a reklama)</p> </td> </tr> <tbody id="main"> <tr> <td> <p>levy navigační sloupec</p> </td> <td> <p>oblast pro hlavni obsah stranky</p> </td> </tr>

Kapitola 4 – Pokročilá optimalizace HTML

93

</tbody> </table>

Řízení přetečení Pro jistotu je potřeba ověřit, zdali nejsou všechny ostatní buňky ve sloupci širší než první buňka.

Pokud obsah přesahuje buňku, je zalomen, nebo pokud zalomení není možné, je ořezán. V CSS2 existuje vlastnost overflow, která umožňuje ovlivnit chování buněk v případě, že obsah přesahuje velikost jakéhokoli bloku, včetně prvku td. Zde je příklad použití: <style type="text/css"> <!-table#fixed {table-layout:fixed;width:100%;overflow:hidden;} --> </style> </head> <body> <table id="fixed">

Vlastnost overflow může nabývat čtyř hodnot:

• visible – obsah, který se nevejde do svého bloku, se zobrazí (výchozí hodnota) • scroll – do bloku se vloží rolovací lišta (scrollbar) bez ohledu na přetečení • hidden – obsah, který se nevejde do svého bloku, bude ořezán • auto – obsah, který se nevejde do svého bloku, bude vizuálně ořezán a přidá se rolovací lišta pro zobrazení skrytého obsahu

Tabulka s fixním layoutem v praxi Na WebReference.com jsem zkoušel použít algoritmus s vlastností table-layout nastavenou na hodnotu fixed. Dosáhl jsem smíšených výsledků. Výpis 4.5 uvádí část ze zdrojového kódu.

Výpis 4.5 – Tabulka s fixním layoutem v praxi <style type="text/css"> ...

TABLE#f{table-layout:fixed;width:100%} COL#a{width:9px;} COL#b{width:134px;} COL#c{width:9px;} COL#d{width:65%;} COL#e{width:8px;} COL#f{width:1px;} COL#g{width:125px;}

94

Zrychlete své WWW stránky!

</style> ... <TABLE id=f WIDTH="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0> <colgroup><col id=a><col id=b><col id=c><col id=d><col id=e><col id=f><col id=g></colgroup> <TR VALIGN=TOP><TD WIDTH=9 BGCOLOR="#FFCC00"><IMG SRC="/t.gif" WIDTH=9 HEIGHT=1 ALT=""></TD> ... 134 px TD následují...

Poté, co jsem nastavil správně úvodní buňky, tabulka na obrazovce doslova lítala. Bohužel, narazil jsem na dva problémy. Vložené tabulky s reklamou bez zadaných rozměrů občas skočily dolů a v NS6.x texty přetékaly při uživatelském zvětšení písma na hodnotu "Větší" (larger). První problém se podařilo eliminovat přidáním valign="top". Druhý byl o něco zapeklitější.

Uživatelské zvětšení písma v Netscape 6.x občas rozlije text mimo pevné sloupce, i když se při opětovném načtení stránky tento problém již neprojeví. IE5 pro Mac a IE6 pro Windows pracují se zvětšenými písmy lépe. Přetečení je možné korigovat použitím vlastnosti overflow, nicméně to nemá v NS6.x žádný efekt. Pokud použijete striktní DOCTYPE, vlastnost overflow bude aplikována na celý objekt HTML. Obrázek 4.1 ukazuje, co se stane v Netscape 6.2, pokud použijete tabulku s fixním layoutem (table { table-layout: fixed }) a pak v prohlížeči zvětšíte velikost písma.

Obrázek 4.1 – Tabulka s fixním layoutem v Netscape 6.2.

Kapitola 4 – Pokročilá optimalizace HTML

95

Tento problém částečně vyřeší zvětšení původních rozměrů buněk. Nicméně, v Netscape 7 je tato chyba v přetékání a v algoritmu fixované tabulky při použití zvětšeného písma již opravena. Viz obrázek 4.2.

Obrázek 4.2 – Tabulka s fixním layoutem v Mozille 1.0 (Netscape 7).

Pokud používáte v tabulkách obsah s pevnou šířkou, například obrázky, použijte algoritmus fixed.

Pokud má mít obsah buněk proměnlivou šířku, otestujte tabulku i při zvětšeném písmu.

Osobně se mi osvědčila specifikace šířky prostřednictvím atributu col. Zde je příklad z úvodní stránky WebReference.com: <table id=f width="100%" border=0 cellspacing=0 cellpadding=0> <colgroup><col width=9><col width=134><col width=9><col width="65%"><col width=8><col width=1><col width=126>

Nebo lépe s využitím stylů: table#f{table-layout:fixed;width:100%} table#f{overflow:auto;} col#a{width:9px;} col#b{width:134px;} col#c{width:*;} col#d{width:8px;} col#e{width:1px;} col#f{width:126px;}

96

Zrychlete své WWW stránky!

Výhodným kompromisem je podmíněné vkládání fixních a "přetékajících" (overflow) stylů pro prohlížeče, které podporují CSS2 – jako třeba IE6 a vyšší nebo Netscape 7 a vyšší, který je odvozen z Mozilly 1.0. V delších tabulkách používejte colgroup a col. Všude, kde je to možné, použijte table-layout a hodnotu overflow.

Také nastavení výšky sloupce může vést ke zvýšení rychlosti vykreslování, protože syntaktický analyzátor (parser) prohlížeče může začít zobrazovat řádek bez předchozího zkoumání obsahu všech buněk v řádku, aby zjistil, jaká je výška řádku.

Zjednodušujte Mám pocit, že na všech školeních o sebezdokonalení osobnosti řečníci nabízejí samé zjednodušování. Zjednodušte svůj život; odstraňte vše, co není podstatné. Snižte hladinu vašeho stresu. Berte Echinaceu. Dýchejte! Stejné rady se hodí i na tabulky (možná s výjimkou dýchání a echinaceových kapek).

Prohlížeče obvykle zpracovávají tabulky v několika fázích. Nejprve se podívají do buněk, aby se podle obsahu mohla stanovit velikost. Pak dynamicky nastavují velikost buněk tak dlouho, dokud není spočítána celá tabulka. Odstraňte z tabulek vše, co není podstatné. Odstraňte všechny ikonky, které jste přidali někdy vloni. Zahoďte tyto reklamní a členské odkazy, které vám stejně nepřinášejí žádné peníze. Zbavte se pomalu stahujících javových tickerů se zprávami. Není to lepší?

Nechejte pouze nové a aktuální věci. Dokonce budu souhlasit s ponecháním vašeho loga určeného k propagaci vaší značky. Nyní budou vaše tabulky opravdu sprintovat. Zpět vložte pouze to, co chtějí vaši uživatelé nebo ještě lépe – nechejte je rozhodnout. Odstranění takových přebytečností je v tomto případě jedním z nejefektivnějších způsobů urychlování tabulek a webových stránek.

Vnořování tabulek Čím hlouběji vnoříte tabulky do jiných tabulek, tím pomaleji se budou zobrazovat. Po jejich kompletním stažení musí prohlížeč provést spoustu výpočtů, aby správně zjistil jejich velikost. Mnohokrát vnořované tabulky zaměstnávají procesory uživatelů, zejména, pokud patří mezi ty pomalejší. Protože prohlížeč musí jako první spočítat nejhlouběji vnořenou tabulku, a pak se postupně vracet zpět k rodičovským (nadřazeným) tabulkám, je nejlepší vytvářet takový kód, který maximálně redukuje počet vnořených tabulek a úrovně vnoření.

Rozdělení tabulek Na mnoha webech se používá jedna jediná tabulka pro vložení celého obsahu stránky. V naprosté většině případů to znamená, že prohlížeč tuto tabulku zobrazí až po kompletním stažení jejího rozsáhlého obsahu a po dokončení výpočtu rozměrů. To dost podstatně zpomaluje její zobrazení. Řešení je jednoduché – rozdělit takové tabulky na více samostatných tabulek – jako řezy ovocného koláče.

Kapitola 4 – Pokročilá optimalizace HTML

97

Vnímaná rychlost Na horní část stránky použijte jednoduchou a rychle se stahující tabulku. Do této první tabulky vložte užitečný obsah, jako například vyhledávací box nebo navigační pruh, takže se uživatelé mohou rychle zorientovat. Prohlížeče zobrazují samostatné tabulky postupně, takže nejprve nabídněte něco, na co se uživatelé mohou dívat, zatímco se stahuje zbytek stránky. Takové stránky působí na pohled rychlejším dojmem, i když se mohou celkově stahovat pomaleji. Na obrázku 4.3 je příklad stránky CNET.com.

Obrázek 4.3 – Horní navigační pruh na CNET.com

Bez přehánění se dá říci, že první tabulka doslova vystřelí na stránku a dává uživateli něco, s čím může okamžitě pracovat. V kapitole 1 bylo řečeno, že velmi důležitá je zpětná vazba. Pokud se okamžitě objeví nějaký užitečný obsah, uživatelé pravděpodobněji kliknou na vaše další odkazy. Na obrázku 4.4 je příklad z úvodní stránky WebReference.com.

Obrázek 4.4 – Navigační pruh na WebReference.com

Na druhé straně, pokud se objeví něco, co není důležité, bude to uživatele nudit. Přednostním zobrazením loga a reklamy uživatel nedostává žádný užitečný obsah a nemůže se hned na stránce orientovat. Obrázek 4.5 ukazuje příklad:

Obrázek 4.5 – Onlinenewspapers.com.

Návrh stránky se třemi sekcemi Podobná strategie zahrnuje změnu designu tabulek ke zvýšení hodnoty stránky pro vyhledávací servery a zároveň viditelnému zrychlení zobrazování. Typická stránka se třemi sekcemi obsahuje nahoře označení firmy (logo), eventuálně reklamu, v levém sloupci navigaci a v pravém sloupci hlavní obsah stránky. Výpis 4.6 uvádí příklad.