Яким повинен бути код інтернет-сторінок? Читабельність vs розмір. Частина 1. HTML

Ця стаття, в першу чергу, буде цікава початківцям або не дуже досвідченим сайтостроітеля, але можливо, що і досвідчені в цій нелегкій справі люди теж знайдуть пару цікавих порад.

Ніколи не вийде зробити все так, як хочеться ... Це, звичайно, трохи несправедливо, але це факт - ідеальних сайтів не буває, та й ніколи не буде! Постійно доводиться вибирати: оригінальність навігації та дизайну або юзабіліті, оптимізований або цікавий читачеві контент, невеликі і легкі скрипти або безпека, стійкість сайту до злому. І адже це далеко не все - цей список можна продовжувати до нескінченності!

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

Взагалі це питання вічне! Чому? А тому що завжди доведеться чимось пожертвувати!

Багато хто, на жаль, роблять однозначний вибір на користь швидкості завантаження і пишуть код мало не в один рядок. Спочатку я теж так робив, але з часом мій код став більш читабельним. У чисто html сторінках можна досить швидко розібратися з кодом, т.к. легше зрозуміти, що куди, немає ніяких змінних, циклів і т.д. І можна пожертвувати читабельністю, писати на одній сточке тег table, tr і td ... І здається, що все зрозуміло: ось таблиця, ось рядок, ось стовпець. Однак завдання сильно ускладнюється при сильно навантаженому коді і вкладених таблицях (причому неодноразово вкладених), та при цьому ще в одній таблиці такий CSS стиль, у сусідній інший CSS стиль, а якщо при цьому частині сторінки знаходяться в різних файлах (ті, хто програмує на php, думаю, зрозуміють, як і навіщо розташовувати половину html коду сторінки в одному файлі, а половину в іншому). І ось тут ви вже навряд чи швидко розберетеся навіть у своєму власному коді. Поясню на особистому прикладі.

На моєму сайті був такий глюк: в Опері і IE все нормально, а в Мозілли чомусь сторінки «стрибали». Зокрема, правий стовпець витягувався сильно у висоту, а центральний і лівий через це знаходилися десь в середині.

Я майже два дні шукав помилку! Так і не знайшов! Це ускладнювалося якраз тим, що html код був досить великим і навантаженим. Потім я плюнув і вирішив зробити перш всього-навсього код читабельним, тому у свій час багато його зраджував, додавав вкладені таблиці, прибирав одні, додавав третій, переносив з одного місця в інше четвертого і т.п. А потім витратити хвилин 20-30, щоб зробити код читабельним, додавати зайві прогалини і переклад на новий рядок, де це потрібно - мені було неохота.

І ось я просто зробив код читабельним! Розмір сторінок при цьому у мене збільшився аж майже на 21 кілобайт. При тому, що вже майже 75 вона важила до цього.

І в результаті всього за півгодини знайшов помилку! Просто в одному місці у мене висота була вказана у відсотках, а саме в цьому місці потрібно було в пікселях. Переплутав, думав, що цей tr належить до однієї таблиці, а виявилося, до іншої! Як бачите, помилка була елементарною і її було важко знайти тільки лише через нечитабельності коду!

Так, я розумію, що код постійно змінюється, щось доповнюється, щось забирається, але не лінуйтеся при цьому робити код читабельним! Кожен раз, після кожної модифікації.

Тому ми говорили тільки про html код - то це були ще квіточки, а про ягідки дивіться другу частину.