Это случилось снова. HTTP Archive Report , в котором собрана техническая информация с полмиллиона самых популярных веб-сайтов, сообщает, что средний вес страницы увеличился на 16% в 2015 году и достиг 2262 КБ. Аналогичное увеличение наблюдалось в 2014 году .
В отчете анализируется общедоступный контент и сайты покупок. Он не может анализировать веб-приложения или страницы за логином, таким как Facebook.
| технологии | конец 2014 (КБ) | конец 2015 года (КБ) | увеличение (%) |
|---|---|---|---|
| HTML | 59 | 66 | 12% |
| CSS | 57 | 76 | 33% |
| JavaScript | 295 | 363 | 23% |
| Картинки | 1243 | 1443 | 16% |
| вспышка | 76 | 53 | -30% |
| Другой | 223 | 261 | 17% |
| Общее количество | +1953 | 2262 | 16% |
Цифры являются средними. Вес страниц вряд ли будет соответствовать нормальному распределению, но цифры кажутся разумными, когда вы рассекаете страницы по всему Интернету.
Содержание HTML возросло на 7 КБ. Средняя статья на 12% длиннее? Я в этом сомневаюсь.
Неудивительно, что Flash также упал на 23 КБ или 30%. Каждый пятый сайт продолжает использовать Flash — падение на 26% за год.
CSS увеличился на 19 КБ. Существует мало оправданий для использования восьми таблиц стилей, но общий размер файла кажется разумным, учитывая:
- Возможности CSS увеличиваются со временем. Мы используем эффекты, анимацию и адаптивные макеты, которые были невозможны несколько лет назад (другое дело — нужны ли они).
- Препроцессоры, такие как Sass, LESS и Stylus, имеют тенденцию к массовому коду, потому что вложение и повторное использование свойств легко.
- Инструменты сборки упрощают встроенные графические ресурсы.
Такие функции, как CSS Flexbox, могут помочь уменьшить более сложные макеты с плавающей точкой, но экономия довольно минимальна.
Можно было ожидать, что JavaScript-код будет соответственно удален, но он вырос на 68 КБ и достиг 363 КБ, распределенных по 22 отдельным файлам. Это много кода. Некоторые будут фреймворками и библиотеками, но я подозреваю, что большинство — это виджеты в социальных сетях и реклама.
Другие файлы, такие как шрифты и видео, увеличились на 38 КБ или 17%.
Как обычно, самый большой рост от изображений. Мы загружаем дополнительные 200 КБ, что составляет 65% от общего роста. Доступ к 55 отдельным файлам изображений на странице, что кажется чрезмерным.
Другие основные моменты
- 25% сайтов не используют сжатие GZIP
- 101 HTTP-файл запросов сделано — по сравнению с 95 год назад
- страницы содержат 896 элементов DOM — по сравнению с 862
- ресурсы загружены из 18 доменов
- 49% активов кэшируются
- 52% страниц используют библиотеки Google, такие как Google Analytics.
- 24% страниц теперь используют HTTPS
- 36% страниц имеют ресурсы с ошибками 4xx или 5xx HTTP
- 79% страниц используют перенаправления
Почему страницы раздуты?
Для 2,2-мегабайтных страниц есть простое объяснение: мы делаем ужасную работу .
Как разработчик, я люблю Интернет. Как пользователь, это часто ужасно. Сайты отчаянно пытаются «увеличить взаимодействие» с навязчивой рекламой, раздражающими всплывающими окнами, недоиспользуемым беспорядком в социальных сетях и инвазивным отслеживанием. Возможно, это приводит к мгновенному увеличению доходов, но увеличение раздува контрпродуктивно:
- Google отказывается от тяжеловесных сайтов, которые могут повредить поисковой оптимизации.
- Реклама утверждает, что содержание остается бесплатным. Будут ли пользователи считать его бесплатным, если обнаружат, что просмотр одной страницы в типичном мобильном тарифном плане стоит 0,40 доллара ?
- Повышение блокировщиков рекламы до уровня основного сознания в течение года подчеркивает разочарование пользователей и легкость, с которой любой может отменить раздражающий контент.
- Пользователи не ждут. Etsy.com обнаружил, что 160 КБ дополнительных изображений привели к увеличению их отказов на 12% на мобильных устройствах.
- Веб-деятельность начинает привлекать внимание правительства. Например, британские операторы мобильной связи могут быть оштрафованы, если служба, использующая их сеть, получает выгоду от вводящих в заблуждение кампаний. Регулирование неизбежно обострится, поскольку сайты станут более отчаянными.
Содержимое тонет в пустоте. Несжатый, 37 пьес Шекспира в общей сложности более 800 тысяч слов или 5 МБ загрузки. Теперь рассмотрим обзор мгновенных статей Facebook, который предлагает альтернативу раздутым страницам. Он содержит пять абзацев, но по иронии судьбы, требует 3,5 МБ пропускной способности плюс еще 50 МБ при просмотре трехминутного видео. Передает ли он больше информации, чем объединенные произведения Шекспира? Возможно, это красивее, но нужно ли показывать 267КБ изображение парня с невидимым хорьком?
Отказ от ожирения
Я опубликовал несколько таких статей. Многие утверждают, что кризиса ожирения нет, поэтому давайте рассмотрим основные аргументы.
Некоторые страницы всегда будут большими
Картинные галереи, игры, технические витрины и т. Д. Всегда будут короткими. Тем не менее, каждый разработчик может оправдать вес своих страниц. HTTP Archive Report в основном анализирует контент статей и интернет-магазины. 2,2 МБ на страницу — эквивалент половины пьес Шекспира — смешно.
Вес страницы не является показателем качества
По моему опыту, вес страницы обратно пропорционален качеству. Громоздкие страницы часто являются ссылочными статьями или бессмысленными маркетинговыми феериями. Есть исключения, но разве не было бы замечательно, если бы существовал инструмент для оценки контента и сравнения его с раздуванием?
Пользователи никогда не жалуются на лишние страницы
… потому что они оставляют их. Аналитика записывает тех, кто успешно зашел на сайт. Они не будут выделять тех, кто не мог загрузить страдающие ожирением страницы или никогда больше не возвращался.
Пропускная способность увеличивается с каждым годом — вес страницы уменьшается
Ваша пропускная способность во всех сетях увеличилась на 16% в 2015 году? А 15% в 2014 году ? А 32% в 2013 году ? А 30% в 2012 году ?
Даже если это так, это не значит, что у всех был одинаковый опыт. Доступ к смартфонам стремительно растет, но мобильные сети остаются медленными во многих местах по всему миру.
Даже если мы предполагаем, что подключение везде превосходно, обязаны ли разработчики использовать увеличенную емкость? Стали ли страницы на 16% лучше, чем в прошлом году?
Похудение страниц означает снижение веса с меньшим количеством функций и эффектов
Почему? В некоторых случаях сайты могут сэкономить невероятные средства за несколько минут. Активация сжатия и объединения ресурсов не изменит ничего, кроме производительности.
Одержимость работой приводит к усложнению и обслуживанию.
Удаление неиспользуемых или ненужных изображений, ресурсов, функций и виджетов упрощает сайт. Это приведет к меньшему количеству осложнений и меньшему количеству обслуживания. Никто не предлагает вам беспокоиться о каждом байте, но присматривайте за килобайтами, а мегабайты позаботятся о себе.
Дополнительный вес страницы — цена прогресса
В некоторых крайних случаях, возможно. Lightsaber Escape имеет полезную нагрузку 120 МБ, потому что это революционная и экспериментальная браузерная игра (которая не анализируется HTTP-архивом). Можно ли сказать то же самое для страницы Apple iPhone 6S объемом 11,2 МБ , которая содержит несколько параграфов и эффектов, которые (в основном) могли быть достигнуты десять лет назад в небольшом размере?
Страницы SitePoint часто превышают 2 МБ
Гм. О, смотри — белка …
Страницы SitePoint могут быть тяжелыми на настольных устройствах, хотя они уменьшаются до нескольких сотен килобайт при просмотре на небольшом экране в более медленной сети. Ни один сайт не является идеальным, и прилагаются усилия по повышению эффективности, но я согласен, что его можно улучшить.
Почему я должен беспокоиться? Мало кто делает
Причина: нет недостатков . Ваши пользователи получают выгоду от более отзывчивых страниц и приятных впечатлений. Ваш рейтинг в поисковых системах улучшается. Ваши конверсии увеличиваются. Ваши расходы на хостинг снижаются. Вы даже сокращаете потребление электроэнергии и делаете все возможное, чтобы спасти планету. Это немного дополнительных усилий, но самые радикальные оптимизации происходят в результате самых простых изменений — см . Полное руководство по снижению веса страницы .
Бессознательное ожирение
Разработчики и владельцы сайтов неосознанно создали эпидемию ожирения, но значительная экономия может быть достигнута путем решения следующих проблем:
- Изображения и видео. Нужен ли герой? Можно ли изменить размер файла или уменьшить его? Можно ли заменить его CSS-эффектами? Загружают ли менеджеры контента монолитные файлы? Любой пользователь увидит все 55 изображений?
- Сторонний контент. Сценарии рекламы и социальных сетей могут быть нелепо расточительными . Они необходимы? Есть ли лучшие варианты ?
- Отношение. Производительность редко касается тех, кто сидит на 100 МБ соединении. Попробуйте ограничить пропускную способность, подключиться через 3G или использовать Wi-Fi в отеле на некоторое время — это может изменить восприятие.
Гораздо легче набрать вес, чем потерять его. Добавление нескольких дополнительных виджетов или графики кажется разумным, но вскоре оно будет установлено. Возвращение и удаление лишнего мусора может быть утомительным и трудным. Ответ кажется очевидным: не добавляйте его в первую очередь .
Немногие владельцы сайтов заботятся о раздувании. Производительность — это мышление разработчика. Рассмотрим это с самого начала проекта, и это не приведет к значительному увеличению времени разработки. Снижение производительности после того, как ваши страницы достигли уровня ожирения, слишком поздно.