HTTP Archive Report собирает информацию с почти полумиллиона самых популярных веб-сайтов. Последние данные показывают, что средний вес страницы увеличился на 15% за один год и достиг 1 953 КБ — чуть меньше 2 МБ — и включает 95 отдельных HTTP-запросов. Хотя это меньше, чем 32-процентное увеличение в 2013 году , оно по-прежнему вызывает обеспокоенность.
В отчете анализируются общедоступный контент и веб-сайты покупок, а не сложные веб-приложения, и дается разбивка используемых технологий:
| технологии | конец 2013 | конец 2014 | увеличение |
|---|---|---|---|
| HTML | 57Kb | 59Kb | + 4% |
| CSS | 46Kb | 57Kb | + 24% |
| JavaScript | 276KB | 295Кб | + 7% |
| Картинки | 1,030Kb | 1,243Kb | + 21% |
| вспышка | 87Kb | 76Kb | -13% |
| Другой | 205Кб | 223Kb | + 9% |
| Общее количество | 1,701Kb | 1,953Kb | + 15% |
Это средние цифры; большая часть страниц будет иметь больший размер файла.
Увеличение размера HTML на 2 КБ кажется разумным, хотя это значительное количество контента, учитывая тенденцию к созданию более простого и краткого текста.
Больше всего меня удивляет рост CSS на 11Кб. Адаптивный веб-дизайн и CSS3-анимации могут объяснить некоторые из этих изменений, но в JavaScript не было ни капли. Несмотря на наличие инструментов управления и минимизации CSS, средний сайт также делает шесть запросов на CSS-файлы.
JavaScript вырос на 19 КБ. Это смущает; потребность в прокладках уменьшается, эффекты могут быть переданы CSS3, и монолитные библиотеки перестали пользоваться. Сайты в среднем отправляют 18 запросов к файлам JavaScript, что не изменилось по сравнению с прошлым годом, хотя четверть сайтов делает более 30 запросов. Возможно, некоторую выгоду можно объяснить все более изощренными / раздутыми сценариями социальных сетей?
27% сайтов продолжают использовать Flash — падение на 5% за год. Большинство используется для рекламы, видео и игр. Вспышка не упала так быстро, как ожидалось, но ее будущее очевидно.
Там было 9% увеличение для «других» файлов. Эта цифра удвоилась в 2013 году, но в то время пользовательские шрифты и шрифты значков были относительно новыми.
Наконец, изображения отвечают за 85% прироста веса. Использование изображений с высоким разрешением (Retina) может составлять часть этого похода, за исключением:
- Страницы содержат более пятидесяти изображений, что кажется чрезмерным.
- Retina составляет относительно небольшую долю устройств.
- SVG, иконки шрифтов и эффекты CSS3 могут заменить многие изображения.
- Существует множество инструментов, помогающих уменьшить размер файла.
Дополнительные факторы
Опрос также показывает:
- На страницу делается 95 HTTP-запросов, что на единицу меньше, чем в прошлом году.
- Страницы содержат 862 элемента DOM.
- Ресурсы загружаются из шестнадцати доменов с максимум 52 запросами на домен.
- Средний балл PageSpeed составляет 78 из 100 — что удивительно хорошо, учитывая раздувание.
- 46% страниц используют библиотеки Google.
- 47% страниц используют пользовательские шрифты.
- 79% ответов сжаты (gzip’d).
- 14% страниц загружаются по HTTPS.
- 20% страниц используют localStorage.
- 65% страниц используют фреймы (в основном это видео и реклама).
- 74% страниц используют по крайней мере одно перенаправление — что кажется высоким.
Основные подозреваемые
Увеличение на 15% менее экстравагантно, чем увеличение на 32% в 2013 году и повышение на 30% в 2012 году , но это все же слишком много. Увеличилась ли ваша пропускная способность более чем на 15% за последние двенадцать месяцев? Треть веб-пользователей сейчас используют мобильные устройства — оценят ли они дополнительный вес?
Давайте поместим это в контекст для владельцев сайтов. Раздутые страницы негативно влияют на вашу доходность:
- Пользователи имеют более медленный опыт. Неважно, как великолепно выглядит ваш сайт — люди не будут ждать .
- Нет смысла создавать сайт, который работает на мобильных устройствах, когда ваши страницы занимают 2 Мб. Адаптивный веб-дизайн! = Адаптивный веб-сайт. Вы теряете до трети потенциальных клиентов?
- Google понизит рейтинг вашего сайта и нанесет ущерб вашим усилиям по поисковой оптимизации (хотя мы никогда не знаем точно, насколько это важно для алгоритма Google).
- Ваши расходы на хостинг увеличатся.
- Чем больше кода вы используете, тем больше вероятность, что он сломается. Обновления и обслуживание сложнее, занимают больше времени и стоят дороже.
Ирония в том, что веб-разработчики хвалят преимущества приложений HTML5 для нескольких устройств, когда одна страница часто больше загружаемой и медленнее, чем эквивалентное нативное приложение.
Страницы с избыточным весом не нужны. Моими основными подозреваемыми остаются раздутые шаблоны и рамки CMS. Они предлагают более дешевый и быстрый путь разработки за счет качества, эффективности и производительности. Многие из них содержат функции, которые вы никогда не будете использовать, но их удаление может быть трудоемким, утомительным и занимать много времени.
Мы можем суммировать проблему одним простым словом: лень . Разработчики виноваты — это ты и я. У нас есть много оправданий:
- никогда не хватает времени
- клиент настаивал, что это должно быть сделано таким образом
- бюджет / график слишком плотный
- Я унаследовал дрянную систему
- У меня нет инструментов
Будь то технические границы или неспособность объяснить проблемы, это все равно лень. Мы работаем на угольном забое; окончательные решения — наши одни. Зачем создавать плохо оптимизированный сайт, когда многие решения для взлома очень просты и занимают минуты?
Клиенты редко ценят эффективность, которую мы получаем, но они ничего не понимают, что мы делаем. Мы являемся экспертами, и минимизация веса страницы является неотъемлемой частью работы. Сделай это. Проще просить прощения, чем просить разрешения.
</ Декламация> </ мыльница>
Вы обеспокоены проблемой ожирения в Интернете? Вы довольны тем, что масштаб увеличился? Вы или другие разработчики изо всех сил пытаетесь внедрить методы оптимизации или объяснить их клиентам? Как вы думаете, есть и другие причины? Крэйг слишком упрощен и кричит ?!