Как ускорить загрузку страницы с помощью простой оптимизации веб-сайта

Скорость страницы может сделать или сломать вас в Интернете.

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

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

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

Почему время загрузки страницы имеет значение

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

Google впервые объявил, что скорость сайта повлияет на ранжирование в 2010 году, и продолжает демонстрировать свою важность. В 2018 году Google ввел скорость страницы в качестве фактора ранжирования скорости мобильного сайта.

SEO-специалисты быстро начали пытаться оптимизировать элементы на странице и сделать так, чтобы поисковая система их обрезала. Те, что не отстали. И теперь, когда недавно были объявлены основные веб-жизненные силы, скорость стала важнее, чем когда-либо.

Хотите узнать больше о том, как повысить скорость загрузки страницы? Вот некоторые ключевые области, которые следует учитывать.

Значение скорости страницы

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

Фактически, увеличение скорости мобильного веб-сайта на 0,1 секунды приводит к увеличению коэффициента конверсии для розничного бизнеса на 8,4%, как показало исследование Google, проведенное в 2020 году.

Скорость сайта также влияет на показатель отказов. Когда пользователи сталкиваются с медленным сайтом, они уходят. Согласно отчету Akamal Technologies, двухсекундная задержка загрузки страницы может увеличить показатель отказов веб-сайта на 103%.

Тестирование времени загрузки вашей страницы

Чтобы получить снимок вашего веб-сайта и создать контрольные показатели до и после процесса оптимизации, первое, что вам нужно сделать, — это проверить текущую скорость страницы. Пара инструментов, с которых вы можете начать, — это Google Page Speed ​​Insights и Webpagetest.org.

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

Вот как мы обычно настраиваем webpagetest.org для базовой проверки скорости.

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

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

Вторая статистика — время до первого байта (TTFB). Хотя это может помочь в качестве руководства, TTFB можно относительно легко манипулировать, и его важность может варьироваться. Если вы используете Google Lighthouse, вы также можете отслеживать First Contentful Paint и First Meaningful Paint, которые сообщают о том, как быстро ваша страница «рисует» экран элементами вашего контента.

Вы когда-нибудь загружали рецепт, и половина его не соответствовала скорости прокрутки, потому что вы пытаетесь пройти мимо всей рекламы и повествования? Это потому, что время FCP/FMP очень медленное.

Третий показатель — это размер загружаемой на страницу информации. Если это число очень велико, может быть полезно более внимательно посмотреть, сколько времени занимают разные элементы страницы.

Водопад скорости страницы

Если вы хотите узнать, как ускорить загрузку страницы, определите, какие элементы замедляют скорость страницы, и взгляните на водопад. Пример того, как выглядит водопад, можно увидеть ниже.

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

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

Как ускорить загрузку страницы с помощью веб-контента

Сжимайте и оптимизируйте изображения

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

Мы настоятельно рекомендуем соответствующим образом масштабировать изображения. Если изображение будет занимать на вашем сайте только 100 x 100 пикселей, нет необходимости делать его размером 1000 x 1000. Мы рекомендуем плагин, такой как Smush или EWWW Image Optimizer, если вы используете сайт WordPress.

Как конвертировать в изображения WebP на WordPress >>

Расширения типа изображения

При сохранении изображений важно знать, какое расширение использовать. Должен ли это быть .jpg или .png? Кто-то прислал вам логотип в формате .svg? Существует много противоречивой информации о том, что лучше.

Многие говорят, что формат .png (Portable Network Graphics) является лучшим вариантом, поскольку он предназначен для максимально возможного сжатия изображений без потери качества. Это частично верно. Как говорится, есть исключения из правил. Например, файлы .JPEG на самом деле работают намного лучше при использовании фотографий.

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

Сжать содержимое сайта

Изображения — не единственные элементы страницы, которые нуждаются в сжатии. Вы также должны сжимать элементы CSS, HTML и JavaScript на своем сайте. GZip — это настоятельно рекомендуемый инструмент сжатия, который Google предлагает протестировать перед внедрением в производственной среде. Мы рекомендуем использовать среду Dev Site, которая имитирует вашу собственную производственную среду, если вы планируете это сделать.

Суть сжатия содержимого вашего сайта заключается в том, что есть некоторые доказательства того, что оно может незначительно увеличить продолжительность времени до первого байта. Тем не менее, это также значительно увеличивает общее время загрузки страницы, что, по мнению некоторых экспертов по SEO, может быть приоритетным для Google. Мы рекомендуем тестировать сжатие на отдельных страницах, а не переключаться на весь сайт.

Упростите веб-дизайн

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

В дополнение к повышению скорости страницы, простой веб-дизайн также во многих случаях улучшает взаимодействие с пользователем. В исследовании UX, проведенном Google, было обнаружено, что пользователи, как правило, оценивают эстетику веб-сайта в пределах 1/50–1/20 секунды, и что визуально сложные сайты почти всегда оценивались как менее красивые, чем их более простые аналоги.

Чем красивее воспринимается веб-сайт, тем лучше будет UX и SEO, и тем больше увеличится конверсия. Упрощенный дизайн веб-сайта — один из самых быстрых способов повысить скорость страницы за короткий промежуток времени. Тем не менее, мы рекомендуем проводить A/B-тесты, чтобы увидеть, как на самом деле работают изменения, а не сразу вносить 100%-е изменение.

Как ускорить загрузку страницы с помощью хоста

Ваш хост также играет большую роль во времени загрузки страницы. Вот несколько способов ускорить загрузку страниц с помощью вашего хоста.

Включить кэширование

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

Чтобы еще больше оптимизировать скорость страницы, Nexcess Cloud позволяет использовать Cloud Accelerator. Это можно легко включить и выключить одним нажатием кнопки в разделе производительности клиентского портала.

Не уверены, следует ли вам включить Varnish или NGINX? Узнайте больше о разнице между Varnish и NGINX в нашем Полном руководстве по оптимизации Magento 2.

Кэширование и CDN

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

Зачем вам WordPress CDN >>

Для WordPress и WooCommerce ознакомьтесь с нашим руководством по настройке Nexcess CDN с помощью WordPress и CDN Enabler.

Другие области для рассмотрения

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

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

Например, нам не поможет простая оптимизация Nexcess.net, нам также необходимо оптимизировать Nexcess.net/magento/hosting и Nexcess.net/cloud/hosting.

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

Скорость страницы и SEO

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

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

Ускорьте время загрузки с помощью правильного хостинга

Мы прошли долгий путь от ожидания загрузки изображений построчно. Скорость страницы — это не только то, на что жалуются потребители — она также может влиять на конверсию, ранжирование и многое другое. Делать все возможное, чтобы увеличить скорость страницы, ВСЕГДА хорошая идея.

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

Nexcess предоставляет полностью управляемый хостинг WordPress, который включает в себя:

• Автоматические обновления.
• SSL для безопасности.
• Встроенный CDN.
• Сжатие изображения.
• Кэширование.
• И более!

Убедитесь в этом сами, воспользовавшись двухнедельной бесплатной пробной версией.

Связанный контент

• Как скорость страницы влияет на SEO
• 5 передовых методов для ускорения вашего сайта WordPress
• Как повысить скорость сайта WooCommerce и избежать медленных запросов
• Лучшие хаки размера изображения WooCommerce, чтобы ваш сайт оставался быстрым
• Что такое сеть доставки контента (CDN)?
• 7 самых быстрых тем WordPress
• Зачем вам нужен CDN? | Технический разговор Nexcess

Этот блог был первоначально опубликован в июле 2018 года. С тех пор он был обновлен для обеспечения точности и полноты.