Как определить размер страницы сайта


Как узнать, сколько весит страница вашего сайта – semantica.in

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

Зачем это нужно?

Сайтам тоже нужно худеть к лету. Чем больше объем страницы, тем медленнее она загружается, тем дольше пользователь не получает доступа к контенту и тем хуже они выглядят в глазах поисковиков. Узнать размер страницы и сайта целиком стоит по двум причинам: оценить, сколько места на хостинге у вас осталось и как быстро он загружается в браузере. Второе особенно важно – скорость загрузки страниц учитывается поисковиками при формировании выдачи. Соответствующий алгоритм работает аж с 2010 года и если сайт тяжелый и медленный, на попадание в топ рассчитывать не стоит.

Как узнать сколько весит страница сайта?

Можно воспользоваться специальными сервисами или посчитать размер «руками» в браузере. Сервиса в подборке всего три, зато они в тельняшках и красавцы. Но сначала попробуем сделать все сами.

Как узнать, сколько весит страница сайта в браузере

Чтобы найти нужную информацию, зайдите в инструменты разработчика браузера Google Chrome («Настройки» >> «Дополнительные инструменты» >> «Инструменты разработчика» или просто F12).Нужную информацию можно получить во вкладке Network. Главный минус – это очень неудобно. Там отображается вес каждого элемента страницы, а скорость их загрузки в миллисекундах можно посмотреть на временной шкале. Но на этом все: можно либо узнать полный размер страницы сайта в килобайтах и время загрузки (самая нижняя строка), либо уточнить эти же параметры для типа элемента. Если вы шарите в JavaScript и CSS, можно посмотреть, какие скрипты и стили подгружаются медленнее других, но полноценным анализом это назвать сложно.

Переходим к сервисам.

2ip.ru

Простой, попсовый и удобный сервис, который обычно используют для проверки IP-адреса. Он выдает необходимый минимум информации. Чтобы узнать, сколько весит страница сайта, нужно выбрать в списке инструментов «Информация о сайте». Вбиваете URL и радуетесь.

pingdom.com

Еще один очень удобный и красивый сервис. Помогает узнать размер страницы сайта и время загрузки. По итогам теста ставит оценку и подсказывает, как улучшить положение. Есть удобная временная шкала загрузки элементов страницы, разбивка по типу контента и количеству запросов к серверу. Результат теста можно скачать или поделиться им в социальных сетях (зачем – загадка). Ссылка на инструмент спрятана в футере сайта (кнопка Tools), все остальное на страничке «продает».

GTmetrix

Почти полностью дублирует функции инструмента pingdom.com. Отличается раздутым (он примерно вдвое длиннее) списком критериев оценки, возможностью посмотреть CMS сайта и графиком изменения скорости загрузки страницы за несколько недель/месяцев. Дополнительный плюс – чтобы добраться до нужной информации, не нужно долго скроллить, все данные разбиты по вкладкам.

Есть еще собственный инструмент «Гугл» – PageSpeed Insights. Сколько весит страница сайта он не показывает, но помогает определить основные проблемы, снижающие скорость загрузки. Правда, никаких особых подробностей он не дает, только краткую справку о том, как сделать все правильно. Список критериев проверки у него тоже небольшой, поэтому для детального анализа страницы лучше воспользоваться другими сервисами.

Больше всего подробностей дает GTmetrix. Он проверяет сайт по 46 параметрам, указывает на ошибки и возле каждой подрисовывает кнопочку «What’s This mean?», чтобы вы точно не запутались в терминах. Заботливый. Помимо стандартных советов по оптимизации скриптов и подобных, GTmetrix советует минимизировать количество http-запросов, поработать с фавиконом и сжатием элементов gzip.

Что делать, если сайт загружается медленно

Отсекайте лишнее

Если единственная функция элемента – быть красивым, смело режьте. Никто не оценит красоту вот этой плашки или вон того окошка, если придется долго ждать их загрузки. То же самое и с остальными элементами страницы, причем не только визуальными.

Не все сразу

Загружайте самые тяжелые и объемные элементы в последнюю очередь. Да, размер страницы сайта не изменится, но пользователь быстрее получит доступ к полезному контенту.

Рост размера веб-страницы

Обновлено 4 октября 2018 г.

Почему важен размер веб-страницы?

Размер веб-страницы является важным фактором для измерения, поскольку чем больше страница, тем больше времени требуется на загрузку необходимых ресурсов для ее отображения (при прочих равных). Как упоминалось во многих наших статьях, таких как Использование интеграции WooCommerce CDN, увеличение времени загрузки на напрямую приводит к снижению дохода на для многих сайтов электронной коммерции.Посетители веб-сайта, которые сталкиваются с медленной загрузкой веб-сайта, также с меньшей вероятностью вернутся, что влияет на успех вашего веб-сайта, будь то блоггер или интернет-магазин.

Поскольку в настоящее время для просмотра веб-страниц используется множество устройств, их возможности и совместимость могут отличаться. Это может привести к нормальной загрузке веб-сайта на устройстве A, однако на устройстве B происходит медленная загрузка веб-сайта. Знание размера страницы вашего веб-сайта и его оптимизация в меру ваших возможностей помогает обеспечить бесперебойную работу вашего сайта на всех устройствах.

Размеры веб-страниц быстро увеличиваются

Веб-сайты прошли долгий путь с 1990 года, когда родилась первая веб-страница. С тех пор размер веб-сайтов резко вырос за счет добавления различных изображений, файлов CSS / JS, видео, шрифтов и т. Д.

На основе информации, предоставленной HTTP Archive, средний размер веб-страницы в 2010 году составил 702 КБ по сравнению с в 2016 году, что составляет 2232 КБ.

С увеличением размера каждого веб-компонента и добавлением видео размер веб-страницы увеличился на 1530 КБ или 317% с 2010 по 2016 год.По мере развития веб-страниц они постоянно увеличивают размер страницы, что позволяет им выполнять более сложные задачи и быть более привлекательными для пользователя.

Соавторы увеличения размера веб-страницы

Есть несколько ключевых факторов, способствующих развитию увеличенного размера страницы веб-сайта. В следующем разделе эти компоненты описаны более подробно.

Изображения

Наибольшее увеличение размера веб-страницы с 2010 по 2016 год произошло за счет использования изображений.На многих веб-сайтах сейчас используется гораздо больше изображений, чем в прошлом. Возьмем, к примеру, интернет-магазины. Во многих продуктах, несколько изображений для каждого продукта, варианты размера и т. Д., Каждое дополнительное изображение вносит свой вклад в общий размер веб-страницы. Однако существуют службы, такие как Optimus, которые сжимают размер изображения, сохраняя при этом то же качество изображения.

Новые форматы изображений, такие как WebP и FLIF, также направлены на дальнейшее снижение общего воздействия изображений на размер веб-страницы.

JavaScript

JavaScript - чрезвычайно важный язык программирования в сегодняшней онлайн-экосистеме. Использование включает:

  • Проверка онлайн-форм,
  • анимация веб-страницы,
  • отслеживающая информация (например, Google Analytics, Facebook Pixel),
  • веб-игры и т. Д.

JavaScript предлагает множество вариантов использования, которые считаются большинством , как важный компонент для создания современного веб-сайта. Хотя JavaScript предлагает некоторые заманчивые преимущества, за него приходится платить размером страницы.При среднем размере скрипта для сайта в 2016 году, равном 357 КБ, это на больше, на 332 КБ, по сравнению со средним сайтом в 2010 году. Помните о том, что выполняет JavaScript вашего сайта и есть ли место для минимизации объем JavaScript или минимизация файлов - важная часть уменьшения размера страницы.

Видео

Использование видео на веб-сайтах значительно выросло за последние несколько лет. Благодаря своей способности привлечь внимание посетителя и быстро донести свою точку зрения, видео многие используют для обучения, маркетинга и SEO.Хотя видео составляют всего 7,7% от общего размера страницы среднего веб-сайта в 2016 году, это все еще на 174 КБ больше, чем веб-сайт с 2010 года.

Шрифты

Наконец, использование шрифтов является еще одним фактором увеличения размера веб-страницы. Поскольку 57% веб-сайтов сейчас используют пользовательские шрифты, очевидно, что их популярность быстро растет. Шрифты для среднего веб-сайта в 2016 году составляли 123 КБ от общего размера веб-страницы по сравнению с 2010 годом, когда на них приходилось всего 2 КБ.Их широкое использование связано с их способностью улучшить брендинг и удобство использования. Однако самым большим недостатком использования пользовательских шрифтов является то, что они могут повлиять на общую скорость вашего сайта. Оптимизация производительности шрифтов означает выбор шрифта, который загружается быстро и не слишком громоздко для скорости страницы.

Прочтите нашу статью, чтобы узнать больше об анализе производительности веб-шрифтов.

Использование рекламы

Использование рекламы на веб-странице, безусловно, может повлиять на размер веб-страницы и время загрузки сайта.В зависимости от типа рекламы, которую вы можете показывать пользователю (например, видео, изображение, текст), время, необходимое для загрузки, может быстро увеличиться. Использование блокировщика рекламы может помочь уменьшить видимость этих объявлений, и, следовательно, ваш браузер не будет запрашивать ресурс и, таким образом, избежать загрузки и ожидания отображения рекламы.

Однако в случае, когда блокировщик рекламы не используется, например, в случае многих мобильных пользователей, использование рекламы может значительно увеличить время загрузки страницы и размер веб-страницы .Например, согласно статье, опубликованной в The New York Times, новостной сайт, такой как boston.com, загружается за 33 секунды и занимает 16,3 МБ без блокировщика рекламы. Однако с блокировщиком рекламы страница загружается за 7 секунд и занимает всего 3,5 МБ.

При размещении рекламы на веб-сайте важно определить , как это повлияет на удобство использования сайта из-за увеличенного размера страницы. Если эффект слишком велик, вы можете подумать об изменении формата рекламы, чтобы он не был таким большим, или даже полностью удалить рекламу.

Мобильные устройства и размер веб-страницы

Мобильные устройства все чаще используются для доступа в Интернет. Приведенная ниже диаграмма демонстрирует рост использования мобильных устройств в Интернете по сравнению с настольными компьютерами (цифры указаны в миллионах).

Источник: web2feel.com

Как видно, незадолго до 2014 года количество мобильных пользователей, выходящих в Интернет, достигло того же уровня, что и пользователей настольных компьютеров, и с тех пор превзошло их. Это создает несколько интересных препятствий при обсуждении размера веб-страницы и его эффекта при просмотре веб-страниц с помощью мобильного устройства.Например, согласно lukew.com:

  • 3G-соединения на 40% медленнее, а 4G-соединения на 12% медленнее, чем в среднем для настольных компьютеров.
  • Из выборки из 347 сайтов 86% из них доставляли одни и те же ресурсы на все устройства.

Для мобильных устройств это означает, что по мере увеличения размера страницы и отсутствия оптимизации для мобильной доставки общая скорость страницы будет снижаться. Оптимизация адаптивного веб-сайта для мобильной доставки означает уменьшение размеров файлов изображений и принятие решения о том, следует ли предоставлять определенные аспекты сайта мобильным пользователям.

Сводка

Оптимизация веб-сайта может быть достигнута множеством разных способов, и важно сначала определить проблемы с производительностью веб-сайта, чтобы понять, с чего следует начать оптимизацию. Во многих случаях, чтобы уменьшить размер веб-страницы, рекомендуется начать с оптимизации изображений. Согласно нашей статье «Производительность в Интернете: 20+ экспертов делятся своими советами и ошибками», 46% экспертов заявили, что номер один должен быть сфокусирован на оптимизации изображений .

Это неудивительно, поскольку, как отмечалось выше, изображения составляют большую часть среднего размера веб-страницы.Уменьшение размера страницы веб-сайта за счет исключения ненужных скриптов или фреймворков, выбор шрифта для быстрой загрузки и оптимизация доставки изображений являются важными шагами в увеличении скорости веб-страницы.

.Аналитика

- Элегантный способ определить общий размер сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

виртуальных - Как рассчитать размер таблицы страниц?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

iphone - как определить размер html-элемента веб-страницы для телефона и планшета

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий