Блог

Что нового у нас?

ВСЕ
Дизайн Сайта
Брендинг
Контент
Продвижение
Исследование

РазработкаДизайн сайта

10 cпособов улучшить скорость страницы вашего сайта

Что такое PageSpeed?

PageSpeed Insights — это стандартный в отрасли инструмент тестирования для измерения производительности веб-сайта. Созданный Google, PageSpeed Insights (PSI) использует алгоритм, который объединяет многочисленные закулисные факторы веб-сайта, чтобы попытаться оценить их с общей оценкой. Эта оценка разделена на категории мобильных и настольных компьютеров, чтобы проиллюстрировать различные факторы, влияющие на два типа посетителей.

1. Найдите хорошего хостинг-провайдера

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

2. Убедитесь, что GZIP поддерживается и включен

GZIP — это метод сжатия данных, который выполняется на уровне сервера. Это позволяет быстрее загружать общие ресурсы, такие как изображения, таблицы стилей и файлы сценариев.

3. Сжимайте и загружайте изображения

Веб — дизайнеры и клиенты, как правило, хотят загрузить изображение самого высокого качества, которое у них есть. К сожалению, это полностью убьет скорость загрузки сайта. Даже если ресурс сжат в Photoshop, все равно отправьте его через инструмент сжатия изображений, такой как TinyPNG или Smush. 

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

4. Используйте опцию “подкачка” для пользовательских шрифтов.

PageSpeed Insights пометит вас, если текст невидим до тех пор, пока не загрузится пользовательский шрифт. Вы можете избежать этой “вспышки невидимого текста” (FOIT), загрузив системный шрифт, а затем “заменив” его на нужный шрифт, как только ресурс будет готов. 

Если вы загружаете шрифт Google, просто добавьте &display=swap в URL-адрес шрифтов Google. Если вы используете @font-face в своей таблице стилей, вы можете добавить параметр font-display: swap;. Вы также можете быстрее загружать шрифты, предварительно загрузив их в заголовок. Используйте rel=”предварительная загрузка” в теге <link>, чтобы захватить ваши файлы .woff2 раньше, даже при загрузке их локально.

5. Объедините и уменьшите CSS и JS

Объединяет ли ваша тема и минимизирует таблицы стилей и скрипты? Отлично! Но этого может быть недостаточно, чтобы успокоить тест на скорость. Используйте плагин, например WP Optimize, для дальнейшего объединения файлов из плагинов и снижения общего количества запросов при загрузке страницы.

6. Проверьте свою тему, на наличие лишнего кода

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

Удаления неиспользуемых JavaScript/CSS, проведя инвентаризацию того, что на самом деле используется. Возможно, у вас есть библиотека JS, которая, как вы думали, вам понадобится, но нет. То же самое касается плагинов — действительно сократите активные плагины только до тех, которые вам нужны. Не используйте плагин для того, что вы можете использовать изначально в своей теме.

7. Объективно оцените длину вашей страницы

Если вы помечены как “Избегайте чрезмерного размера DOM», спросите себя: «Не слишком ли много на этой странице?” Многие люди думают, что чрезмерный размер означает очень длинную страницу, что является одним из сценариев. Но он также может ссылаться на глубокую страницу или элемент, например, вложенные галереи, ползунки, аккордеоны и т. д. 

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

8. Поддерживайте свои перенаправления

Если URL-адрес ресурса устарел и должен следовать за перенаправлением на новое местоположение, вы замедляете процесс загрузки всех элементов страницы. Наиболее распространенным триггером перенаправления нескольких страниц является необходимость перенаправления с http на https. 

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

9. Проверьте свои коды отслеживания

Вы можете сделать все остальное правильно, и в тот момент, когда вы добавите какие-либо коды отслеживания (аналитика, менеджер тегов, пиксели конверсии и т. д.).

Ваш показатель скорости страницы сайта, скорее всего, резко упадет. Это происходит из-за того, что сторонние скрипты обычно не справляются с большинством показателей PageSpeed Insights. Они без необходимости перенаправляют с одного URL-адреса на другой. 

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

Что вы можете сделать, так это следить за своими сценариями и удалять элементы отслеживания для кампаний с истекшим сроком действия. Аналогично, если вы выполняете A/B-тест, соберите свои данные, а затем удалите тестовый сценарий. Все, что должно изменить вывод перед загрузкой страницы, замедлит скорость вашего сайта.

10. Кэширование сайта

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

Некоторые хостинг-провайдеры, такие как WP Engine и SiteGround, предлагают отличное кэширование на уровне сервера в рамках вашего плана. Есть также варианты, такие как Cloudflare, если ваш хост не предлагает опцию кэширования.

Кроме того, вы можете найти множество плагинов WordPress для кэширования вашего сайта. Однако имейте в виду, что некоторые из этих плагинов могут на самом деле снизить ваш рейтинг PageSpeed Insights, поскольку они требуют больше времени для компиляции сайта для новых посетителей. Посетитель будет получать улучшенную скорость, когда он нажимает, но бот PageSpeed Insights будет тестировать только начальную нагрузку.

Улучшите скорость страницы вашего сайта для лучшего UX и UI дизайна сайта.

Очевидно, что не существует универсального решения для выполнения теста PageSpeed Insights. 

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

Есть вопросы?

Есть вопросы?

Мы перезапустим Ваш бизнес и сделаем его более результативным, создадим эффективное решение, которое поможет увеличить Вашу прибыль. Все, что нужно сделать – позвонить или написать нам.