Приближаясь к концу 2012 года, я решил обратиться к отчету об архиве HTTP, в котором собрана технологическая статистика с 300 000 самых популярных веб-сайтов. Поразительные новости: средний вес страницы увеличился на 30% за год и достиг 1250 КБ. Да, 1,25 Мб.
Отчасти это ожирение можно объяснить праздниками и подарками. Если вы изучите 100 лучших сайтов, то вес страниц увеличился с 584 КБ до 955 КБ за два месяца — огромный рост на 64%. В основном это изображения и флеш-реклама. Это может ухудшиться, как только нормализация возобновится, и люди будут сыт по горло постоянными покупками паники.
Разбивая эти цифры на конкретные технологии:
| технологии | конец 2011 | конец 2012 | увеличение |
|---|---|---|---|
| HTML | 42Kb | 52Kb | 24% |
| JavaScript | 167Kb | 214Кб | 28% |
| CSS | 32Kb | 41Kb | 28% |
| вспышка | 90Kb | 90Kb | 0% |
| Другой | 629Kb | 852Kb | 35% |
Подавляющее большинство этих страниц являются общедоступными контент-сайтами, а не приложениями, насыщенными JavaScript, или играми на основе холста. «Другое» — это, в основном, мультимедиа, например изображения, но также включает в себя стеки шрифтов. Использование пользовательских шрифтов увеличилось и используется 13% веб-сайтов — по сравнению с 7% год назад.
Вспышка осталась стабильной. Технология может быть в упадке, но она остается наиболее приемлемым вариантом для кросс-браузерной анимационной рекламы. Кроме того, средний вес 90Kb составляет всего 7% от общего веса.
Увеличение HTML-кода, вероятно, по мере продвижения отрасли к HTML5. Простые семантические изменения, такие как замена div на header или footer требуют еще нескольких байтов. Некоторая функциональность и валидация также могут быть реализованы в разметке, что ранее было невозможно.
Рост CSS также понятен. Современные CSS3-эффекты имеют дополнительные свойства, и для многих требуются префиксы, специфичные для поставщика (при этом многие разработчики не используют их все должным образом — см . Катастрофа префикса вендующего CSS-поставщика ) .
Однако объединенное увеличение HTML5 и CSS должно быть компенсировано гораздо большим уменьшением размеров файлов изображений. Требуется меньшее количество изображений, учитывая, что закругленные углы, тени, градиенты и переводы позволяют получить эффекты там, где ранее требовалась графика.
Точно так же многие эффекты на основе JavaScript не нужны и не так сложны, как эквивалентные переходы и анимации CSS3. По общему признанию, мы находимся в переходном периоде: большинство библиотек JavaScript все еще предоставляют функции анимации для IE9 и ниже. Но это не объясняет 28% скачка размеров файлов.
Я подозреваю две основные причины раздувания страницы. Мода на большие, качественные, полноэкранные текстуры и фотографии. Это может быть «исправлено» только путем обучения дизайнеров и клиентов. Вторая причина более эндемична: разработчик лень. Вы или или коллеги …
- полагаться на фреймворки «один размер подходит всем» и никогда не удалять избыточный код?
- использовать несколько библиотек или вырезать и вставить код для достижения различных эффектов?
- не заботиться о последствиях веса страницы?
Первое следствие — SEO. Общее влияние может быть относительно незначительным, но Google учитывает скорость страниц в своих алгоритмах ранжирования. Те, кто не заботится о SEO, не должны считать себя профессиональными веб-разработчиками.
Следующая проблема — пользовательский опыт. Пропускная способность редко бывает обильной и никогда не бывает бесплатной; раздутые страницы приводят к более медленным загрузкам, времени выполнения и времени отклика. Это особенно очевидно на мобильных устройствах — у вас, вероятно, есть черный список сайтов, которых следует избегать на вашем смартфоне. Это включает в себя ваш собственный сайт?
Наконец, давайте не будем забывать, что 1.25Mb страниц в среднем. При нормальном распределении половина опрошенных будет больше. Это нелепо для контент-сайтов и, в конечном счете, это будет стоить им посетителей.
Должен ли ваш сайт садиться на диету? Почему он набрал вес? Планируете ли вы решить проблему?