Меню

Рекомендации по повышению скорости сайта

Опубликовано 18.03.2019

Как убедиться, что ваш сайт оптимизирован по скорости?

Перевод статьи Lars Lofgren от 6 марта 2019 года.
Оригинал доступен по ссылке: https://www.quicksprout.com/website-speed/


Знаете ли вы, как быстро загружается ваш сайт?

В 2019 году скорость загрузки должна быть главным приоритетом для всех сайтов. Почему?

Задержка загрузки всего на одну секунду приводит к:

  • Снижению удовлетворенности клиентов на 16%
  • Снижению просмотров страниц на 11%
  • 7% потерям в конверсиях

По данным Amazon, задержка загрузки, равная одной секунде, будет стоить компании 1,6 миллиарда долларов в год.

Итак, как быстро должен загружаться сайт? 47% людей хотели бы увидеть страниц в течение двух или менее секунд, а 64% пользователей мобильных устройств – менее чем за четыре секунды. Однако среднее время загрузки для различных отраслей промышленности (например, в США) не соответствует этим критериям. Посмотрите на данное исследование от Google:

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

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

Теперь, когда вы понимаете, почему скорость сайта так важна, пришло время что-то с ней делать. 

Это руководство по ускорению работы вашего сайта.

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

Минимизируйте HTTP-запросы

HTTP-запросы сделаны для каждого элемента на вашем сайте, например, изображения, сценарии и таблицы стилей.

Исследования показывают, что 80% времени загрузки сайта связано с загрузкой элементов на странице. Так что для тех, кто имеет много компонентов на сайте, есть больше HTTP-запросов.

Используя настройки инструментов разработчика, вы можете определить, сколько запросов на данный момент обрабатывает сайт. Затем примите меры, чтобы уменьшить это число. Уберите все лишнее с сайта и упростите дизайн.

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

Я бы порекомендовал использовать такой инструмент, как Screaming Frog, чтобы помочь вам определить все перенаправления. Как только они будут определены, оставьте только самые необходимые.

Сократите время до первого байта (TTFB)

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

TTFB состоит из трех элементов:

  • Время HTTP-запроса
  • Время запроса процесса
  • Время отклика

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

Если у сайта быстрый TTFB, то запросы будут доставлены в браузер быстро. В конечном итоге это ускоряет загрузку контента для посетителей.

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

Просто посмотрите на столбец «Первый байт», чтобы увидеть, где вы находитесь. Тем, у кого TTFB превышает 200 мс, необходимо принять меры для улучшения этого числа. Вот некоторые общие проблемы, связанные с медленным TTFB:

  • Конфигурация сервера
  • Проблемы с сетью
  • Создание контента
  • Посещаемость сайта

Одним из лучших способов уменьшить TTFB является включение кэширования в браузере. Запомните это. Мы более подробно обсудим выполнение этой концепции позже.

Убедитесь, что ваш план веб-хостинга соответствует вашим потребностям

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

Существует четыре типа веб-хостинга:

  • Обычный хостинг
  • VPS хостинг
  • Выделенный сервер
  • Облачный хостинг

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

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

Запустите аудит сжатия

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

Маленькие файлы загружаются быстрее – проще некуда.

Я бы порекомендовал провести аудит сжатия с помощью такого инструмента, как GIDNetwork, чтобы дать лучшее представление о том, как сжатые файлы могут ускорить работу сайта. Вот как выглядит аудит Quick Sprout.

Чтобы протестировать сайт, нужно ввести URL-адрес и нажать «Проверить». Как видно из данного аудита, Quick Sprout не сжимается. Инструмент также предлагает посмотреть преимущества сжатия сайта.

Эта диаграмма показывает, как мой сайт будет выглядеть на разных уровнях сжатия. На четвертом уровне сжатия размер может быть сжат до 131 байта по сравнению с 178 без сжатия. Загрузка также улучшится с 0,12 до 0,09 секунд.

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

Данный способ подводит меня к следующему пункту.

Сожмите файлы

Допустим, ваш аудит сжатия выглядел примерно так:

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

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

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

Согласно исследованиям Yahoo, сжатие Gzip может ускорить загрузку сайта на 70%.

Уменьшите размеры изображений

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

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

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

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

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

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

Сократите и объедините файлы

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

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

  • HTML-файлы
  • CSS файлы
  • Файлы JavaScript
  • Google Fonts

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

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

Если у вас сайт на WordPress, ваш лучший вариант - плагин WP Rocket. Это определенно улучшит скорость вашего сайта.

Используйте асинхронную загрузку

Теперь, когда ваши файлы CSS и JavaScript сведены и объединены, пришло время оптимизировать способ их загрузки. Есть два варианта:

  • Синхронная загрузка
  • Асинхронная загрузка

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

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


Вы можете использовать тот же плагин WP Rocket, чтобы включить это.

Просто перейдите на вкладку «Статические файлы» и отметьте опцию асинхронной загрузки, как показано выше.

На этом снимке экрана вы увидите, что «Загрузка отложенных файлов JS» также отключена. Отсюда следует следующий способ повышения скорости сайта.

Отложите загрузку файлов JavaScript

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

Файлы JavaScript как правило имеют большой размер и поэтому я рекомендую откладывать их загрузку.

Как показано выше, это легко сделать одним щелчком мыши, если вы используете такой плагин, как WP Rocket. В противном случае вам придется вставить код в тег для файлов JS. Это будет выглядеть примерно так:

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

Улучшите поиск DNS

DNS - это сокращенное «система доменных имен». Это сервер, на котором есть база данных IP-адресов и имен различных хостов.

Когда пользователь вводит URL-адрес в свой браузер, DNS-сервер преобразует URL-адрес в IP-адрес, указывая его онлайн-местоположение.

Ввод названия URL-адреса веб-сайта в браузер не имеет большого значения для компьютера; его нужно перевести, чтобы найти сайт, на который вы хотите попасть. Вот визуальное представление того, как это выглядит, используя ubnt.com в качестве примера.

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

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

Убедитесь, что включено кеширование в браузере

Я говорил о кешировании браузера ранее, когда мы обсуждали TTFB. Если вы не знакомы с тем, как работает кэширование, вот объяснение.

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

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

Установите сеть доставки контента (CDN)

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

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

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

Сети доставки контента решают эту проблему.

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

Допустим, ваш исходный сервер находится в Техасе, но вы используете CDN для размещения ваших файлов по всему миру. Если пользователь в Китае переходит на ваш веб-сайт, его браузер может загружать файлы с сервера, находящегося поблизости.

Venture Harbour провел несколько тестов на пяти страницах своего веб-сайта после того, как они внедрили CDN. Ниже представлены результаты тестов:

  • Страница 1 - на 20% быстрее
  • Страница 2 - на 37% быстрее
  • Страница 3 - на 41% быстрее
  • Страница 4 - на 4% быстрее
  • Страница 5 - на 51% быстрее

Стоит отметить, что страница, которая была на 4% быстрее, переместилась с 2,06 до 1,97 с, поэтому она была быстрой с самого начала. В целом время загрузки сайта Venture Harbour сократилось на 30,2%. Это огромное улучшение.

Я бы порекомендовал использовать Cloudflare или StackPath (ранее MaxCDN), чтобы помочь вам настроить сеть доставки контента.

Размещайте видео на внешних платформах

Видео определенно может повысить ценность сайта. На самом деле, 64% пользователей с большей вероятностью будут покупать товары в Интернете, если смогут посмотреть видео о них.

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

Допустим, вы сняли демонстрационное видео о продукте, которое хотите добавить на сайт. Как вы подойдете к этому?

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

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

Вместо этого загрузите свои видео на стороннюю платформу, такую как YouTube.

Видео будет размещено на этой платформе, затем вы можете просто вставить его на сайт. Данный способ сэкономит место на сервере и ускорит сайт.

Удалите неиспользуемые плагины

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

Я тоже ими пользуюсь, и они, как правило, делают мою жизнь намного проще.

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

При поиске плагина ищите решения «всё в одном», чтобы вам не нужно было получать его для каждой маленькой функции. Например, вы ищете плагин WordPress для социальных сетей. Вместо того, чтобы получить один плагин для Instagram, один плагин для Facebook и один плагин для Twitter, найдите тот, который поддерживает все эти платформы.

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

Заключение

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

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

Итак, что необходимо для быстрого сайта в 2019 году?

Недостаточно сделать что-то одно. Начните с рекомендаций, которые я описал выше.

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

Поделиться: