Windows XP: Оптимізація HTML-сторінок

Напевно з вами, шановні читачі, як і з будь-яким інтернетчиків, траплялася хоч коли-небудь така історія. Спробувавши зайти на домашню сторінку початківця веб-майстра, відвідувач змушений дуже довго чекати її завантаження. Природно, все при цьому згадують самими нехорошими словами хостинг-провайдера. І хоча, звичайно ж, "халявний" хостинг за якістю на порядок гірше платного, винен в довгої завантаженні не завжди він. Давайте, наприклад, погортаємо сайт, створений початківцям, і поглянемо на результати статистики. Чи не правда, дуже дивно, що сайт, на якому, в общем-то, і тексту зовсім небагато, створює такий великий трафік? Давайте зупинимося на цьому моменті і спробуємо розібратися, в чому ж полягає помилка творця цього "дива".

Переважна більшість початківців веб-майстрів створює свої сайти з допомогою різних візуальних редакторів. У цьому випадку від них не потрібно абсолютно ніяких знань. Запустили програму, розташували на "аркуші" потрібні елементи, написали текст, взяли кнопки та іконки з якої-небудь безкоштовної бібліотеки графіки - і все, сайт готовий. Потім його зберігають, перевіряють, відкривши з жорсткого диска, і з почуттям повного задоволення закачують на сервер. При цьому мало хто спромагаються заглянути всередину HTML-сайтів і подивитися, який же код згенерував редактор. Що ж, давайте зробимо це зараз.

Найменше зауважень у професійних веб-майстрів до спеціальних генераторів HTML-сторінок. Правда, і серед них теж чимало "сміттярів", які примудряються максимально "засмітити" навіть найпростіший текст. Особливо це вірно по відношенню до старих версій подібних програм. Давайте, наприклад, подивимося, ось на таке горизонтальне меню, створене в старій версії одного з найвідоміших редакторів - FrontPage.

<font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Головна </ font> </ font> & nbsp;
<font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Резюме </ font> </ font> & nbsp;
<font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Друзі </ font> </ font> & nbsp;
<font face = "Verdana, Arial, Helvetica, sans-serif"> <font size = "2"> Посилання </ font> </ font>

Ну і як, подобається вам таке? Займає це маленьке просте меню з чотирьох пунктів 369 байт. Тим часом його можна значно скоротити, спростивши одночасно розуміння коду і зменшивши створюваний інтернет-трафік. Як? Та дуже просто. По-перше, незрозуміло, чому візуальні редактори так часто розбивають на два або навіть більше тегів то, що можна записати в одному. Тобто в даному прикладі параметр size можна занести всередину першого тега font. По-друге, навіщо було потрібно вказувати всі параметри шрифту перед кожним пунктом меню? Адже це, фактично, один рядок. Тому цілком достатньо вставити один відкриває тег на початку і один закриває в кінці, щоб отримати абсолютно той же самий результат в будь-якому браузері. Нижче наведено оптимізований код, який займає всього 110 байт. Таким чином, ми змогли зменшити обсяг шматочка веб-сторінки, запропонованої візуальним редактором, більш ніж в 3 рази!

<font face = "Verdana, Arial, Helvetica, sans-serif" size = "2">
Головна & nbsp; Резюме & nbsp; Друзі & nbsp; Посилання </ font>

Але і це ще не все. Більшість сучасних візуальних редакторів схильне ускладнювати генеруються веб-сторінки, вносячи в них багато непотрібної інформації. Давайте розглянемо це на прикладі текстового процесора Microsoft Word. Строго кажучи, ця програма не призначена для роботи з веб-сторінками. Однак в її останніх версіях у користувачів існує можливість створювати, відкривати, правити і зберігати файли в форматі HTML. І багато початківці веб-майстри вважають за краще не витрачати свій час, як їм здається, даремно на вивчення спеціальних програм, а активно використовують Microsoft Word для створення своїх сайтів.

Що ж, давайте для прикладу проведемо невелике дослідження. Отже, відкриваємо Word, пишемо в трьох абзацах рядок "Мама мила раму" і виділяємо одну з них жирним шрифтом. Після цього зберігаємо отриманий документ як веб-сторінки і відкриваємо його в браузері. Все виглядає так, як і повинно. А тепер відкриваємо HTML-файл в "Блокноті" і дивимося на згенерований код. Перше, що відразу ж впадає в очі - це його обсяг. Три рядки, написані одним шрифтом на одній мові, займають в поданні HTML-поданні Word'а ... більше 4 кілобайт! Давайте спробуємо розібратися, як же вийшла така значна цифра.

А відповідь, виявляється, дуже простий. При створенні файлу Word відразу ж автоматично згенерував кілька стилів: для звичайного тексту, заголовків чотирьох рівнів і так далі. В принципі, для великого і складного тексту це навіть вигідно. Однак навіщо потрібно було вставляти опис мало не десятка різних стилів, якщо в тексті реально використовується тільки один або два з них? Крім того, Word, як і інші візуальні редактори, "грішить" занадто частим описом шрифту. Він вставляє його на початку кожного абзацу, навіть в тому випадку якщо стиль попереднього тексту нічим не відрізняється від наступного. Крім того, практично в кожен тег, що описує шрифт, Word додає вказівку на мову, на якому набирався текст.

Тепер давайте перейдемо до розбору "ручних" веб-сторінок, тобто HTML-файлів, створених вручну або з використанням звичайних (не є візуальною редакторів). На перший погляд здається, що такі сторінки не можна оптимізувати. Однак насправді це не так. Є кілька моментів, які обов'язково необхідно враховувати веб-майстрам.

Для початку поговоримо про форматування коду. У багатьох веб-майстрів прийнято використовувати при написанні веб-сторінок правила, використовувані в програмуванні. Йдеться про максимально можливе розбитті тексту по рядках. Причому кожен рядок передує певним числом прогалин або символів табуляції, залежно від "блоку", до якого вона входить. З одного боку, такий підхід дуже зручний. Розуміння коду дійсно дуже сильно спрощується. Однак потрібно враховувати, що файл у форматі HTML - це не програма. Він набагато простіше. Тому структурувати HTML-код до найдрібніших подробиць не потрібно. Пам'ятайте, що символи розриву рядків і табуляції, хоч і не відображаються в браузері, теж збільшують обсяг веб-сторінки. Хоча, в принципі, з ними можна змиритися. Набагато гірше, коли веб-майстра або деякі редактори (є й такі) замість символів табуляції передують рядки певним числом прогалин. Для прикладу спробуйте уявити, на скільки збільшиться обсяг HTML-файлу, якщо більшість рядків в ньому буде містити від п'яти до десяти "зайвих" прогалин. Звичайно ж, ніхто не закликає вас при створенні веб-сторінки записувати весь код в один рядок. Однак зайвої структурованості теж краще уникати.

Другий момент, про який піде мова - коментарі. Багато починаючі веб-майстри, для того щоб в майбутньому не заплутатися в HTML-файлі, залишають в них цілу купу своїх нагадувань і зауважень. Ні, звичайно ж, у використанні коментарів немає нічого поганого. Однак все добре в міру. Необхідно пам'ятати, що коментар - це дуже коротке пояснення. Зовсім не обов'язково робити з нього докладний опис зразок такого: "У цьому рядку розташовується відкриває тег таблиці, в якій я буду кожен місяць записувати зріст і вагу мого улюбленого кота".

Взагалі, говорити про оптимізацію HTML-файлів можна дуже і дуже довго. Переглядаючи сторінки початківців веб-майстрів, іноді просто диву даєшся, що діється у них всередині. Так, деякі примудряються "впихнути" на сторінку сотні ключових слів в надії збільшити відвідуваність сайту. Насправді ж, вони домагаються зворотного ефекту - "вага" дійсно потрібних слів знижується, а обсяг файлу істотно збільшується. І можна навести ще чимало подібних прикладів. Тим часом, секрет написання оптимального коду дуже простий. Досить просто пам'ятати про це і завжди перевіряти, як виглядає веб-сторінка не тільки в браузері, але і в "Блокноті".