Как сократить время загрузки страницы?

Жизнь в постоянном темпе заставляет Интернет быстро работать на веб-сайтах. Мы ожидаем, что переход от страницы к странице будет настолько быстрым, что он будет незаметен. Медленная загрузка страницы может вызвать у пользователя нетерпение и раздражение. В результате интернет-пользователь уходит с сайта, а его владелец теряет читателя и возможность продавать. Так как же предотвратить это и как это повлияет на нашу позицию в Яндекс и Google? Почему страница загружается медленно? В этой статье вы найдете ответы.

Время загрузки страницы - сколько оно должно быть?

Статистика времени загрузки страницы по отношению к восприятию их пользователями выглядит следующим образом:

• Падение удовлетворенности клиентов на 20% происходит, если страница загружается дольше 2 секунд.
• 40% пользователей покинут ваш сайт, если не получат результат в течение 3 секунд.
• 47% интернет-пользователей ожидают, что страница загрузится в течение 2 секунд.
• 90% пользователей покинут страницу, если она не загрузится в течение 5 секунд.

Так какое же оптимальное время зарядки? Они показывают, что время, в течение которого страница должна быть отображена, составляет 3 секунды . Конечно, это цель, которую нужно преследовать, но во что бы то ни стало? Рассмотрите преимущества сокращения времени загрузки страницы.

Преимущества быстрого сайта

1. Быстрая загрузка сайта улучшает позиции в поисковых системах. Для Яндекс и Google это один из факторов ранжирования и на верхних позициях он выводит страницы, у которых нет задержек в загрузке.
2. Быстрая загрузка страницы означает более высокий уровень удовлетворенности пользователей (так называемый пользовательский опыт). Никто из нас не хочет тратить время на ожидание результата запроса.
3. Увеличение вашей конверсии. Если пользователь получает ответ быстро, у него больше шансов совершить конверсию, например, продать продукт или подписаться на информационный бюллетень.
4. Уменьшите показатель отказов. Если время загрузки страницы слишком велико, мы можем потерять пользователя безвозвратно.
5. Улучшение показателя Quality Score , оптимизирующего стоимость кликов и позиции отображаемой рекламы, например, в программе Google Ads.

Почему мой сайт загружается медленно? 5 основных причин

 

 

1. Дешевый виртуальный хостинг

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

Если сайт построен на Wordpress, стоит использовать системный выделенный хостинг. Такие серверы должным образом настроены для работы с WP и имеют предустановленные модули (например, LiteSpeed ​​Cache), оптимизирующие время загрузки такой страницы. Большинство ведущих поставщиков услуг предлагают соответствующие пакеты хостинга.

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

2. Отсутствие должной оптимизации кода сайта

Исходный код нашего веб-сайта также влияет на время загрузки веб-сайта. Он часто «раздут» и не оптимизирован. По мере развития веб-сайта и добавления новых функций появляются новые строки кода и ресурсы для загрузки. Журнал ошибок сервера, т.е. журнал ошибок, пригодится при диагностике состояния кода. Анализ такого файла позволит исключить ненужные ошибки. Консоль ошибок браузера или Кричащая лягушка также могут быть полезны. Последнее позволит вам определить ненужные редиректы или несуществующие ресурсы, которые генерируют ошибку 404.

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

3. Плагины и еще плагины

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

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

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

4. Фотографии тяжелого калибра

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

Разрешение FullHD составляет 1920 x 1080 пикселей. Поэтому нет веской причины загружать изображение шириной 10 000 пикселей. 2500 px достаточно для шапки страницы. Изображение немного большего размера даст нам удобство его кадрирования и займет меньше места на сервере. То же самое относится и к изображениям, которые украшают контент. Если ширина контента составляет около 1000 пикселей, изображение не должно превышать это значение.

Современные системы CMS, такие как WordPress, уже предоставляют уменьшенную версию даже больших изображений. Тем не менее, стоит контролировать размер фотографии, загружаемой на сервер, и разрешение фотографий, отображаемых на веб-сайте.

Также важна степень сжатия растровых изображений, например JPG. В программах обработки графики, а также во многих онлайн-инструментах мы можем сжимать качество, чтобы обеспечить изображение оптимального качества и веса. Инструмент TinyPNG заслуживает внимания, так как он будет сжимать наши изображения, уменьшая их вес, без заметной потери качества.

На протяжении многих лет наиболее часто используемыми форматами изображений были JPG, PNG и GIF. С развитием интернет-технологий появились новые форматы, такие как SVG и Webm. Формат Webm, несмотря на то, что он разрабатывался компанией Google уже 10 лет, так и не заменил другие растровые форматы. Он также не поддерживается старыми браузерами. Однако поинтересоваться ею стоит.

Чтобы завершить тему оптимизации ваших изображений, не забудьте:

• Уменьшите разрешение изображений до нужного на странице
• Позаботьтесь об оптимальном сжатии изображения
• Используйте современные форматы, такие как SVG или Webp.

Рассмотрите возможность использования онлайн-инструментов или подключаемых модулей, которые помогут вам выполнить шаги 1–3.

5. Использование большого количества шрифтов

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

Творчество дизайнеров не знает границ. При проектировании интерфейса сайта спланируйте оптимальное количество загружаемых шрифтов. Оптимальное количество — 2-3 разных начертания. Первый будет использоваться для основного контента, второй — для заголовков, а необязательный третий может использоваться для создания соответствующего визуального эффекта (например, соответствующего контраста или артикуляции контента).

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

Как проверить скорость загрузки страницы?

Ознакомьтесь с инструментами диагностики 

 

Google PageSpeed ​​Insights

Это бесплатный и самый важный инструмент прямо из стабильной версии Google. После ввода вашего URL мы получим результаты по скорости отображения в каждой области. Инструмент диагностирует любые потенциальные причины увеличения времени загрузки. Мы получим предложения о том, что мы можем сделать, чтобы улучшить скорость загрузки вашего сайта. Важно отметить, что PageSpeed ​​позволяет проверять производительность как на компьютерах, так и на мобильных телефонах.

Тест скорости сайта Pingdom

Этот простой и бесплатный инструмент проверит время, вес отдельных элементов и количество запросов к серверу. Тесты можно проводить с использованием серверов, расположенных на разных континентах. В результате исследования мы получим краткий аудит, который поможет найти узкие места сайта.

Консоль браузера

В браузере Chrome мы находим диагностический инструмент под названием Chrome DevTools. Достаточно нажать клавишу F12 на анализируемом сайте, чтобы получить подробную информацию о том, что происходит «под поверхностью» браузера при загрузке страницы. Интерфейс может показаться сложным, но через короткое время и с небольшим знанием того, как работают веб-сайты, мы получим бесценный диагностический инструмент. Мы идентифицируем все загруженные ресурсы и даже ошибки JavaScript.

Плагины для Joomla

У нас не всегда есть возможность вручную уменьшить изображения на нашем сайте. Это происходит, когда наш сайт уже существует в Сети и имеет большое количество ресурсов. Тогда нам могут помочь плагины, они конвертируют существующие ресурсы на сервере и следят за тем, чтобы следующие отрисовывались в новых форматах. Одним из примеров является плагин Joomla под названием JSpeed v2.1 – это плагин для увеличения скорости загрузки. Также может пригодиться плагин JCH Optimize для кэширования веб-сайтов или платный, но более универсальный JSpeed v2.1. (можете приобрести сразу у нас)

Резюме

Яндекс и Google в своем представлении об Интернете хочет предоставить своим пользователям наиболее ценные результаты в кратчайшие сроки — это понятно. Оптимизация скорости отображения веб-сайта имеет большое значение в то время, когда нам приходится бороться за внимание пользователя. Поговорка «время-деньги» здесь имеет особенно буквальное значение.