Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем
Заказывайте честное и прозрачное продвижение
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Это очень простой вопрос, но найти нормальный ответ оказалось дико сложно. Чтобы вы не повторяли мой трудный путь по античным форумам и сомнительным подборкам, я собрал самый сок. В статье: один простой, но трудоемкий способ сделать все руками и три действительно полезных сервиса, помогающие узнать размер страницы сайта в килобайтах.
Как задать размер страницы в HTML?
В браузере можно сделать так: нажать последовательно CTRL и — . После этого масштаб страницы
уменьшится с сохранением ширины документа.
Интересные материалы:
Какие ксерокопии нужны для прописки? Какие льготы дают за 3 ребенка? Какие льготы для молодоженов? Какие льготы есть многодетным семьям? Какие льготы есть у одинокой матери? Какие льготы положены многодетным семьям в Московской области? Какие льготы предусмотрены для молодой семьи? Какие льготы у отца троих детей? Какие машины относятся к роскоши? Какие мероприятия по охране природы можно предложить?
А сколько «весят» страницы твоего сайта?
У многих из нас хороший, скоростной интернет. Поэтому многие вебмастера не задумываются над тем, сколько должен весить сайт. Однако, я часто сталкиваюсь с тем, что в моём распоряжении слабый интернет. Таким примером является то, что живя на достаточном расстоянии от города М, у нас нет 4G, а скорость 3G я совсем не замечаю на своём телефоне. Скорее всего, статья ничего нового вам не раскроет, просто посмотрим сколько «весят» главные страницы популярных сайтов, а так же попытаемся выяснить приемлимые цифры.
Сайты
Будем грузить главные страницы сайта и выяснять, сколько они весят. Для анализа я взял первые 50 сайтов из статистики liveinternet. Остальные 30 я составил из рейтингов забугорья и личного пользования. В данной статье не будем разделять сайты по типам, а просто взглянем на общую картину мира. Список сайтов
vk.com www.odnoklassniki.ru mail.ru www.avito.ru www.gismeteo.ru www.rbc.ru www.drom.ru auto.ru rutracker.org www.wildberries.ru rian.ru lenta.ru hh.ru kp.ru vesti.ru kinopoisk.ru www.irr.ru lice-mer.ru tiu.ru directadvert.ru www.sotmarket.ru www.liveinternet.ru www.superjob.ru smi2.ru slando.ru fotostrana.ru www.gazeta.ru www.sberbank.ru ngs.ru www.spishy.ru www.sportbox.ru www.championat.ru www.rg.ru www.e1.ru www.echo.msk.ru www.allbest.ru www.woman.ru www.job.ru www.consultant.ru newsru.com www.rabota.ru www.babyblog.ru zona.ru pulscen.ru utro.ru www.sport-express.ru farpost.ru baby.ru planeta-online.tv nsportal.ru facebook.com google.com youtube.com yahoo.com wikipedia.org baidu.com live.com armazon.com qq.com twitter.com taobao.com blogspot.com msn.com ebay.com yandex.ru bing.com wordpress.com tumbir.com microsoft.com apple.com paypal.com ask.com imdb.com www.artlebedev.ru habrahabr.ru bash.im forum.searchengines.ru thepiratebay.se dribbble.com play.google.com/store
Браузер и машина
Для снятия показаний был взят Firefox 20 на машине с xUbuntu 12.04. На других машинах и браузерах сайты могут отличаться, но не сильно.
Для автоматизации процесса были взяты аддоны: Linky — через него я сразу открывал все сайты в новые вкладки NoScript — для отключения скриптов и анализа размера страниц, собственно, без них UnMHT — для сохранения всех открытых вкладок с содержимым в отдельные файлы, название которых совпадает с открытым сайтом
Сохранение
MTH сохраняет файлы немного большего размера, но погрешность не слишком высокая, по крайней мере, на моих замерах между UnMTH и сохранялкой Firefox.
Краснопанда была открыта в приватном режиме, чтобы мои кукукесы и остальные штуки не мешали чистому результату. Поэтому, все социальные сети должны весить мало, ввиду того, что никто там не залогинен. Посмотрим, так ли это.
Сайты со всем включённым
Я открыл все вкладки и сохранил их. Под сохранение попали и Flash и HTML5 вещи, что значительно увеличивает размеры сайта. Получился такой график
Я всё строил в LibreOffice Calc, просто потому что могу. Средняя получена путем высчитывания среднего арифметического по 4м соседям, просто для наглядности.
Видно, что почти все вкладываются в 3 Мб, а средний вес сайта составляет около 1,4 Мб.
Сайты с отключенными Javascript и Flash/Html5 объектами
Теперь у нас нету скриптов, поэтому размеры должны уменьшиться достаточно сильно. Некоторые сайты сразу выкидывают окно с сообщением, что они не работают без JS, они весят совсем мало.
Видно, что весь график смещается влево, средний размер сайтов порядка 0,9 Мб.
Общий график
Результаты
| Сайты | JS включен (Mb) | JS отключен (Mb) |
| accounts.google.com | 0,3 | 0,3 |
| allbest.ru | 0,1 | 0,1 |
| amazon.com | 1,3 | 0,6 |
| apple.com | 1,1 | 0,5 |
| artlebedev.ru | 2 | 1,3 |
| ask.com | 1,1 | 0,6 |
| auto.ru | 2,3 | 0,9 |
| avito.ru | 0,5 | 0,3 |
| baby.ru | 1,5 | 1,2 |
| babyblog.ru | 1 | 0,8 |
| baidu.com | 0,1 | 0,05 |
| bash.im | 0,7 | 0,1 |
| bing.com | 0,4 | 0,05 |
| championat.com | 3,2 | 1,4 |
| consultant.ru | 0,4 | 0,2 |
| directadvert.ru | 1,3 | 0,5 |
| dribbble.com | 1,8 | 1,3 |
| drom.ru | 0,8 | 0,5 |
| e1.ru | 0,5 | 0,4 |
| ebay.com | 1,5 | 0,9 |
| echo.msk.ru | 3,5 | 2,3 |
| facebook.com | 0,9 | 0,5 |
| forum.searchengines.ru | 0,8 | 0,3 |
| fotostrana.ru | 3,4 | 1,7 |
| gazeta.ru | 2,7 | 1 |
| gismeteo.ru | 0,6 | 0,4 |
| google.ru | 0,9 | 0,2 |
| habrahabr.ru | 2,7 | 1,8 |
| imdb.com | 0,9 | 0,9 |
| irr.ru | 1 | 0,5 |
| job.ru | 2 | 1 |
| kinopoisk.ru | 3,1 | 1,7 |
| kp.ru | 7,6 | 5,8 |
| lenta.ru | 1,8 | 0,7 |
| liveinternet.ru | 0,5 | 0,1 |
| login.live.com | 0,4 | 0,3 |
| mail.ru | 0,8 | 0,6 |
| microsoft.com | 1,7 | 1,1 |
| news.sportbox.ru | 2,4 | 1,4 |
| newsru.com | 0,9 | 0,8 |
| ngs.ru | 1,3 | 1,2 |
| nsportal.ru | 2,2 | 2,1 |
| odnoklassniki.ru | 1 | 0,1 |
| paypal.com | 0,7 | 0,7 |
| planeta-online.tv | 1,9 | 1,5 |
| play.google.com | 2,6 | 2,5 |
| pulscen.ru | 1,3 | 0,6 |
| qq.com | 2 | 0,9 |
| rabota.ru | 1,4 | 0,5 |
| rbc.ru | 0,9 | 0,5 |
| rg.ru | 2,5 | 1,8 |
| ria.ru | 9,4 | 1,3 |
| ru.msn.com | 2,2 | 0,8 |
| ru.yahoo.com | 1,1 | 1,1 |
| rutracker.org | 0,4 | 0,3 |
| samara.hh.ru | 0,7 | 0,3 |
| sberbank.ru | 1 | 0,4 |
| slando.ru | 2,1 | 0,8 |
| smi2.ru | 1,7 | 1,9 |
| sotmarket.ru | 3,4 | 0,4 |
| spishy.ru | 1 | 2 |
| sport-express.ru | 2,9 | 0,8 |
| superjob.ru | 1,1 | 1,6 |
| taobao.com | 2,6 | 0,1 |
| thepiratebay.se | 0,1 | 1,6 |
| tiu.ru | 2,6 | 0,6 |
| topface.com | 1,5 | 0,05 |
| twitter.com | 1 | 0,7 |
| ulyanovsk.farpost.ru | 0,8 | 0,5 |
| utro.ru | 2,6 | 1,3 |
| vesti.ru | 2,3 | 1,4 |
| vk.com | 0,6 | 0,1 |
| wikipedia.org | 0,2 | 0,2 |
| wildberries.ru | 2,1 | 1 |
| woman.ru | 3,4 | 2,6 |
| wordpress.com | 0,6 | 0,2 |
| yandex.ru | 1 | 0,5 |
| youtube.com | 1,4 | 1,3 |
| zona.ru | 5,5 | 3,7 |
Самыми жирными оказались сайты с большим количеством текста — ria.ru, kp.ru. К ним в догонку идут сайты магазинов. В 300Кб укладываются трекеры (thepiratebay.se весит меньше ста), так же поисковики и некоторые соцсети.
Выводы
Средние размеры сайтов колеблются в 1-1,5 мегабайтах. В идеале, если ваш сайт будет весить чуть меньше, чем у других. Поднимается количество просмотров, посещения. Поэтому, если вы еще не оптимизировали своё детище, посмотрите что можно сделать.
Лучше всего посмотреть что не так с Page Speed.
Основные пункты, про которые вы можете прочесть в любой статье по оптимизации:
- Оптимизируйте изображения. Они как правило составляют огромную весовую часть сайта.
- Сжимайте CSS и JS. Иногда получается скукожить раза в два.
- Используйте Ajax, для подзагрузки страниц и элементов, а не перезагрузки
- Кешируйте всё, что сможете. Главное, следите за нагрузкой на сервер.
- Включите Gzip сжатие
- Используйте отложенную загрузку изображений. Я на своих сайтах подключил Lazyload. Рекомендую, особенно на мобильных сайтах или мобильных версиях сайта.
- Css-спрайты. Группируйте картинки. И клиент, и сервер будут рады.
- Убирайте всё лишнее! Не ставьте тяжелые Flash приколюхи, онлайн радио и автоплей видеороликов без необходимости.
PS
Советы, которые я дал выше, ускорят ваш сайт, а пользователям будет комфортнее. Однако, если ваш сайт супер крутой, то никакие мегабайты не смогут остановить пользователя зайти на него. Если же ваш сайт так себе, оптимизация мало чего даст.
Делайте хорошие сайты.
Что было сделано
Из семантического ядра (списка запросов нашего сайта) были выбраны высокочастотные запросы. На их основе составлен анкор-лист (список запросов для внутренних ссылок). Ссылки с этими анкорами размещены на страницах с наибольшим весом (например, с Link Score 100) и вели на продвигаемые страницы (например, главную).
Рассмотрим на примере сайта турагентства. Страница с политикой конфиденциальности получает наибольший вес на сайте. Выбираем высокочастотный анкор «туристическое агенство» и оформляем его в виде ссылки на главную. То есть находим или дописываем текст:
Наше туристическое агенство предлагает ознакомиться с политикой конфиденциальности.
Анкор оформляем в виде ссылки таким образом:
ваш анкор
Вес страниц на мобильных устройствах
Только за последние два года количество пользователей мобильных устройств увеличилось до миллионов по причине того, что использовать телефоны и планшеты намного удобнее, чем ПК или ноутбук. У Lukew.com имеется статья, предоставляющая нам следующие данные:
- 3G-соединение медленнее на 40%, а 4G – на 12%, чем соединение, имеющееся у среднего настольного компьютера;
- Около 86% из 347 сайтов предоставляют одни и те же по размеру страницы всем устройствам.
Это означает, что скорость страницы пострадает, если она не оптимизирована под мобильные устройства. Чтобы сохранить хорошую скорость, может потребоваться пожертвовать некоторыми аспектами. К примеру, удалить анимацию или размещенное видео. Также важно следить за шириной сайта, иначе посетители могут упускать важную информацию, которую вы бы хотели им донести. Если страница сайта будет слишком растянута, она будет нечитабельна, и некоторые элементы, важные блоки не будут отображаться.
Тенденция с мобильными очень проста и наглядна. Сначала Google запускает проект AMP, а далее обещает сделать мобильный индекс основным. В 2019 он это воплотил в жизнь. Ко всем новым сайтам mobile-first index уже применяется по умолчанию. Основным устройством поиска информации и принятия решений уже давно стал смартфон. Особенно после значительного увеличения диагонали экрана практически у всех современных мобильных устройств.
Зачем это нужно?
Сайтам тоже нужно худеть к лету. Чем больше объем страницы, тем медленнее она загружается, тем дольше пользователь не получает доступа к контенту и тем хуже они выглядят в глазах поисковиков. Узнать размер страницы и сайта целиком стоит по двум причинам: оценить, сколько места на хостинге у вас осталось и как быстро он загружается в браузере. Второе особенно важно – скорость загрузки страниц учитывается поисковиками при формировании выдачи. Соответствующий алгоритм работает аж с 2010 года и если сайт тяжелый и медленный, на попадание в топ рассчитывать не стоит.
Какие бывают форматы размеров сайта для вёрстки
У каждого устройства есть несколько характеристик, описывающих его размер:
- Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма). У устройств с одинаковым размером экрана могут быть разные разрешения.
- Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
- Размер окна браузера — это ширина и высота области просмотра в пикселях (например, 1896 x 1080 — с учётом полосы прокрутки в 24 пикселя). Другими словами, это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Но размер окна браузера пользователь может сильно менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.
Физический размер устройства могут учитывать при дизайне кликабельных элементов, но в основном, размер сайта выбирают под разрешение, а ширину и высоту его контентной области (контейнера) определяют с учётом браузерных отступов.
Также нужно помнить об ориентации экранов — у ноутбуков, десктопов и телевизоров она альбомная (ширина больше высоты), а у смартфонов и планшетов обычно портретная (высота больше), но может переворачиваться.
Какие есть варианты создания страницы под разные мониторы и разрешения (типы верстки)
Фиксированная верстка
Проще говоря, мы жестко задаем статические параметры сайта, и его ширина не меняется, независимо от того, какое разрешение у пользователя. Это самый плохой вариант, использовать его вообще не рекомендуется, это явно вчерашний день.
Резиновая верстка без ограничений
Упрощенно это выглядит так:
Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.
Плюсы такой верстки:
- Пространство используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.
Минусы:
- На большом экране сайт очень сильно расползается. Особенно это неудобно для текста.
- Периодически может возникать пустое пространство между блоками.
Личный юзеркейс: у меня плохое зрение, если не надеть очки, приходится сидеть, уткнувшись лицом в монитор. Поверьте – даже на 21 дюйме с разрешением по ширине 1600 пикселей жутко неудобно воспринимать сайт с малого расстояния. Приходится вертеть головой слева направо, чтобы прочесть строчку текста.
Кроме того, при маленькой ширине экрана блоки будут наползать друг на друга, если не задана минимальная ширина. Чтобы избежать данных проблем, можно применить следующий способ:
Резиновая верстка с заданной минимальной и максимальной шириной
В данном случае в указанных вами пределах сайт может менять позиционирование блоков, но у него есть определенные ограничения:
- минимум – достигнув этого предела, блоки не «сжимаются», а появляется полоса прокрутки;
- максимум – контент не увеличивается по ширине, а добавляется пустое пространство по бокам, контент сайта при этом размещается по центру сетки.
Плюсы:
- Мы уверены в том, как выглядит контент нашего сайта при определенном разрешении Естественно, мы стараемся сделать максимально красивый сайт для наиболее распространенных разрешений в нашей тематике.
Минусы:
- Если вы выберете слишком маленький максимум для большого экрана, может возникнуть проблема с пустыми полями по бокам.
Например:
Адаптивная верстка
Наиболее современный и применяемый вариант верстки. Не только блоки контента позиционируются относительно друг друга в зависимости от разрешения, но и контент блоков (шрифты, изображения и т.д.) меняется в размерах.
При адаптивной верстке мы можем делать с контентом все что угодно, в зависимости от разрешения. Плюс данной верстки еще и в том, что она хорошо подходит для экранов мобильных устройств, в отличие от первых двух вариантов.
Если вы остановились на адаптивной верстке, рекомендуем пользоваться правилом MobileFirst, т.е. вначале работаем с малым разрешением и постепенно двигаемся к большому экрану.
Плюсы:
- Наиболее современный и правильный тип верстки.
Минусы:
- Может быть довольно сложной в реализации (в отдельных случаях). В любом случае вам нужно понимать, какое разрешение для вашего сайта в приоритете, чтобы правильно отобразить сайт на этих разрешениях.
Все эти методики могут сочетаться в зависимости от ситуации.
Например:
- адаптивный дизайн может дополнять резиновую верстку;
- либо сайт сделан на резиновом дизайне, а для мобильных приложений сделана мобильная адаптивная версия.
Рекомендую прочесть статью Анны Себовой, где вопрос мобильной верстки раскрыт с технической точки зрения.
- Если у вас фиксированная верстка, пора обновлять сайт, я вам серьезно говорю.
- Если у вас уже есть достаточно качественный сайт «на резиновой» верстке, просто добавьте адаптив для мобильных устройств и разрешений, на которых плохо отображается сайт.
- Если вы все делаете «с нуля», лучше делать полностью адаптивную верстку, это максимально современное и качественное решение.
- Если у вас уже есть сайт, и вы готовите редизайн, вам даже не нужно обращаться к открытым сервисам — посмотрите статистику вашего сервиса web-аналитики.
Как узнать статистику своего сайта по разрешениям экрана?
Если у вас Яндекс.Метрика
- Заходите в раздел Отчеты → Стандартные отчеты → Технологии → Разрешение дисплея:
- Получаем наглядную уникальную статистику, применимую конкретно к вашему сайту (разумеется, зачастую она будет совпадать со стандартной статистикой):
Если у вас Google Analytics
- Технологии → Браузер и ОС → Разрешение экрана:
- Данные отчеты полезны еще и тем, что мы можем выявить проблемы отображения сайта на определенном разрешении. Для этого обратите внимание на колонку «Показатель отказов».
- Если вы видите, что на определенном разрешении показатель отказов значительно выше среднего – следует протестировать отображение сайта в этом разрешении.
