Оптимизация скорости загрузки сайта: как проверить и увеличить

Содержание
  1. Объединение и удаление файлов Javascript
  2. 5. Объединение и минимизация CSS-файлов
  3. Несколько слов об оптимизации картинок для ускорения загрузки сайта
  4. Используйте CSS спрайты для сокращения HTTP запросов
  5. Как оптимизировать показатели Core Web Vitals
  6. LCP: как ускорить отрисовку контента
  7. FID: как ускорить время реакции страницы
  8. CLS: как убрать сдвиги макета страницы
  9. Что еще влияет на загрузку страницы: оптимизируем CSS
  10. Почему скорость загрузки сайта – это важно
  11. 2. Чем медленнее сайт, тем чаще пользователи покидают его, не дождавшись загрузки
  12. Баланс между удобством и скоростью
  13. 1 Протестируйте скорость загрузки
  14. Что вообще влияет на скорость сайта (исследование более 5 млн. страниц)
  15. Пользуйтесь кэшем браузера
  16. Как увеличить скорость загрузки сайта? ­
  17. Какое должно быть время загрузки? ­
  18. Оптимизация скорости загрузки сайта
  19. Сервисы, где можно проверить скорость загрузки страниц сайта
  20. Google PageSpeed Insights
  21. Gtmetrix.com
  22. Pingdom.com
  23. Webpagetest.org
  24. Зачем нужно ускорение загрузки сайта
  25. Скорость отрисовки страниц
  26. Проверка Google PageSpeed Insights
  27. Использование браузерного кэширования
  28. Сократите код
  29. Почему это важно?
  30. 3 Оптимизируйте настройки Wi-Fi
  31. Оптимизируйте HTML-код и CSS-, JS-файлы
  32. Как минимизировать код для ускорения загрузки сайта
  33. Как работают сервисы для проверки скорости интернета
  34. Скорость
  35. Ping
  36. Что такое джиттер
  37. Как пользоваться сервисами
  38. Следите за производительностью сайта
  39. От каких факторов зависит скорость загрузки сайта
  40. 4 Измените настройки роутера для лучшего сигнала
  41. Что такое хорошее время загрузки страницы?
  42. Кэширующие плагины для WordPress

Объединение и удаление файлов Javascript

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

Если вы используете CloudFlare, вы можете включить минимизацию JavaScript (JavaScript Minification), перейдя на вкладку Speed и отметив галочкой пункт JavaScript в подразделе Auto Minify.

Вы также можете включить Rocket Loader в том же подразделе. Эта функция объединяет JavaScript-файлы в один, загружает скрипты в последнюю очередь и кэширует их локально. Если использование этой функции приведёт к нарушениям в работе JavaScript-функциональности, её можно будет в любой момент отключить.

Если вы не используете JavaScript, то вы можете сжимать JavaScript-файлы вручную. Для этого можно использовать такой инструмент, как JS Compress (https://jscompress.com/).

Если вы веб-разработчик и хорошо разбираетесь в коде, вы можете запустить Grunt (https://gruntjs.com/) или Gulp (https://gulpjs.com/) для автоматизации процесса минимизации JavaScript. Существует также модуль Apache (https://www.modpagespeed.com/doc/filter-js-minify), который способен уменьшать размер исходного кода JavaScript «на лету», однако его нельзя сочетать с другими методами минимизации.

После объединения и минимизации ваших файлов JavaScript вам нужно настроить асинхронную или отложенную загрузку скриптов на сайте. Для внешних скриптов лучше использовать атрибут async. Для большинства других скриптов, которые полагаются друг на друга для работы, используйте атрибут defer. Более подробную информацию можно посмотреть на сайте — http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html.

При использовании WordPress вы можете попробовать один из плагинов оптимизации, таких как Hummingbird (https://premium.wpmudev.org/blog/hummingbird/) или плагин Async JavaScript (https://wordpress.org/plugins/async-javascript/), которые позволяют легко добавить атрибуты async или defer к JavaScript-файлам.

5. Объединение и минимизация CSS-файлов

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

Для пользователей CloudFlare функция минимизации CSS расположена в том же разделе Speed. Вы также можете включить минимизацию HTML.

Как и в случае с JavaScript, продвинутые пользователи могут использовать Grunt или Gulp для минимизации кода CSS на своём сервере. Существует также модуль Apache, называемый mod_ext_filter, который может быть настроен для автоматической минимизации файлов CSS, однако, поскольку они не будут кэшироваться как статические файлы, это не является предпочтительным способом минимизации.

Чтобы вручную минимизировать CSS, можно использовать специальные онлайн-инструменты. Например, Minifier — https://www.minifier.org/.

Несколько слов об оптимизации картинок для ускорения загрузки сайта

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

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

Настроить отложенную загрузку можно несколькими способами:

  1. Пока человек листает страницу — как только он будет в том месте сайта, где есть картинка, она будет загружена.
  2. Пока человек не кликнет по изображению — картинка будет подгружена тогда, когда человек нажмет на превью.
  3. В фоновом режиме — изображения будут подгружаться в фоновом режиме. 

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

Используйте CSS спрайты для сокращения HTTP запросов

CSS спрайты — это наверное самая значительная вещь, которую придумало человечество, после того как Тесла изобрёл электричество… Я действительно это сказал.. ой, я имел в виду Эдисона.

Ну, может быть не совсем самая крутая, но тем не менее.

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

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

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

YouTube использует этот файл довольно оригинально. Загружают они его как фон классу sprite. Когда возникает необходимость в выборе какого-то элемента, происходит выбор изначальной позиции при помощи CSS свойства background-position, а затем применение высоты и ширины.

Давайте и мы попробуем что-то подобное. Поэкспериментируем на этом же самом изображении с сайта YouTube.

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

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}

#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}
</style>

<div id="logo" class="sprite"> </div>

Таким образом, используя данное изображение, мы можем свести все подключения к одному HTTP запросу. Ну, как эффект?

Ещё одно преимущество CSS спрайтов заключается в том, что при применении псевдо класса :hover, изображение не будет пропадать на несколько мгновений (которые уходят на загрузку нового изображения), как это происходит без использования CSS спрайтов.

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}
#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}

#button {
  background-position:0 -355px;
  padding:5px 8px;
}

#button:hover{
  background-position:-25px -355px;
}

</style>

<div id="logo" class="sprite"> </div>

<a href="#" id="button" class="sprite"></a>

Как оптимизировать показатели Core Web Vitals

Разберем каждый параметр по отдельности.

LCP: как ускорить отрисовку контента

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

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

Этапы отрисовки

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

На LCP влияют четыре фактора, их можно оптимизировать:

  • ускорить время ответа сервера;

  • решить блокировку рендеринга JavaScript и CSS;

  • ускорить загрузку ресурсов;

  • оптимизировать рендеринг на стороне клиента.

FID: как ускорить время реакции страницы

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

Чем меньше времени тратится, тем лучше. Оптимальный показатель FID — не дольше 100 миллисекунд.

Для ускорения реакций страницы есть несколько решений:

  • сократить время выполнения JavaScript;

  • разбить длинные задачи на части;

  • отложить неиспользуемый JavaScript;

  • следить за размером подгружаемых библиотек JavaScript;

  • оптимизировать выполнение сторонних скриптов;

  • использовать web-workers

CLS: как убрать сдвиги макета страницы

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

Из-за сместившихся кнопок пользователь промахнулся

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

CLS измеряет совокупный сдвиг макета из-за неожиданных сдвигов, которые появляются из-за тормозящей загрузки элементов.

Для вычисления нужны два компонента:

  • общая область на экране, которую занимает элемент до и после сдвига;

  • расстояние, на которое он сдвинулся.

Область и расстояние сдвига

Оптимальный показатель CLS —не больше 0,1 на 75% сессий.

Что еще влияет на загрузку страницы: оптимизируем CSS

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

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

Для сравнения на верхней строчке загрузка страницы с блокирующими рендеринг CSS, на нижней с разделением CSS:

Сравнение загрузок страницы

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

Все эти возможности разобрали в отдельном материале.

Почему скорость загрузки сайта – это важно

Есть две причины измерить скорость загрузки сайта и ускорить его:

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

Очевидно, что Яндекс считает скорость важной составляющей нормальной работы сайта

2. Чем медленнее сайт, тем чаще пользователи покидают его, не дождавшись загрузки

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

Баланс между удобством и скоростью

Google запустил инструмент для анализа производительности сайта в 2013 году: PageSpeed Insights сканировал ресурс и давал ему оценку вместе с рекомендациями по загрузке. Но этот анализ был не очень точным и репрезентативным. В 2018-м инструмент получил улучшенный алгоритм Lighthouse — с тех пор анализ скорости стал объективнее, так как инструмент начал оценивать рендеринг страницы. В 2021 году метрики удобства страницы выходят на передний план и станут важным аспектом ранжирования. 

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

UX важен для всех поисковых систем: в руководстве Bing «положительный пользовательский опыт» признан более значимым, чем быстрая загрузка страниц, документация Yahoo! тоже указывает на приоритет удобства для пользователей в оценке скорости.

1 Протестируйте скорость загрузки

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

Проверить скорость интернета можно как на сайте поставщика услуг, так и на сторонних сервисах, например speedtest.net.

Если вы используете интернет с нескольких устройств, имеет смысл выполнить проверку скорости на всех гаджетах (особенно с Wi-Fi). Только после этого вы можете быть уверены, что на скорость не влияют настройки или сетевое подключение соответствующего устройства.

Наш собственный измеритель скорости интернета — рекомендуем!

Что вообще влияет на скорость сайта (исследование более 5 млн. страниц)

Авторы известного блога Backlinko с его главой — Дином Брайаном исследовали выдачу Google и определили способы, которые используют владельцы сайтов с наиболее быстро открывающимися страницами. Результат исследования получился весьма масштабным, так как было проанализировано более 5 000 000 страниц, но из него можно выделить 3 основных тезиса:

  1. Среднее время, за которое полностью загружается страница составляет 10,3 секунд для десктопа и 27,3 секунды для мобильных устройств.
  2. Как это ни странно, но самые работающие методы — или минимально сжимать файлы перед их отправкой со стороны сервера, или максимально. Средний уровень сжатия работает хуже всего.
  3. На скорость загрузки сайта на десктопе больше всего влияет CDN. А в мобильной версии — число HTML-запросов. 

Пользуйтесь кэшем браузера

Используя кэширование, вы можете значительно выиграть в скорости загрузки вашего сайта: когда пользователь первый раз заходит на ваш сайт, в кэше его браузера сохранятся некоторые JavaScript и CSS-файлы, которые затем будут автоматически показываться при его следующих визитах, а браузеру не придется тратить время на их загрузку. Для кэширования необходимо правильно настроить HTTP-заголовок Expires. Вы можете сделать это, прописав в файле .htaccess, который находится в корневой папке, следующие строки:

<IfModule mod_expires.c>
Header append Cache-Control "public"
FileETag MTime Size
ExpiresActive On
ExpiresDefault "access plus 0 minutes"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
</IfModule>

В данном случае у всех типов установлен срок в 1 месяц, но вы можете изменить время на то, которое вам нужно: кэш может храниться определенное количество лет (years), месяцев (months), недель (weeks) или дней (days).

Если вы пользуетесь какой-то определенной CMS, то можете установить для этого специальный плагин. В случае с WordPress подойдет W3 Total Cache: кэширование включается в настройках (выберите Settings у данного плагина в списке всех установленных плагинов, затем General — поставьте галочку у “Toggle all caching types on or off (at once)”).

Как увеличить скорость загрузки сайта? ­

Эра информационных технологий требует от контента легкости подачи и скоростного доступа. Современные проекты и веб-ресурсы стали доступными и легкими для поиска. Поисковые системы сами помогают нам находить необходимую информацию, а это значительно ускоряет любой процесс. Получив постоянный доступ к Интернету, мы стали ценить скорость и качество как полагающийся результат. (Как повысить популярность — смотрите в обучение продвижению сайтов бесплатно). И уже загрузка любого сайта больше десяти секунд вызывает у нас вопросы. Задаваясь вопросом, как делается увеличение скорости сайта, нужно сначала разобраться, какие факторы на это влияют и как вы можете оптимизировать работу своего профиля.­

Какое должно быть время загрузки? ­

Сегодня считается, что страница должна загружаться не дольше 10-15 секунд. Допускается загрузка до 30 секунд для крупных баз данных или каталогов, а также при работе с разнообразными ВПН-сервисами. Если за это время соединение не установлено, браузер может выдать автоматическую ошибку. Среднее время подключения обычно колеблется между 3-6 секундами после клика. За этот период большинство серверов дают ответ на запрос и открывают запрашиваемую ссылку.­

Оптимизация скорости загрузки сайта

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

Если вы все же решили добавить “полета” вашим страницам, то первое, на что стоит обратить внимание — это смена хостинга. Ведь локальные мелкие хостинги — это часто тормозные системы, которым попросту не хватает мощностей.­

Опытный программист поможет вам также сделать чистку и оптимизацию контента.­

Сервисы, где можно проверить скорость загрузки страниц сайта

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

Google PageSpeed Insights

Анализатор очень простой и удобный. Для того чтобы мгновенно оценить клиентскую оптимизацию, достаточно адресной строчке ввести URL интересующего ресурса и кликнуть на «Анализировать».

Что примечательно: ресурс не только идентифицирует скорость, но и то, настолько портал оптимизирован для мобильных устройств ПК. При этом быстродействие определяется посредством функционала двух метрик: DCL и FCP (низкий уровень – сигнал о проблемах с соединением или размером используемых ресурсов).

Анализатор позволяет посмотреть скорость сайта, проанализировать качество оптимизации, а также определить наличие проблемных зон. Ресурс не только констатирует проблемы, но и дает полезные советы, как улучшить ситуацию. Более подробно про данный инструмент я писал в статье — оптимизация PageSpeed Insights до 100 очков.

Gtmetrix.com

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

В пользовании Gtmetrix простой. При переходе на страницу ресурса необходимо ввести в адресную строку URL интересующего сайта и кликнуть на «Analyze».

Pingdom.com

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

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

Webpagetest.org

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

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

Зачем нужно ускорение загрузки сайта

В последнее время важным показателем для любого блоггера становится параметр скорости загрузки сайта (блога). Статистика говорит о том, что при времени загрузки сайта более 3 секунд – 57% посетителей покидают такой сайт, при времени открытия более 4 секунд, сайт покинут 75% пользователей. Вот и считайте сами, какие потери. Поэтому ускорение загрузки сайта, сегодня считается важным вопросом.

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

Кроме того, если человек зашел на Ваш блог (сайт) и не дождался его открытия, а затем ушел, то поисковые системы засчитают это, как отказ. Количество таких отказов может быть существенным, что влияет на поведенческие факторы. По результатам показателя отказов, блог будет хуже ранжироваться и будет занимать низкие позиции в поисковых системах. Посмотреть показатель отказов можно через страницу «Alexa», о том, как это сделать показано в статье на блоге «Как проверить позиции сайта», показатель отказов можно посмотреть также в Яндекс вебмастере, показатели будут существенно отличаться, но это отдельная тема.

Как видим, ускорение загрузки сайта напрямую повлияет на посещаемость сайта (блога), поэтому этим вопросом надо заниматься. Для того чтобы ускорить работу сайта нужно выполнить два этапа – проверить и сделать анализ скорости загрузки сайта, а затем выполнить сами мероприятия.

Скорость отрисовки страниц

Это время, за которое страница вашего сайта отображается или может отображаться в устройстве пользователя. Для ее проверки есть стандартный сервис, используемый seo-специалистами — Google PageSpeed Insights.

Проверка Google PageSpeed Insights

Выглядит он так:

Разделен на две вкладки — мобайл и десктоп. По умолчанию показывается для мобильных. Если раньше десктоп считался основной версией сайта, то теперь получается все наоборот. Теперь Google говорит: есть основная (мобильная) и десктоп. По умолчанию открыта вкладка мобайл.

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

В мобильной версии все стало еще сложнее. Эти 11 баллов из 100 — не редкость. Если вы проверите очень многие крупные и магазины, и маркет-плейсы, то увидите, что у всех очень низкие баллы.

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

Эти баллы — не сами факторы ранжирования. Некоторые seo-специалисты выдают этот тест за чуть ли не оценку Google. То есть, говорят — 29 баллов из 100 это насколько вас Google оценивает. Это ничего общего с реальностью не имеет, оценка отражает только скорость. А скорость — это один из сотен факторов.

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

Использование браузерного кэширования

Браузерное кэширование – это способность браузера сохранять локально ресурсы, такие как изображения, файлы JavaScript и файлы CSS, чтобы их не нужно было загружать каждый раз. Хотя использование этой функции влияет в основном на повторных посетителей, это по-прежнему важный шаг для ускорения сайта.

В CloudFlare этот параметр можно настроить, перейдя на вкладку Caching и выбрав подходящий вариант срока хранения данных в кэше – Browser Cache Expiration. Если ваши файлы обновляются нечасто, вы можете выбрать более длительный срок, например 8-16 дней. Если файлы обновляются чаще, то нужно выбрать меньший период.

Использование браузерного кэширования

Чтобы включить браузерное кэширование на серверах на базе Apache, вы можете попробовать добавить код, подобный этому — https://gtmetrix.com/leverage-browser-caching.html, в файл .htaccess в корневом каталоге вашего сайта.

Сократите код

Чем объемнее код вашего проекта, тем больше он весит, а значит, тем большее время требуется для его загрузки. Поэтому в первую очередь вам нужно убедиться, что код оптимизирован. Особенно это касается первой, посадочной страницы, на которую попадает пользователь — будет лучше отказаться от тяжелых скриптов JavaScript и Ajax либо убрать их в нижнюю часть страницы. Придерживайтесь известного принципа KISS — Keep it short and simple — пусть код будет коротким и простым.

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

Если вы хотите узнать, все ли в порядке с JavaScript на странице вашего сайта, воспользуйтесь этим сервисом: https://varvy.com/tools/js/

Этот совет также касается HTML и CSS-кода

Как и в случае с JavaScript, особое внимание уделите внешним файлам — к примеру, внешним таблицам стилей, которые по возможности лучше вставить в HTML

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Почему это важно?

Быстрый сайт необходим не только для ранжирования в Google и Яндекс, но и для поддержания стабильной прибыли.

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

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

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

В этом же опросе обнаружили, что одна секунда задержки может снизить удовлетворенность клиентов примерно на 16%.

3 Оптимизируйте настройки Wi-Fi

Ваш роутер и устройства с Wi-Fi должны располагаться в лучших местах. Кстати, недавно мы рассказывали, как правильно установить роутер. Не размещайте его в дальнем углу, который к тому же заставлен мебелью. Убедитесь, что ваш маршрутизатор находится на доступной и по возможности свободной территории. Только так он обеспечит хороший прием. Если роутер отделен от принимающих устройств стенами или потолками, это может отрицательно повлиять на скорость передачи сигнала.

Убедитесь, что все беспроводные устройства имеют достаточно быструю скорость обмена данными (особенно в больших семьях, где к интернету подключено сразу несколько активных пользователей). Оптимальная скорость — от 300 Мбит/с и выше. Если она будет меньше, вы не сможете, например, смотреть HD-видео без прерываний.

Проверить скорость Wi-Fi-соединения в Windows очень легко: нажмите на иконку Wi-Fi в правом нижнем углу панели задач. В открывшемся окне выберите свое соединение и откройте раздел «Статус». Здесь вы увидите скорость передачи данных.

Оптимизируйте HTML-код и CSS-, JS-файлы

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

Как минимизировать код для ускорения загрузки сайта

  • Удалить лишние символы, элементы разметки и теги исходного кода. Автоматизировать процесс поможет добавление небольшой вставки в начало и конец HTML-кода сайта.
    <?php
    function sanitize_output($buffer) {
    $search = array('/\>+/s',     // удаляет пробельные символы после тэгов, кроме пробелов
    '/+\</s',     // удаляет пробельные символы до тэгов, кроме пробелов
    '/(\s)+/s',         // укорачивает последовательности из множества пробельных символов
    '/<!--(.|\s)*?-->/' // удаляет HTML-комментарии
    );
    $replace = array('>','<','\\1','');
    $buffer = preg_replace($search, $replace, $buffer);
    return $buffer;
    }
    ob_start("sanitize_output");
    ?>

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

  • Сгруппировать однотипные CSS-файлы и JS-файлы. Объединить элементы помогут бесплатные PHP-приложения, вроде JCH Optimize, Cloudflare или Minify, которые копируются в отдельную директорию и пропускают через себя все файлы сайта.

Как работают сервисы для проверки скорости интернета

Практически все приложения измеряют несколько параметров. Таких как:

Скорость

Для начала стоит разобраться, что такое скорость интернета. По сути – это время, за которое передаются данные с компьютера абонента и, наоборот, загрузка из Сети:

Указывается в Мб/сек (мегабиты в секунду) или МБ /сек (мегабайты в секунду). В идеале показатели должны быть в диапазоне от 15 до 45. При такой скорости соединения можно спокойно просматривать фильмы в формате HD, без проблем загружать «тяжелые» файлы и играть в онлайн-игры, не говоря уже о загрузке страниц браузера.

Ping

Это время ответа сервера на запрос пользователя, которое измеряется в миллисекундах. Чем показатель ниже, тем, соответственно, быстрей загружаются страницы. Например:

  • Ping ниже или чуть больше 40 мс – хороший показатель, можно без проблем играть в онлайн-игры, в которых от игрока требуется быстрота реакции
  • Ping в диапазоне от 40 до 100 мс – позволяет спокойно смотреть фильмы, загружать страницы сайтов, для игр-стратегий.
  • Ping больше 100 мс – плохой показатель. Видео смотреть можно, но только при высокой скорости интернета. Но даже в таком случае возможны «подвисания». Сайты загружаются без проблем, а вот нормально поиграть в игры не получится.

Что такое джиттер

В буквальном переводе – «дрожание». Если применять к WiFi – то это «прыгающая» величина пинга. Осложняет работу IP-телефонии – появляются посторонние шумы, булькающие звуки. Причина – большая загруженность частного канала или неправильная конфигурация сети.

В идеале, при стабильном интернет – соединении показатель джиттера должны быть приближены к нулю. В противном случае гарантировано «зависание» и долгий отклик в онлайн-играх (особенно если требуется быстрая реакция). Даже не очень высокое значение джиттера критично для передачи голосовых, видео-трансляций в реальном времени. Изображение может «распадаться» на пиксели, дергаться.

Как пользоваться сервисами

Как правило, подобные программы довольно просты в использовании. Все, что нужно нажать кнопку «запустить» или «проверить» (в зависимости от интерфейса). Самое главное – не стоит доверять одной проверке. Для получения актуальных данных стоит запустить приложение минимум 3 раза, а после несложных математических действий вывести среднее значение. Которое и будет отображать максимально приближенное к реальности всех значимых показателей.

Следите за производительностью сайта

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

  • уже упомянутый выше Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?hl=ru
    Этот инструмент от Google замеряет скорость загрузки вашего веб-ресурса (от 0 до 100 баллов; чем выше балл, тем лучше). Сервис даст вам рекомендации по улучшению производительности, а также покажет, какие пункты оптимизации вы выполнили. Имейте в виду, что так как в Page Speed Insights вносятся правки и корректировки, то количество баллов, которые получил ваш сайт, также может меняться.
  • Pingdom Website Speed Test: http://tools.pingdom.com/fpt/
    Хороший англоязычный сервис для проверки скорости загрузки вашего ресурса. Будет особенно полезен тем, кто администрирует международные ресурсы, так как позволяет выбрать место, из которого будет производиться тестирование: США, Австралия или Швеция (результат будет отличаться). Выводит множество разных данных и дает рекомендации.
  • Loadimpact: https://loadimpact.com/
    Этот сервис позволяет сгенерировать несколько запросов на ваш сайт, путем чего можно выяснить, во-первых, среднюю скорость загрузки вашего сайта, во-вторых, понять, как ваш сайт поведет себя при определенном количестве запросов (выдержит ли он нагрузку).
  • LoadStorm: http://loadstorm.com/
    При помощи этого сервиса вы можете запустить достаточно серьезное тестирование своего сайта. Бесплатная версия сервиса позволит вам протестировать свой ресурс при помощи 10 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.

От каких факторов зависит скорость загрузки сайта

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

  • Сервер может быть медленным по причине нехватки ядер в процессоре или же оперативной памяти – все, как и у обычного ПК;
  • CSM сайта (движок) медленный, так как написан без учета быстродействия неопытным программистом;
  • Сервер расположен на большом расстоянии от пользователя (пример: сервер расположен в Москве, пользователь заходит из Владивостока).
  • Страницы содержат слишком много файлов (стилей, шрифтов, изображений, стилей) – все это необходимо загрузить браузеру для отображения страницы;
  • Очень много тяжелых файлов

4 Измените настройки роутера для лучшего сигнала

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

Современные роутеры, как правило, работают в двух диапазонах и могут одновременно принимать сигнал как в частоте 2,4 ГГц, так и 5 ГГц. На диапазоне 5 ГГц вы получите лучшую скорость передачи данных, но на частоте 2,4 ГГц уровень сигнала выше. Чтобы целенаправленно использовать одну из этих двух сетей, дайте им разные имена. В стандартных настройках роутеров назначать имена можно в разделе WLAN — «Сеть».

Что такое хорошее время загрузки страницы?

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

Если опираться на Google, лучшая практика — 3 секунды. К сожалению, большинство сайтов далеки от этого идеала.

При анализе 900 000 целевых страниц мобильных объявлений, охватывающих 126 стран, Google обнаружил, что 70% проанализированных страниц заняли почти 7 секунд для отображения визуального контента первого экрана.

Среднее время полной загрузки мобильной целевой страницы составляет 22 секунды, но при этом 53% посещений отменяются, если загрузка мобильного сайта занимает больше трех секунд.

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

Кэширующие плагины для WordPress

Если ваш сайт работает на WordPress, то этот раздел статьи будет для вас наиболее полезен.

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

Самым популярным кэширующим плагином для WordPress является W3 Total Cache, однако он довольно сложный в использовании. W3 Total Cache (W3TC) улучшает SEO и удобство использования вашего сайта за счет повышения производительности веб-ресурса.

Плагин W3 Total Cache

Ещё один плагин, WP Fastest Cache, работать с которым намного проще. У этого плагина более дружественный к пользователю интерфейс и его легче настроить.

Плагин для кэширования WordPress

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Знай и умей
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: