Даже в эпоху невероятно высоких скоростей интернета и скорого появления 5G для мобильных устройств скорость страницы, то есть скорость загрузки веб-страницы, по-прежнему является основным фактором, который следует учитывать при создании или редизайне сайта.
Медленная загрузка страницы не только вызовет нетерпение и разочарование у пользователей, но и может негативно повлиять на результаты поиска в Google. Я побеседовал с разработчиком Тимом Остхаймером, чтобы узнать, почему вы должны помнить о скорости страницы, когда работаете с разработчиком над обновлением своего сайта.
John Becker: Что такое скорость страницы и почему она важна?
Tim Ostheimer: Фраза «контент – это король» актуальна и сегодня. Контент является наиболее важным фактором, определяющим рейтинг страницы. Однако алгоритмы, используемые для ранжирования страниц, учитывают множество различных аспектов вашего веб-сайта, чтобы определить, достойна ли ваша страница попадания в топ результатов.
Лучший способ подумать об этом - оценить общее впечатление, которое ваша веб-страница предоставляет пользователям. Поисковые системы обычно отдают предпочтение страницам с наиболее полезным контентом и соответствующим поисковому запросу на веб-сайтах, оптимизированных для всех устройств. Это связано с тем, что на этих страницах пользователи находят ответ на свой вопрос и проводят больше времени. Если ваш веб-сайт плохо отображается на мобильных устройствах или загружается долго, большинство пользователей уйдут еще до того, как он завершит загрузку всех ваших изображений. Это показывает поисковым системам, что ваш сайт не дает им хороших результатов в поиске.
JB: Какой самый большой фактор на странице, влияющий на скорость страницы
TO: Чаще всего именно размер загружаемых ресурсов, обычно изображений и других медиафайлов, оказывает наибольшее влияние на время загрузки. Сайт с одним или двумя большими изображениями может легко увеличить время загрузки на несколько секунд. Помните о размере всех медиафайлов, которые вы встраиваете на свою веб-страницу, и ищите любые возможности для их оптимизации, уменьшая размер файлов.
Не существует определенного размера файла, подходящего для всех изображений. Вам следует просто попытаться использовать изображения, которые отображаются с подходящим размером пикселя (размерами по высоте и ширине) для его использования и с настройками качества, которые не приводят к заметной размытости или пикселизации.
Как правило, размер изображения для веб-сайта не должен превышать 350 КБ, но большинство из них даже при размере менее 100 КБ будут выглядеть нормально. В идеале вы хотите, чтобы общий размер файла веб-страницы, включая все ресурсы, не превышал 2 или 3 МБ. Чем ниже, тем лучше.
JB: Скорость страницы по-прежнему актуальна в 2019 году? Это что-то, что становится менее важным по мере повышения скорости подключения к Интернету?
TO: Скорость страницы всегда будет важна, и хотя средняя скорость Интернета со временем увеличивается, всегда найдутся пользователи, у которых нет к ней доступа. скорость или те, кто заходит на сайты с мобильного устройства и платит за каждый загруженный мегабайт. Если у вас большая веб-страница, которая загружается медленно или плохо отображается на мобильном устройстве, Google и другие поисковые системы заметят это.
JB: А как насчет встроенных видео или GIF-файлов?
TO: Анимированные GIF-файлы часто имеют очень большой размер файла, поскольку каждый кадр GIF-файла содержит данные изображения, которые необходимо загрузить. Оптимизировать GIF без ужасной потери качества очень сложно, поэтому я обычно избегаю их использования, за исключением определенных ситуаций, например электронной почты, где нет других вариантов анимированных изображений.
Видео - отличный способ добавить индивидуальности вашему веб-сайту и предоставить ценный контент, но вы должны быть осторожны с количеством видео, которое вы используете на одной странице. Видео имеют большой размер файла, но многие хостинговые службы очень хорошо справляются с так называемой асинхронной загрузкой, что по сути означает загрузку видеоресурса отдельно от остальной части веб-страницы. Это гарантирует, что остальная часть страницы загружается нормально, пока браузер загружает видео на стороне, вместо того, чтобы ждать загрузки всех ресурсов, прежде чем веб-страница станет функциональной.
В отличие от статических изображений, видеофайлы также передаются в потоковом режиме. Это означает, что каждый кадр видео загружается постепенно, а не весь сразу, и это помогает обеспечить удобство использования вашего веб-сайта и просмотр видео, даже если оно не было просмотрено. Загрузка полностью завершена.
JB: Скорость страницы одинаково важна на настольных компьютерах и мобильных устройствах?
TO: Скорость страницы обычно более важна для мобильных пользователей. Поисковые системы понимают, что пользователи мобильных устройств обычно используют более медленное подключение к Интернету, их устройства немного менее мощны и они часто используют свои собственные данные, за которые платят.
Браузеры на мобильных устройствах даже имеют встроенные функции, такие как запрет автоматического воспроизведения видеофайлов, чтобы гарантировать, что веб-страница не будет слишком большой. В противном случае одно видео может занять большую часть тарифного плана мобильного телефона пользователя.
Каждый раз, оптимизируя веб-сайт, вы должны обращать внимание на ресурсы, которые не нужно загружать для всех пользователей. Убедитесь, что подобные ресурсы загружаются асинхронно, чтобы файл загружался только при необходимости.
JB: Влияет ли асинхронная загрузка на форматирование?
TO: Это может зависеть от того, как построена веб-страница, но, скорее всего, нет. Асинхронную загрузку следует использовать только для ресурсов, которые не важны для общей структуры страницы. Для чего-то вроде видео метод встраивания, предоставляемый службой хостинга, может точно определить, как загружается ресурс, но обычно у них будет объект-заполнитель, который отображается до тех пор, чтобы обеспечить согласованность интервалов. Обычно проблема форматирования касается только медиафайлов, но в зависимости от наличия на сайте пользовательских шрифтов или скриптов при асинхронной загрузке ресурсов могут учитываться и другие моменты.
JB: Есть ли менее очевидные вещи, которые могут повлиять на скорость страницы?
TO: Да, одним из примеров может быть слайдер, например слайдер изображений.
Причина, по которой это плохо, заключается в том, что вы загружаете ресурсы, которые на самом деле не видны пользователю, пока он не нажмет, чтобы увидеть их. Кроме того, слайдеры - плохой способ отображения контента, поскольку большинство пользователей увидят только первый слайд. Асинхронную загрузку можно использовать для задержки загрузки любых мультимедийных ресурсов до тех пор, пока они не потребуются, но в любом случае могут быть варианты получше, чем использование слайдера.
Еще одна вещь, на которую следует обратить внимание: на сайте слишком много встроенных шрифтов. Существует множество сервисов, таких как Google Fonts и Adobe Typekit, которые позволяют при необходимости загружать шрифты асинхронно, но вы все равно должны быть осторожны с количеством добавляемых шрифтов. Мы предлагаем использовать только один или два и встраивать только необходимые начертания и стили шрифтов из этих семейств шрифтов.
JB: Есть ли у вас какие-нибудь последние советы о том, как можно улучшить скорость страницы?
TO: Старайтесь, чтобы количество HTTP-запросов было как можно меньшим. Это файлы и мультимедийные ресурсы, которые необходимо загрузить, например изображения и сценарии, в дополнение к самой веб-странице. Даже если все ваши ресурсы хорошо оптимизированы, большое количество уникальных HTTP-запросов может легко способствовать замедлению страницы, особенно если они поступают с разных серверов. Если не загружаться асинхронно, даже один медленно загружающийся ресурс может оказать огромное влияние на скорость страницы.
Для получения дополнительной информации о технической стороне я предлагаю прочитать статью Даниэля Эскардо «Время до первого байта».