1. Минимизируйте ваши HTTP-запросы
2. Сократить время до первого байта (TTFB)
3. Убедитесь, что ваш план веб-хостинга соответствует вашим потребностям
4. Запустить аудит сжатия
5. Сожмите ваши файлы
6. Уменьшите размеры ваших изображений
7. Сократить и объединить файлы
8. Использовать асинхронную загрузку
9. Отложить загрузку файлов JavaScript
10. Улучшение поиска DNS
11. Убедитесь, что кеширование в браузере включено
12. Установить сеть доставки контента (CDN)
13. Размещать видео на внешних платформах
14. Удалить неиспользуемые плагины
15. Заключение

Вы знаете, как медленно загружается ваш сайт?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сократить время до первого байта (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, чтобы включить это.

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

На этом снимке экрана вы также увидите, что опция «Load JS files deferred» также отключена. Это приводит меня к еще одной лучшей практике для скорости сайта.

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

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

Файлы JavaScript имеют большой размер и могут быть отложены.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Венчурная Гавань провел несколько тестов на пяти страницах на своем веб-сайте после того, как они внедрили 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 году?

Вы не можете сделать только одну вещь. Начните с следования списку лучших практик, которые я определил выше.

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

Похожие

Комментарии