Каким должен быть код интернет-страниц? Читабельность vs размер. Часть 1. HTML

Никогда не получится сделать всё так, как хочется… Это, конечно, немного несправедливо, но это факт — идеальных сайтов не бывает, да и никогда не будет! Постоянно приходится выбирать: оригинальность навигации и дизайна или юзабилити, оптимизированный или интересный читателю контент, небольшие и легкие скрипты или безопасность, устойчивость сайта к взлому. И ведь это далеко не все — этот список можно продолжать до бесконечности!

Вот именно об одной такой дилемме и хочу сегодня порассуждать. Думаю, что многие сайтостроители при разработке своих творений сталкивались с такой вот проблемой: что же предпочесть? Что будет лучше для сайта, посетителей и самого разработчика? Читабельный и лёгкий в понимании код или же небольшой размер страниц и, следовательно, и более высокая скорость загрузки?

Вообще это вопрос вечный! Почему? А потому что всегда придётся чем-то пожертвовать!

Многие, к сожалению, делают однозначный выбор в пользу скорости загрузки и пишут код чуть ли не в одну строчку. Поначалу я тоже так делал, но со временем мой код стал более читабельным. В чисто html страницах можно довольно быстро разобраться с кодом, т.к. легче понять, что куда, нет никаких переменных, циклов и т. д. И можно пожертвовать читабельностью, писать на одной сточке тег table, tr и td… И кажется, что всё понятно: вот таблица, вот строка, вот столбец. Однако задача сильно усложняется при сильно нагруженном коде и вложенных таблицах (причём неоднократно вложенных), да при этом ещё в одной таблице такой CSS стиль, в соседней другой CSS стиль, а если при этом части страницы находятся в разных файлах (те, кто программирует на php, думаю, поймут, как и зачем располагать половину html кода страницы в одном файле, а половину в другом). И вот тут вы уже навряд ли быстро разберётесь даже в своём собственном коде. Поясню на личном примере.

На моем сайте был такой глюк: в Опере и IE всё нормально, а в Мозилле почему-то страницы «прыгали». В частности, правый столбец вытягивался сильно в высоту, а центральный и левый из-за этого находились где-то в середине.
Я почти два дня искал ошибку! Так и не нашёл! Это осложнялось как раз тем, что html код был довольно большим и нагруженным. Потом я плюнул и решил сделать прежде всего-навсего код читабельным, т.к. в своё время много его изменял, добавлял вложенные таблицы, убирал одни, добавлял третьи, переносил из одного места в другое четвёртые и т. п. А потом потратить минут 20−30, чтобы сделать код читабельным, добавлять лишние пробелы и перевод на новую строку, где это нужно — мне было неохота.

И вот я просто сделал код читабельным! Размер страниц при этом у меня увеличился аж почти на 21 килобайт. При том, что уже почти 75 она весила до этого.
И в результате всего за полчаса нашёл ошибку! Просто в одном месте у меня высота была указана в процентах, а именно в этом месте нужно было в пикселях. Перепутал, думал, что этот tr принадлежит к одной таблице, а оказалось, к другой! Как видите, ошибка была элементарной и её было тяжело найти только лишь из-за нечитабельного кода!
Да, я понимаю, что код постоянно изменяется, что-то дополняется, что-то убирается, но не ленитесь при этом делать код читабельным! Каждый раз, после каждой модификации.

Т.к. мы говорили только про html код — то это были ещё цветочки, а про ягодки смотрите вторую часть.