Andrew B. King: Zrychlete své WWW stránky
Knížka se zajímavým názvem na kterou mě přivedl Miroslav Kučera (mimo jiné její odpovědný redaktor ). Začíná psychologií uživatele (pro mě to byla asi nejzajímavější část) a nástinem proč optimalizovat. Dále se probírá optimalizací HTML, XHTML, CSS, JavaScriptu, optimalizací grafiky a multimédií. Vsunuta je kapitola optimalizace pro vyhledávače, která s tímto tématem moc úzce nesouvisí, ale jistá spojitost by se tu najít dala. Závěrečnou část uzavírá optimalizace na serveru a použití komprimace.
Ke každé části je uvedena související případová studie demonstrující teoreticky podané informace na praktickém příkladě. Ač je kniha velmi široce pojatá, podařilo se mi v každé časti najít něco nového a zajímavého. Z každé kapitolky vypíchnu několik nejdůležitějších poznámek, které mi přišly nejzajímavější a mohly by se hodit. Případně nerozhodnuté čtenáře přesvědčit v jejich výběru, zda si knihu koupit.
Psychologie
Rychlost stažení je pro uživatele důležitá. Čím zkušenější uživatel, tím rychlejší očekává odezvu. Maximální velikost stránky, aby nedošlo ke ztrátě pozornosti je 10s (ideálně 2s, ale nemožné pro modem. uživatele). Z toho se odvíjí max. velikost stránky (včetně souvisejících stylů, obrázků a javascriptu) Pro modemové uživatele 10s do 34kb a pro 2s jsou to pouhé 4kb! Pokud je doba stahování delší, pomůže v pocitu rychlosti postupné zobrazování stránky (případně indikátor načítání ve formě nabíhajících procent apod.)
Optimalizace obecně
- minimalizace HTTP požadavků (1 požadavek je 1-2s času načítání navíc)
- odstranění zbytečného prázdného místa (určeného pouze pro pohodlnější editaci kódu)
- zkraťte komentáře (nebo je v kódu na serveru odstraňte úplně)
- při definici jakýchkoliv jmen buďte struční
- u adresářů v url uvádějte na konci lomítko (urychlí se tím prolink)
HTML optimalizace
- volbu správného DOCTYPE (strict režim by měl být údajně rychlejší)
- vynechání nadbytečných značek a atributů (generalizace, volitelné atributy)
- vynechat nepovinné uvozovky
- vynechat nepovinné uzavírací značky
- minimalizace barev a znakových entit (jmenné varianty barev, případně websafe barvy a u entit volit kratší variantu &#cislo;)
- minimalizujte délku atributu alt
- minimalizujte sekci head
- optimalizace tabulek (společné formátování pomocí colgroup a col tagů, zjednodušení, rozdělení tabulek)
- default hodnoty ve formulářích inicializovat až v prováděcích skriptech místo přesunu hodnot za pomoci hidden vstupních prvků
XHTML optimalizace
- některé z HTML optimalizací
- vynechání nepovinného XML prologu
- spojení stylů a javascriptových souborů, případně jejich vložení do kódu stránky
CSS optimalizace
- aplikujte styly rozvážně
- seskupte stejné vlastnosti různých pravidel do jedné definice
- využívejte dědičnosti
- zkraťte definované vlastnosti hromadnými (skupinovými) atributy - font, background, margin, padding, border.
- používejte krátké názvy stylů id a class
- pro tabulky table-layout: fixed (Microsoft pro MSIE 6+ udává v některých případech až 100násobné zrychlení načítání stránky!)
- použít styly místo obrázkových rolloverů
JavaScript optimalizace
- zkracujte jména proměnných (lze i automaticky - JavaScript Crunchinator, ECMAScript Cruncher, Jscruncher, Script Squisher, SpaceAgent, VSE HTML Turbo)
- optimalizujte provádění kódu (použitím lokálních proměnných místo globálních, algoritmické optimalizace, použití vhodných datových struktur, Duff's Device - rozbalování cyklů)
Server optimalizace
- zpracování url a automatické nahrazování za plnou variantu za pomoci mod_rewrite modulu
- komprimace stránek za pomoci některého z modulů mod_gzip, mod_deflate,...
Závěr
Pokročilým uživatelům nabízí čtivým způsobem souhrnné informace týkající se optimalizace stránek a všeho s tím souvisejícího. Upozorňuje i na možná rizika zvýšené zátěže při volbě některých řešení. Pro každého člověka, který se chce zabývat profesionálněji tvorbou webu, bych ji vřele doporučil.
Plusy
- pro pokročilé uživatele
- široký záběr bez neg. vlivu na kvalitu
- zajímavé informace podané čtivou formou
Mínusy
- několik překlepů (řádově odhadem asi 10-20)
- nepřesné označení 2sloupcového layoutu 3sloupcovým
- nešikovný překlad slova flow jako tok
Jak se zdá, tak seznam se nechal inspirovat po přečtení tohoto příspěvku, knížku zakoupil a nyní již optimalizuje
Zájemci o knihu nakupujte přímo u nakladatelství Zoner Press.
Tip: Nevíte čím obdarovat nejbližší? Nechte je napsat Ježíškovi.
Související
- Eric Meyer o CSS - prokračujeme s kaskádovými styly profesionálně (22. 03. 2005 07:23)
- Eric Meyer o CSS - ovládněte kaskádové styly (21. 03. 2005 07:00)