Как увеличить скорость загрузки сайта: 10 советов о том, как увеличить скорость загрузки страницы | by Nikita | WebbDEV

Содержание

10 советов о том, как увеличить скорость загрузки страницы | by Nikita | WebbDEV

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

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

Итак, поехали:

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

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

На самом деле есть несколько способ.

  • Использование CSS-спрайтов. CSS-спрайт — это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются используя свойства: background-image и background-position.
  • Использование Inline-картинок. Inline-картинки используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.
  • Объединение нескольких файлов в один. Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер. О том, как это делать на лету я писал в своей заметке здесь «Разгони свой сайт. Статическое сжатие css- и js- файлов на лету»

2. Помещайте CSS файлы в начале страницы

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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

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

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

4. Минимизируйте css и javascript

Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода

5. Используйте поддомены для параллельного скачивания

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера — разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

6. Используйте кэш браузера

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

Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.

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

<IfModule mod_expires.c>Header append Cache-Control "public"FileETag MTime SizeExpiresActive OnExpiresDefault "access plus 0 minutes"ExpiresByType image/ico "access plus 1 years"ExpiresByType text/css "access plus 1 years"ExpiresByType text/javascript "access plus 1 years"ExpiresByType image/gif "access plus 1 years"ExpiresByType image/jpg "access plus 1 years"ExpiresByType image/jpeg "access plus 1 years"ExpiresByType image/bmp "access plus 1 years"ExpiresByType image/png "access plus 1 years"</IfModule>

Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки.

Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Сервер, который непосредственно будет отдавать контент пользователю, выбирается на основании некоторых показателей. Например, выбирается сервер с наименьшим числом промежуточных хопов до него либо с наименьшим временем отклика. Кроме того браузер кэширует javascript-файлы, и если Вы посещали сайты на котором используется такой метод, то эта библиотека уже есть в кэше Вашего браузера, и он не будет загружать её снова.

Одним из таких CDN — является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

О том как загружать jQuery с репозитория Google я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».

8. Оптимизируйте ваши изображения

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

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

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

Вот несколько онлайн сервисов для оптимизации изображений:

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру.

Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3–4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

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

Content-Encoding: gzip

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

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле . Mozilla/4.0[678] no-gzipBrowserMatch bMSIE !no-gzip !gzip-only-text/html<ifmodule mod_gzip.c>mod_gzip_on Yesmod_gzip_item_include file \.js$mod_gzip_item_include file \.css$ </ifmodule> </IfModule>

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

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

Скорость загрузки сайта – как ее проверить и увеличить

Даже сейчас, когда скорость интернета у большинства провайдеров превышает 100 Мбит/сек, а мобильные операторы развивают 5G, вопрос о скорости загрузки сайта остается актуальным. Этот параметр существенно влияет на конверсию, показатель отказов, посещаемость и другие важные для бизнеса KPI. Потому что при прочих равных условиях человек выберет тот сайт, который быстрее загружается и не заставляет его ждать. Об этом нам говорят логика, личный пользовательский опыт и многочисленные исследования на тему, которые можно найти в сети. Вот, например, исчерпывающая подборка кейсов с цифрами, как компании экспериментировали со скоростью загрузки.

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

В  статье мы расскажем:

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

  1. Клиенты уходят к конкурентам — им проще вернуться в поисковик и выбрать следующий сайт.
  2. Задержка загрузки на 0,1 секунду уменьшает конверсию на 7% (согласно исследованию Akamai).
  3. Снижается вероятность, что пользователи вернутся на сайт. Google говорит, что из-за негативного пользовательского опыта вероятность повторной покупки снижается на 60%. Правда, речь про мобильные версии.
  4. Скорость загрузки влияет на ранжирование сайта в поисковиках. Если сайт долго грузится, робот поисковой системы может не успеть его полностью проиндексировать.

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

Как проверить скорость своего сайта

Есть много онлайн-сервисов, которые позволяют проверить быстроту загрузки страниц — достаточно ввести нужный URL. Рассмотрим три самых интересных, на наш взгляд. Для примера будем использовать сайт https://shop.googlemerchandisestore.com/.

1. PageSpeed Insights

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

Если страница показывает не самые лучшие результаты (как в нашем примере), сервис дает конкретные советы, как ее оптимизировать.

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

Кстати, рекомендации PageSpeed Insights можно увидеть в отчете Google Analytics «Ускорение загрузки», если кликнуть на ссылку в соответствующем столбце:

Вообще, группа отчетов «Скорость загрузки сайта» (Site Speed reports) в GA — полезная штука. Если раньше вы не уделяли должного внимания этим отчетам, рекомендуем периодически их просматривать, чтобы отслеживать показатели в динамике и вовремя реагировать на проблемы.

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

Допустим, ваша целевая аудитория находится в Германии. Если вы посмотрите на отчет выше, то увидите, что одна из важных страниц вашего сайта в этой стране грузится очень медленно (19,24 сек.), при этом у нее 140 просмотров. Чтобы ускорить загрузку, нужно оптимизировать страницу. Если же в этом регионе или у этого провайдера скорость интернет-соединения слишком мала для вашего сайта, можно создать альтернативные страницы, адаптированные для низкой пропускной способности.

2. Pingdom Tools

Это один из самых информативных и популярных сервисов для проверки скорости. У него есть бесплатная и платная десктоп-версии, а также мобильное приложение с 14-дневным trial.

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

Кроме того, в бесплатной версии Pingdom Tools вы можете:

  • Отслеживать историю производительности сайта после изменений. Находить ошибки 404 и 500, чтобы вовремя их устранять.
  • Просматривать размер содержимого страницы по типу контента и домену, а также количество запросов браузера.
  • Тестировать загрузки сайта с разным местонахождением.
  • Делиться результатами анализа с коллегами.

3. GTmetrix

По функционалу этот сервис очень похож на Pingdom Tools, разве что предоставляет информацию в более удобном и организованном виде. Бесплатная версия показывает браузер и локацию сервера, используемого для тестирования, производительность страницы (PageSpeed и YSlow), время загрузки, количество запросов и общий размер страницы. Учитывая, что сервис сохраняет историю проверок, этих метрик будет достаточно, чтобы анализировать скорость загрузки вашего сайта в динамике.

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

После проверки сайта вы можете прикинуть, сколько заработаете, если ускорите загрузку. Например, с помощью калькулятора от Google или Sharpe Digital.

Как ускорить загрузку страниц

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

1. Страницы большого размера

Чтобы сократить объем данных, передаваемых в браузер пользователя, используйте сжатие GZIP. Это позволит уменьшить размер веб-файлов на 70% без ухудшения их качества. Проверить, доступен ли этот метод сжатия для вашего сайта, можно с помощью сервиса GiftOfSpeed или GTmetrix.

2. «Тяжелые» изображения

Изображения большого размера и разрешения значительно тормозят загрузку страницы. Чтобы этого избежать, используйте JPEG картинки вместо PNG — они весят в 5 раз меньше, не уступая при этом в качестве. Уменьшить размер изображения вы можете с помощью любого онлайн-оптимизатора: Optimizilla, Compressor, Imagify, TinyPNG и т. д. Или, например, можно прогнать картинку через Photoshop и сохранить ее в специальном формате, предназначенном для веб-сайтов. Главное — не переусердствовать и найти золотую середину между качеством и размером файла.

3. Много запросов от браузера

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

  • Удалить лишние изображения, JS-файлы, коды сторонних сервисов.
  • Объединить несколько небольших элементов (иконки, кнопки) в один CSS-спрайт с помощью CSS Sprites generator, CssSpritegen, Spritebox или любого другого генератора.
  • Использовать кэширование. Каждый раз, когда человек заходит на сайт, его браузер загружает все веб-файлы с сервера. Если включить кэширование, браузер сохранит данные на компьютер пользователя и при повторных визитах будет загружать их уже оттуда. Вы можете подобрать себе кэш-плагин для ускорения работы сайта в зависимости от того, какая у вас CMS. Например, для WordPress подойдут WP Super Cache, W3 Total Cache, Hyper Cache.

4. Перегруженный код JavaScript и CSS

Если код JavaScript и CSS слишком длинный, содержит много лишних элементов (пробелы, комментарии и т.п.), то страница может загружаться с задержками. Чтобы оптимизировать код, вы можете:

  • Сократить название функций и почистить код с помощью специальных сервисов, например: JavaScript/CSS/HTML Compressor, CSS Compressor, JSCompress.
  • Разместите CSS-файлы в самом начале страницы — так она будет отображаться постепенно, по компонентам.
  • Вынесите JS-файлы в конец страницы. Благодаря этому браузер будет сначала загружать контент страницы, а и уже потом скрипты.

5. Большое расстояние между сервером и пользователем

Чем дальше от компьютера находится сервер вашего хостинг-провайдера, тем медленнее загружается сайт. «Сократить» это расстояние помогут сети доставки контента CDN: Amazon CloudFront, Incapsula, Akamai и другие. Когда человек заходит на сайт, CDN загружает веб-файлы со своего сервера, находящегося ближе всего к пользователю. Эта схема прекрасно иллюстрирует принцип работы CDN-сетей:

6. Медленный хостинг

Если вы попробовали все описанные выше советы, а скорость сайта оставляет желать лучшего, проверьте время ответа сервера. Например, это можно сделать в отчете Google Analytics «Скорость загрузки сайта» → «Обзор»:

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

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

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

Если вы собираете данные в Google BigQuery с помощью OWOX BI Pipeline и хотите отслеживать основные технические показатели сайта, заполните форму — и мы пришлем вам шаблон дашборда, который можно скопировать, а также гайд, как его настроить.

Получить шаблон дашборда

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

  1. Количество пользователей.
  2. Количество сеансов.
  3. Количество просмотров страниц.
  4. Ошибки JavaScript.
  5. Ошибки 404.
  6. Среднее время загрузки страниц.
  7. Среднее время соединения с сервером.

На втором листе можно узнать подробную информацию по ошибкам JavaScript:

  • Общее количество ошибок за выбранный период.
  • Количество ошибок на страницу.
  • Количество сессий с ошибками.
  • Сколько процентов пользователей столкнулись с ошибками.
  • На каких страницах и типах страниц происходят ошибки (для отслеживания типов страниц, необходимо внедрить pageType на сайте, а также создать пользовательскую переменную уровня хита hits.page.pageType).
  • В каком браузере и его версиях происходят ошибки.

На третьей странице представлена подробная информация об ошибках 404:

  • Общее количество ошибок.
  • Количество ошибок на страницу.
  • Количество сессий с ошибками.
  • Количество пользователей, у которых возникли ошибки.
  • А также рефералы, после которых возникли ошибки.

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

На четвертой странице информация по десктопу:

На пятой странице данные по планшетам и мобильным устройствам:

Теперь вы знаете, как заставить свой сайт «летать» 🙂 Если у вас остались вопросы или вы знаете другие способы уменьшить время загрузки страниц, пишите их в комментариях.

Использованные инструменты

9 Способов Как Увеличить Скорость Загрузки Сайта на WordPress

WordPress

access_time

30 ноября, 2018

hourglass_empty

5мин. чтения

Введение

Исследования показывают, что люди не очень терпеливы когда дело доходит до Интернета. Около 23% людей не дожидаются загрузки страницы, если она занимает более 4 секунд. Это может показаться весьма суровой статистикой, однако, достигнуть данного результата не настолько сложно. Если вы сможете уменьшить время загрузки сайта до 2.9 секунд, то этого будет достаточно, чтобы скорость загрузки сайта была быстрее чем у половины существующих. Это означает, что даже незначительные улучшения сайта могут привести к ощутимым преимуществам для вашего бизнеса. Так как на WordPress работает около четверти сайтов, не удивительным становится желание пользователей увеличить скорость загрузки сайта именно на WordPress.

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

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • Доступ к панели управления WordPress

Шаг 1 – Проверка скорости WordPress

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

Шаг 2 – Удаление ненужных плагинов и тем

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

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

Шаг 3 – Минификация CSS, HTML и JavaScript

Минификация — один из самых полезных процессов для увеличения скорости работы сайта. Он заключается в уменьшении размеров файлов и скриптов (HTML, CSS, JS), путем удаления ненужных символов, вроде пробелов и комментариев из этих файлов.

Плагины которые могут помочь вам в процессе минифкации: Autoptimize и W3 Total Cache. Для более детального разбора процесса минификации, обратитесь к данному руководству.

Шаг 4 – Включение Gzip сжатия

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

Для проверки того, включено ли Gzip сжатие используйте checkgzipcompression. com. Если нет, то отредактируйте файл .htaccess, добавив в него следующий код:

<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml 
 AddOutputFilterByType DEFLATE application/x-font 
 AddOutputFilterByType DEFLATE application/x-font-truetype 
 AddOutputFilterByType DEFLATE application/x-font-ttf 
 AddOutputFilterByType DEFLATE application/x-font-otf 
 AddOutputFilterByType DEFLATE application/x-font-opentype 
 AddOutputFilterByType DEFLATE application/vnd. Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

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

Шаг 5 – Оптимизация изображений

Вы можете подумать, что ввиду их статичности, изображения не оказывают особого влияния на скорость загрузки сайта. Но все совсем наоборот — изображения высокого качества оказывают огромное влияние на практически все ресурсы вашего сайта. Однако это совсем не означает, что вы должны отказаться от четких изображений в пользу маленьких и размытых эскизов. Существует множество способов для оптимизации изображений вашего сайта. К примеру, плагин WordPress — Smush Image Compression and Optimization предоставляет удобный способ для достижения более высокой производительности без потери качества изображений. Для более подробной информации по данной теме посмотрите отдельное руководство.

Шаг 6 – Разделение длинного контента на страницы

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

Разбиение на страницы часто используется для раздела с комментариями, потому что загрузка тысяч комментариев на одной странице оказывает серьезное влияние на ресурсы сервера. В WordPress вы легко можете включить разделение на страницы — просто пройдите в раздел Настройки, далее Обсуждение. Здесь вы можете указать максимальное количество комментариев для страницы. Рекомендуется указать среднее значение. Малое количество комментариев на странице также может вызвать негативных эффект, так как пользователь может не захотеть постоянно переходить на следующую страницу для их просмотра.

В дополнение к разделу комментариев, разделение на страницы может помочь вам разделить статью. Это может быть весьма полезно для больших статей, так как пользователи не всегда любят большое количество текста. Разделение на страницы может быть реализовано добавлением кода <!–nextpage–> в текстовую версию вашей статьи. WordPress автоматически обнаружит код и сделает разбивку на страницы.

Шаг 7 – Как увеличить скорость загрузки сайта с помощью изменения версии PHP

Это один из наименее известных советов. Однако он также является и одним из самых эффективных, чтобы увеличить скорость загрузки сайта. Переход с версии PHP 5 на PHP 7 может казаться довольно сложным, но преимущества говорят сами за себя. Производительность WordPress увеличивается в 2 раза при использовании PHP 7 в сравнении с PHP 5; первый может обработать на 112% больше запросов/секунду чем последний. Более того, WordPress получает неплохую прибавку в производительности благодаря оптимизации памяти PHP 7. Именно поэтому PHP 7 установлен в качестве стандартной версии PHP на всех тарифных планах нашего виртуального хостинга, который дает 5x скорость работы сайта на WordPress.

Однако одна важная вещь, которую следует иметь в виду — отсутствие обратной совместимости у PHP 7. Это означает, что вы не сможете использовать определенные плагины и темы, включая те, которые отлично работают на PHP 5. Чтобы проверить, какие плагины и темы на вашем WordPress не поддерживаются PHP 7, используйте PHP Compatibility Checker.

Шаг 8 – Использование плагинов для кэширования

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

Для WordPress доступно огромное количество плагинов, которые предлагают различные типы кеширования, WP-Rocket и W3 Total Cache.

Шаг 9 — Использование Сети Доставки Содержимого (CDN)

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

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

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

Заключение

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

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

7 советов по оптимизации для начинающих / Блог компании King Servers / Хабр

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

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

Введение: как загружаются сайты


В материале под названием «Что происходит, когда пользователь вбивает адрес сайта Google.com» очень подробно описаны все процессы, связанные с посещением сайта. Если говорить кратко, то между тем, как посетитель сайта вобьет в адресную строку его URL и получит ответ, в общем виде проходит несколько этапов:
  1. Сначала браузер осуществит DNS-запрос по имени сайта.
  2. Далее инициируется TCP-подключение к серверу, на котором этот сайт расположен.
  3. Следом устанавливается соединения http или https.
  4. Потом запрашивается нужная страницы и загружается ее HTML-код.
  5. Стартует парсинг HTML.
  6. После этого браузер начинает подгружать внешние ресурсы, связанные со страницей (стили, изображения, скрипты и так далее).
  7. В итоге рендерится финальная версия страницы со всем контентом.
  8. Затем исполняется JS-код — скрипты могут потребовать обработки дополнительных сетевых запросов, изменять страницу или её шаблон, так что возможен и новый круг рендеринга.

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

Первый шаг: понять, что тормозит


Бывший инженер Facebook и основатель стартапа Pave Джастин Митчел в треде на Quora так описывал начало работы по оптимизации загрузки сайта:
Прежде чем начинать чинить, надо узнать, что сломалось. Если ваш сервер генерирует страницу 5 секунд, то использование CDN не поможет, если у вас на каждый просмотр страницы загружается по 10 мегабайт картинок, добавлять memcache в бэкенд-архитектуру тоже бессмысленно.

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

Существует несколько важных метрик быстродействия сайта. Одна из них — это время до первого байта (TTFB — time to first byte), которая показывает, как быстро браузер начинает получать данные от сервера после отправки запроса. Также важно замерять начало рендеринга страницы и время загрузки (load time).

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

Вот какие шаги по серверной оптимизации для ускорения загрузки сайта применяют чаще всего.

Расширение ресурсов сервера


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

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

Кэширование


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

Изображение: CrazyEgg

Некоторые элементы можно закешировать и не загружать каждый раз при заходе на сайт. Это позволяет серьезно сократить время загрузки:

Изображение: CrazyEgg

При всех плюсах — это не единственный стоящий метод оптимизации. Во-первых, закешировать можно не все, во-вторых, думать нужно и том, как в будущем сбрасывать кэш, в третьих, этот метод помогает ускорить сайт для тех пользователей, которые на нем уже были, и ничем не помогает новым посетителям. (path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp
К сожалению, на данный момент формат WebP поддерживается далеко не всеми браузерами — пока среди них только Chrome и Opera.

CDN


Еще один «инфраструктурный» метод снижения задержек — использование сетей доставки контента (content delivery network, CDN). Такие сети состоят из серверов в разных точках мира. При подключении сайта к сети на входящих в нее серверах создают копии файлов веб-ресурса, а затем пользователю отдают данные с ближайшего к нему сервера — в итоге скорость загрузки увеличивается.

Использование Gzip


Gzip — простой метод компрессии файлов сайта для экономии ресурсов канала и ускорения загрузки. С помощью Gzip файлы сжимаются в архив, который браузер может загрузить быстрее, а уже затем распаковать и отобразить контент. text/.*$ mod_gzip_item_include file .html$ mod_gzip_item_include file .php$ mod_gzip_item_include file .js$ mod_gzip_item_include file .css$ mod_gzip_item_include file .txt$ mod_gzip_item_include file .xml$ mod_gzip_item_include file .json$

Оптимизация кода сайта


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

Также стоит избегать инлайн-CSS и JS-кода. В таком случае браузеры будут кэшировать эти внешние ресурсы, что позволит сэкономить время загрузки. Также JS и CSS следует минифицировать – сделать это можно с помощью инструментов вроде JSMIN, YUI Compressor и Packer.

Использование связки Nginx+Apache


Для увеличения скорости загрузки страниц можно использовать связку Apache и Nginx. Это два самых распространённых веб-сервера в мире, популярность объясняется мощью Apache и скоростью Nginx. Помимо плюсов, у каждого инструмента есть и свои недостатки: например, в Apache есть ограничения памяти сервера, в то время как Nginx, эффективный для статических файлов, нуждается в помощи php-fhm или аналогичных модулей для загрузки динамического контента.

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

Заключение: полезные ресурсы и статьи по теме оптимизации работы сайтов


Ниже мы собрали ряд полезных статей на русском и английском языке:

Как увеличить скорость загрузки сайта [Инфографика] — CMS Magazine

Скорость невероятно важна.

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

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

Содержание статьи:
  1. Как скорость загрузки влияет на ваш сайт. Факты, цифры, инфографика

    1. Среднее время загрузки для 2017 года

  2. Инфографика «Как быстродействие влияет на ваш сайт»

    1. Как точно измерить среднее время загрузки страницы

      1. GTMetrix

      2. WebPageTest

      3. Pingdom

      4. Google PageSpeed Insights

      5. Load Impact

  3. Основные факторы, которые влияют на скорость сайта

    1. Простые проблемы, легкие способы устранения

      1. Слишком большие изображения

      2. Слишком много плагинов

      3. Кеширование

      4. GZIP сжатие

      5. Используйте качественную Сеть Доставки Контента

    2. Сложные проблемы, продвинутые решения

      1. Большое количество HTTP запросов

      2. Минимизация HTML, CSS, и JavaScript

      3. Объединение отдельных HTML, CSS, и JavaScript файлов

      4. Переместите JavaScript код вниз

    3. Что такое хорошая скорость загрузки страницы?

      1. Лояльность покупателей

      2. SEO

  4. Рекомендации Google по времени загрузки с мобильных

    1. Средняя скорость загрузки сайта в 2018 году и дальше — чего ожидать?

    2. Часто задаваемые вопросы

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace. ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

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

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

Как верно подмечено в фильме «Автостопом по галактике»:

«Ничто не распространяется быстрее скорости света, за исключением плохих новостей, которые подчиняются совершенно иным законам.»

Какова же точная ценность одной онлайн секунды?

Как скорость загрузки влияет на ваш сайт. Факты, цифры, инфографика

Среднее время загрузки для 2017 года

Нижеприведенные данные взяты из исследований Google на тему средней скорости загрузки сайта на 2017 год. Статистика по текущему году еще не собрана и не проанализирована, но данные 2017 года довольно показательны:

  • время загрузки в 1-3 секунды повышает вероятность отказа на 32%

  • время загрузки в 1-5 секунд повышает вероятность отказа на 90%

  • время загрузки в 1-6 секунд повышает вероятность отказа на 106%

  • время загрузки в 1-10 секунд повышает вероятность отказа на 123%

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

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

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

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

Краткий ответ на вопрос «Сколько же должен грузиться сайт?»: до 3 секунд на всех устройствах. Но есть и развернутый вариант ответа.

Инфографика «Как быстродействие влияет на ваш сайт»

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

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

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

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

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

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

Проверка скорости сайта через Gtmetrix

GTMetrix

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

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

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

Проверка скорости сайта через Webpagetest

WebPageTest

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

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

Поверьте, WebPageTest дает очень хорошее представление по всему домену.

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

Проверка скорости сайта через Pingdom

Pingdom

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

Тем не менее по сравнению с GTMetrix и WebPageTest.org, бесплатный сервис Pingdom дает значительно меньше информации.

Он позволяет получить определенные данные, но не особо полезен для глубокого анализа.

Проверка скорости сайта через Google page speed site

Google PageSpeed Insights

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

Подобно GTMetrix и WebPageTest. org, Google PageSpeed Insights предоставляет хорошие результаты с советами, как и что исправить.

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

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

Само собой, чем быстрее грузится сайт, тем лучше.

Проверка скорости сайта через LoadImpact

Load Impact

Load Impact — основательный инструмент, который, если в нем хорошо разобраться, станет настоящим откровением о внутреннем функционировании сложных сайтов.

На освоение его обширной документации требуется время, но при наличии трафика Load Impact — прекрасное средство для выявления работающих и неработающих тактик.

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

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

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

Основные факторы, которые влияют на скорость сайта

Проверив сайт при помощи GTMetrix и WebPageTest, вы скорее всего выявите несколько схожих проблем. На скорость сайта влияет множество факторов, но некоторые приемы оптимизации работают по всем направлениям.

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

Простые проблемы, легкие способы устранения

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

Слишком большие изображения

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

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

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

Если сайт сделан на WordPress или Joomla, используйте плагины, чтобы оптимизировать все изображения сразу.

Это самый простой вариант.

Если сайт самописный, лучше использовать Adobe Photoshop, Gimp, ImageOptim или другой подходящий визуальный редактор с функцией «оптимизировать для веб», «сохранить для веб» или аналогичной им.

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

Слишком много плагинов

Одно из главных преимуществ систем управления контентом, таких как WordPress и Joomla — их невероятная функциональность. А так как к этому добавляется простота использования, неудивительно, что новичок вебмастер может потерять чувство меры, сам того не осознавая.

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

Могущество ослепляет.

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

Все это может значительно увеличить время загрузки страницы.

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

Кеширование

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

Подключить серверное кеширование намного проще с помощью WordPress и Joomla, так как у них есть соответствующие плагины.

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

GZIP сжатие

GZIP сжатие — очень простой кусок кода, который добавляется в файл .htaccess. Его можно найти онлайн, но я рекомендую обратиться к хостеру для согласования наиболее подходящего синтаксиса. Хостер должен оказать быструю помощь по его добавлению.

GZIP сокращает общее количество данных, отсылаемых сервером конечному пользователю.

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

GZIP и оптимизация изображений — просто маст-хев.

Используйте качественную Сеть Доставки Контента

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

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

CloudFlare — наиболее популярный CDN в настоящее время, его очень просто использовать.

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

Сложные проблемы, продвинутые решения

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

Большое количество HTTP запросов

HTTP — протокол передачи гипертекста.

Каждый раз, когда вы вводите url, ваш сервер отправляет http запрос на сервер. Проще говоря, браузер запрашивает контент сайта. То, что мы видим как текст, изображения, видео, меню и кнопки, обычно содержится в html тегах, стили которых заданы с помощью CSS файла (а то и нескольких), а функционал — через JavaScript.

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

Минимизация HTML, CSS, и JavaScript

Минимизация файлов означает исключение всего ненужного.

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

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

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

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

Объединение отдельных HTML, CSS, и JavaScript файлов

Если страница использует несколько CSS файлов для своего оформления и несколько javascript файлов для функционала, их можно объединить в один или два файла.

Этот прием гораздо эффективнее для HTTP/1.1, потому что HTTP/2 справляется со множественными запросами без особой нагрузки.

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

Переместите JavaScript код вниз

Куски JavaScript кода часто потребляют ресурсы и препятствуют быстрой загрузке страницы.

Если переместить их вниз, перед закрывающим тегом </body>, браузер обработает их в последнюю очередь, после загрузки всех остальных элементов.

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

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

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

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

Быстрые страницы — это стандарт. Время загрузки в 2-3 секунды считается приемлемым, с 4-й секунды растет вероятность негативного пользовательского опыта.

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

Более того, 44% поделятся негативным опытом с друзьями онлайн.

Лояльность покупателей

60-секундная задержка при загрузке страницы снижает уровень удовлетворенности конечных пользователей на 16%. Это выливается в нежелание возвращаться на медленно работающий сайт.

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

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

SEO

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

На это есть 2 причины: пользовательское поведение и поведение поисковых роботов.

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

Такое поведение пользователей говорит о том, что сайт не предоставляет для них интереса. Алгоритм Гугла наказывает «неполезные» сайты низкими позициями в выдаче. Но даже без санкций поисковиков секундная задержка при загрузке снижает число просмотров страницы на 11%.

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

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

Наверное вы уже поняли: скорость сайта — сложная сущность, которая сказывается на всех аспектах эффективного присутствия в сети.

Изучите эту увлекательную, полную фактов графику, и узнайте:

Рекомендации Google по времени загрузки с мобильных

Помните я сказал, что 53% пользователей уйдут с сайта, которому нужно более 3 секунд для загрузки на мобильном?

Это еще не все.

Уже продолжительное время Google начинает индексацию сайта с мобильной версии. Мобильная версия вашего сайта вносит больший вклад в ранжирование, чем десктопная.

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

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

Средняя скорость загрузки сайта в 2018 году и дальше — чего ожидать?

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

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

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

Результат исследования Гугл, приведенного в начале статьи, обнаружили, что среднее время загрузки страницы 8-10 секунд, в зависимости от индустрии.

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

Это вполне достижимо.

Часто задаваемые вопросы

— Сколько должна загружаться страница?

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

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

— Существует 2 основных показателя скорости страниц: время до первого байта (TTFB) и полная загрузка страницы. Время до первого байта — время, которое требуется серверу для отправки первого байта данных. Этот показатель дает представление о скорости ответа сервера, но бесполезен для пользовательского опыта, так как первый байт не несет значимой для людей информации. В этом отношении намного полезнее время полной загрузки сайта, хотя оно может быть довольно неоднозначно. Некоторые элементы могут так и не загрузиться, тем не менее даже без них пользователи без проблем получат доступ к той информации, за которой пришли на сайт.

— Как проверить время загрузки в Google Analytics?

— Чтобы увидеть время загрузки в Google Analytics, нужно зайти в свой аккаунт аналитики, перейти к просмотру и открыть Отчеты. В них выберите «Поведение», а затем «Скорость сайта». Это кратчайший путь проверки сайта через этот мощный инструмент. Чтобы интерпретировать результат, обратитесь к Google справочнику.

— Насколько быстро загружается моя страница?

— Чтобы узнать, проведите тестирование с помощью GTMetrix и WebPageTest. Проверьте свой сайт из локации (континента), где находится большая часть ваших пользователей, это даст наилучшее представление об их взаимодействии с сайтом. Оба инструмента позволяют проверить как главную страницу, так и определенный URL. Проверка по определенному URL полезна в тестировании производительности наиболее посещаемых страниц.

— Что я могу сделать, чтоб ускорить загрузку страницы?

— Уменьшить изображения, добавить GZIP сжатие, активировать кеширование, убрать ненужные редиректы, задействовать CDN, минимизировать HTML, CSS, и JS файлы, и использовать наилучших хостинг из доступных. В случае применения системы управления контентом убедитесь, что подключен только необходимый минимум плагинов, и все они последней версии. При любой возможности обновляйтесь до последней стабильной версии PHP, потому что каждое обновление улучшает производительность. Даже использование половины этих приемов поможет колоссально уменьшить время загрузки страниц на сайте.

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

Оригинал: https://hostingtribunal.com/blog/how-speed-affects-website/

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

О чем статья?

●      Как вес контента и хостинг влияют на скорость загрузки;

●      Какими инструментами можно измерить скорость работы сайта;

●      Что нужно сделать, чтобы ее повысить.

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

От скорости зависит поведение пользователей – чем быстрее сайт загрузится, тем выше вероятность, что посетитель останется и выполнит целевое действие. То есть конверсия и другие, связанные с ней бизнес-параметры — ROI, LTV, продажи – также привязаны к быстродействию.

Оптимальное время загрузки — 2-3 сек. Идеальное — время реакции пользователя, то есть, 0,5 сек. Однако для высоконагруженных веб-приложений оптимальная скорость может отличаться. В таких случаях нужно провести проверку скорости и высчитать среднее время загрузки сайтов конкурентов и ориентироваться на него.

Что влияет на скорость 

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

  • Откройте страницу через Google Chrome, 
  • Зайдите в инструменты разработчика с помощью кнопки F12 
  • Перейдите на вкладку Networks
  • Отключите кэш (disable cache) и посмотрите значение в нижнем левом углу. 
В нашем случае это 1,0 Mb, transferred


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


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

В примере видим, что для кабельного соединения тестируемый ресурс может весить еще больше, чем сейчас. Для мобильного интернета 3G (780 кб/сек) он должен быть не более 192 kb, иначе скорость загрузки составит 4,17 сек.



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

Как проверить скорость 

Google Page Speed Insights. Один из самых популярных SEO-инструментов для анализа сайтов. Он может определить скорость загрузки десктопной и мобильной версий и дать рекомендации по ее увеличению. Он показывает, как быстро страница загружалась у реальных пользователей, а также по итогам имитации с помощью инструмента Lighthouse. Поисковик считает быстрым тот ресурс, который получил 90-100 баллов.


Page Speed Insights измеряет скорость загрузки сайта по шести параметрам.

  • Первая отрисовка контента – показывает время между началом загрузки страницы и появлением первого блока текста или изображения.

  • Индекс скорости загрузки – т.е. скорость появления контента на странице.

  • Отрисовка крупного контента – время, которое требуется на отрисовку большого блока текста или изображения.

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

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

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


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


Чтобы проверить скорость загрузки страниц на мобильных устройствах, можно воспользоваться другим инструментом от Google – Test My Site.

SpeedTest.me. Сервис, который показывает, как загружается сайт в разных регионах мира. В нашем примере скорость загрузки в России составила 2,16 сек. 


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

В примере мы рассчитали следующие показатели: 

  • Page size (размер страницы) — 909,8 Кб; 
  • Load time (время загрузки) — 2,55 сек.
  • Requests (количество запросов) — 71; 
  • Faster than (доля сайтов, которые медленнее тестируемого) — 60%; 
  • Performance grade (уровни производительности) — 69. 

Если performance grade меньше 100, ищите и устраняйте проблему. Что-то «съедает» производительность. 

Сервис указывает на проблемы и присваивает им рейтинг: 0 — худшее значение, 100 — лучшее. В примере основная проблема — отдельные JS-скрипты. Они замедляют быстродействие. 


Есть аналитика распределения ссылок и размера файлов. 


WebPageTest.  Здесь для проверки нужно выбрать локацию и браузер. В примере локация — Амстердам, браузер — Google Chrome. Сервис делает три проверки скорости. Он показывает время загрузки первого варианта страницы — то, что сразу увидит пользователь, и время полной загрузки сайта. В примере 3,544 сек и 3,692 сек соответственно.  


Процентное соотношение размеров и запросов между системами сайта:


Как увеличить скорость 

  • Уменьшите количество запросов. На запросы и ответы уходит время. Сократив их количество, мы увеличим скорость работы сайта. Для этого загружайте все файлы, которые возможно, статично без использования запросов к базе данных. Дополнительно объедините CSS и JS в отдельные файлы. В этом помогут плагины Gulp, Grunt, WebPack. 

  • Оптимизируйте CSS и JavaScript. На скорость загрузки сайта сильно влияет размер и количество CSS и JS файлов, поэтому сожмите их с помощью онлайн-инструментов CSS Minifier и CSS Compressor для CSS; и JS Minifier и JavaScript Compression Tool для JS. Поместите скрипты JS в самый конец кода перед закрывающим тегом .  

  • Оптимизируйте изображения. Фотографии обычно занимают основную долю в размере файла. Сожмите их в формате png, jpg, svg с помощью инструментов Kraken.io и TinyPNG. С помощью сервисов iconizr для svg и css.spritegen.com для png, gif, jpeg объедините все иконки в спрайт. Не размещайте на сайте фотографии большего размера, чем необходимо.    

  • Используйте технологии для мгновенной загрузки контента. В Яндексе — это Турбо-страницы, в Google — Accelerated Mobile Pages. Технологии позволяют создать легкие версии страниц, которые весят в десять раз меньше. Это помогает быстро загружать страницы, в том числе и на мобильных устройствах.

Шпаргалка 

  • Рассчитайте скорость загрузки — это важный фактор ранжирования. Рекомендуемое время загрузки — 2 сек. Для высоконагруженных приложений рассчитайте время загрузки самостоятельно — взяв среднюю скорость загрузки сайтов конкурентов. На скорость влияют вес сайта и хостинг. 

  • Оценивайте вес сайта с помощью инструментов вебмастера Google Chrome. Желательный вес сайта узнайте через инструмент Performancebudget.io. В нем рассчитывается максимальный размер файлов сайта, который подходит для желаемого времени загрузки под каждый тип интернет-соединения. 

  • Выберите хостинг под технические особенности ресурса. Откажитесь от размещения на виртуальном хостинге. 

  • Проверьте скорости загрузки. Проверка производится с помощью специальных сервисов: SpeedTest.me, ToolsPingdom.com, WebPageTest. Они подсчитают, за сколько времени загрузился сайт, количество запросов, размеры, уровни производительности, распределение ресурсов по весу и запросам.  

  • Улучшайте скорость. Сократите количество запросов, по которым обращаются к серверу. Для этого объедините CSS в один файл и скрипты JS тоже в отдельный файл. Оптимизируйте их через инструменты CSS Minifier, CSS Compressor для CSS, и JS Minifier и JavaScript Compression Tool для JavaScript. Размещайте js скрипты перед закрывающим тегом . 

  • Оптимизируйте изображения. Делайте из иконок спрайты, сжимайте и оптимизируйте фотографии с помощью Kraken.io и TinyPNG. Используйте фотографии только требуемого размера. 

  • Настройте Турбо-страницы от Яндекс и AMP от Google для загрузки легкой версии страниц.

Материал подготовила Светлана&amp;nbsp;Сирвида-Льорентэ.

Как ускорить загрузку сайта — Основные способы и практики

04. 02.2020 2 090 Просмотров Скорость загрузки сайта определяет его успешность с точки зрения пользовательского опыта, seo-оптимизации, конверсии и ранжирования в поисковых системах.

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

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

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

Как проверить скорость загрузки сайта

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

Стандартное время загрузки сайта на компьютере составляет 2-3 секунды, оптимальное — меньше 2 секунд. Загрузка страниц за 5 секунд считается терпимой, но нежелательной для поисковиков, которые понижают проект в рейтинге. Показатель загрузки сайта в 6 секунд и больше говорит о том, что с сайтом что-то не так и пора принимать меры. Пользователи мобильных версии готовы ждать 6-10 секунд загрузки сайта, однако в следующий раз могут и не обратиться к нему.

По словам Google, на мобильном телефоне загрузка веб-страницы занимает не более 9 секунд, время загрузки на персональном компьютере может составлять около 6 секунд по всему миру, а в среднем — около 3,5 секунд. Google — это лидер по скорости выдачи запросов менее чем за секунду.

Представители Яндекса заявили, что почти 40% пользователей уходят со страницы, если время загрузки составляет более 10 секунд. Кроме того, 74% пользователей уходят с сайта, если время загрузки на мобильном устройстве превышает 5 секунд.

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

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

Google PageSpeed Insights — бесплатный онлайн сервис для определения производительности сайта и выбора эффективных путей его оптимизации. Его удобно использовать как на компьютере, так и на мобильном устройстве. Он не показывает скорость загрузки страницы, а анализирует эффективность динамики загрузки страниц и элементов сайта с учетом JavaScript, CSS, структура HTML, конфигурация сервера, размер изображений и т. д.

WebPageTest — бесплатный онлайн сервис для мониторинга производительности и скорости загрузки сайта. На основе оценки всех типов данных (HTML, JavaScript, CSS, текстов, графики) выдает время загрузки страниц, время отклика сервера, показатель рендеринга, индекс скорости, количество запросов и другие показатели, влияющие на производительность и скорость загрузки сайта.
GTmetrix — бесплатный ресурс для оценки работы сайта и скорости загрузки страниц. Он не только оценивает скорость загрузки всех элементов сайта, общий размер страниц, количество запросов, но и предлагает рекомендации по улучшению производительности продукта. Для мобильной версии сайта можно использовать Google Lighthouse — автоматизированный инструмент для улучшения качества работы веб-приложений. Он интегрирован непосредственно в панель Chrome DevTools Audits. Сервис можно также запустить из командной строки или установить как расширение Chrome. Он проводит аудит производительности и доступности веб-приложений.

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

Основные метрики для оценки скорости загрузки сайтов

Для анализа производительности сайта используются следующие метрики:

  1. 1.

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

  2. 2.

    Первая отрисовка контента (FCP) — время, которое затрачивается на загрузку первого контента на сайте (поисковая строка, фрагмент, блок текста или изображение). FCP позволяет выявить проблемы при загрузке сайта на уровне соединения с сервером. Длительная загрузка контента свидетельствует о том, что загружаемые ресурсы очень тяжелые и их передача требует времени.
    Показатели:
    высокая скорость — менее 1 с;
    средняя скорость — от 1 до 2,5 с;
    низкая скорость — более 2,5 с.

  3. 3.

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

  4. 4.

    Время загрузки контента страницы для взаимодействия (TTI) — метрика, которая показывает, сколько времени требуется странице, чтобы стать интерактивной. Интерактивной страница становится тогда, когда на ней отображается большая часть контента, она реагирует на действия пользователей в течение 50 мс.

  5. 5.

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

  6. 6.

    Первая задержка ввода (FID) — период времени от первого взаимодействия пользователя с сайтом (нажатие на ссылку, кнопку и т.д.) до реакции браузера на это взаимодействие.
    Показатели:
    высокая скорость — менее 50 мс;
    средняя скорость — от 50 до 250 мс;
    низкая скорость — более 250 мс.

  7. 7.

    Индекс скорости (SI) показывает, насколько быстро страница наполняется контентом. Чем меньше значение индекса, тем лучше для сайта.

  8. 8.

    Визуально готово (VR) — метрика, которая показывает время, когда страница на 100 % загружена и готова к использованию.

Основные способы ускорения загрузки сайтов


1. Оптимизация хостинга

Высокий приоритет

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



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

2.

Уменьшение количества http-запросов Высокий приоритет

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


Загрузка элементов страницы: скриптов, фотографий, файлов CSS, flash требует много ресурсов хостинга. HTTP-запросы ко всем элементам сразу тормозят работу сайта, поскольку браузеры должны загружать не более 2-х компонентов веб-страницы с одного хостинга. Уменьшив количество загружаемых элементов можно снизить количество http-запросов к серверу и в результате увеличить скорость загрузки страницы.

Уменьшить количество http-запросов можно следующим образом:

  • комбинацией нескольких изображений в один CSS-спрайт, который в нужный момент выдает картинку со свойствами background-image и background-position;
  • использованием Inline или встроенных изображений в таблице стилей страницы с помощью URL-схемы data;
  • объединением нескольких css- или js-файлов в один;
  • минимизацией использования плагинов и скриптов.

3. Расположение CSS и JavaScript в нужном порядке

Высокий приоритет

На что влияет: время загрузки достаточной части контента, индекс скорости загрузки страниц.)



Для оптимизации и быстрой загрузки сайта CSS-файлы помещают вверху кода страницы, а JavaScript внизу, чтобы сначала загружался статичный контент (логотип, навигация, заголовки), а затем динамичный, например, графика и анимация. Чтобы уменьшить размер файла и, соответственно, ускорить загрузку страниц, стоит почистить код от лишних комментариев, пробелов, переносов строк и символов. Для этого можно использовать такие инструменты, как JSCompress или Refresh-SF, а также Google PageSpeed Insights, который после анализа страницы позволяет сократить html код — нужно нажать «Сократить html», а затем «Посмотреть содержание».

4.

Применение функции flush Средний приоритет

На что влияет: время загрузки достаточной части контента, индекс скорости загрузки страниц.)



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

5. Использование сетей доставки контента CDN

Средний приоритет

На что влияет: время загрузки достаточной части контента, индекс скорости загрузки страниц.



Размещая данные сайта (если он предназначен не для одной, а для многих стран) на серверах в разных точках мира с помощью сетей доставки контента CDN (Google Cloud CDN, Amazon CloudFront, Microsoft Azure CDN, Swarmify, Akamai, Limelight, CloudFlare, Rackspace CDN), можно ускорить загрузку элементов сайта с ближайших к пользователю серверов. CDN позиционируются как инструменты для увеличения скорости сайтов, поскольку они сокращают время передачи данных посетителем веб-ресурсов.

6. Размещение данных на серверах Nginx и Apache

Средний приоритет

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



Для увеличения скорости загрузки страниц можно разместить данные сайта одновременно на мощном сервере Apache и скоростном сервере Nginx. Nginx используется для обработки и сжатия статической информации, а Apache — для удаления лишних пробелов и атрибутов HTML-документов, объединения JS, CSS и HTML файлов в один, конвертации изображений под установленный в тегах размер.

7. Кэширование данных сайта

Высокий приоритет

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



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

Виды кэширования:

  • Браузерное или клиентское кэширование: суть кэширования состоит в том, что при повторном посещении браузеру передается заголовок 304 Not Modified, а сама страница или ее элементы загружаются из локального пользовательского кэша. Экономится трафик между браузером посетителя и хостингом сайта, поэтому страницы сайта загружаются быстрее.
  • Кэширование файлов и изображений — браузер сохраняет загружаемые пользователем файлы и изображения, получив заголовки «expired» «304 Not Modified». Если на сайте меняются данные, браузер об этом не знает, поэтому требуется регулярная передача актуальных заголовков.
  • Серверное кэширование предполагает хранение на сервере всех данных, которые передаются браузером, и их быструю передачу при запросе пользователей.
  • Кэширование на стороне клиента: сервер передает браузеру http-заголовки с информацией о коде, изображениях и файлах стилей и скриптов, которые относятся к загруженной пользователем странице. Часть информации отвечает за кэширование на стороне пользователя, в частности Cache-Control, Expires, ETag, Last-Modifed находится в группе заголовков серверов, If-Modified-Since, If-None-Match — в группе запросов браузера. Благодаря закэшированной информации данные страницы при повторном заходе пользователя браузером будут загружаться быстрее, поскольку он не будет обращаться к серверу и проверять изменения.
  • Кэширование центра сертификации: пользователи сайта не ждут, когда центр сертификации или сервер обработает запрос от браузера пользователя и подтвердит актуаьность сайта.
  • Кэширование блоков страницы позволяет уменьшить количество запросов к базе данных от авторизованных пользователей, отслеживать состояние таблиц, сеанса пользователя, отключить кэширования при http запросах, настроить постоянное кэширование.

8. Gzip-сжатие файлов

Высокий приоритет

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



Чтобы уменьшить количество запросов на сервер из браузера, тем самым ускорив загрузку сайта, применяется метод Gzip-сжатия файлов. В версии протокола HTTP/1.1 в запросе указывается метод сжатия данных с помощью заголовка Accept-Encoding: gzip, deflate. Когда сервер видит такой заголовок в запросе, он сжимает данные указанным методом и выдает их пользователю.

Чтобы активировать GZIP-сжатие файлов на сайте, необходимо в файле .htaccess прописать следующие фрагменты кода:
Также можно добавить отрывок кода в начало html кода или PHP-страницы:
или установить Gzip-плагин, например, W3 Total Cache.


9. Сжатие графики и видео

Средний приоритет

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



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

Векторные логотипы и элементы интерфейса могут быть в формате SVG. Схемы, графики, иллюстрации, иконки и не векторные логотипы подойдут в формате PNG. Фото и картинки должны быть в формате JPG, а видео и анимация — формате MPEG4.

Оптимизировать графику и перевести данные в веб-формат можно в Adobe Photoshop и Illustrator, а также воспользовавшись бесплатными онлайн сервисами для сжатия изображений TinyPNG, Kraken.io, JPEGmini, PunyPNG, Smush.it.

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


10.

Оптимизация баз данных Высокий приоритет

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



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

11. OCSP Stapling

Средний приоритет

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



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

12. Минификация

Высокий приоритет

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



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

13.

Lazy loading Высокий приоритет

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



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

Page Speed ​​- 2021 Web Best Practices

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

Что такое скорость страницы?

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

Вы можете оценить скорость своей страницы с помощью Google PageSpeed ​​Insights. PageSpeed ​​Insights Speed ​​Score включает данные из CrUX (Chrome User Experience Report) и отчеты о двух важных показателях скорости: First Contentful Paint (FCP) и DOMContentLoaded (DCL).

Лучшие методы SEO

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

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

Вот некоторые из многих способов увеличить скорость вашей страницы:

Включить сжатие

Используйте Gzip, программное приложение для сжатия файлов, чтобы уменьшить размер ваших файлов CSS, HTML и JavaScript, размер которых превышает 150 байт. .

Не используйте gzip для файлов изображений. Вместо этого сожмите их в такой программе, как Photoshop, где вы можете сохранить контроль над качеством изображения. См. «Оптимизация изображений» ниже.

Минимизируйте CSS, JavaScript и HTML

Оптимизируя код (включая удаление пробелов, запятых и других ненужных символов), вы можете значительно увеличить скорость загрузки страницы. Также удалите комментарии к коду, форматирование и неиспользуемый код. Google рекомендует использовать CSSNano и UglifyJS.

Уменьшить перенаправления

Каждый раз, когда страница перенаправляется на другую страницу, ваш посетитель сталкивается с дополнительным временем ожидания завершения цикла HTTP-запрос-ответ.Например, если ваш шаблон переадресации для мобильных устройств выглядит так: «example.com -> www.example.com -> m.example.com -> m.example.com/home», каждое из этих двух дополнительных переадресаций делает вашу страницу загружается медленнее.

Удалите JavaScript, блокирующий рендеринг.

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

Google рекомендует избегать и минимизировать использование блокирующего JavaScript.

Используйте кеширование браузера

Браузеры кэшируют большой объем информации (таблицы стилей, изображения, файлы JavaScript и т. Д.), Поэтому, когда посетитель возвращается на ваш сайт, браузеру не нужно перезагружать всю страницу. Используйте такой инструмент, как YSlow, чтобы узнать, не установлен ли у вас срок годности для вашего кеша. Затем установите заголовок «expires» на то, как долго вы хотите, чтобы эта информация была кэширована. Во многих случаях, если дизайн вашего сайта не меняется часто, год является разумным периодом времени.Здесь у Google есть дополнительная информация об использовании кеширования.

Увеличьте время отклика сервера

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

Использование сети распространения контента

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

Оптимизация изображений

Убедитесь, что ваши изображения не больше, чем они должны быть, что они находятся в правильном формате файла (PNG обычно лучше для графики с менее чем 16 цветов, а JPEG обычно лучше для фотографий) и что они сжаты для Интернета.

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


Продолжайте учиться

20 способов ускорить ваш сайт и повысить конверсию на 7%

Думаете, что ускорение вашего сайта не важно?

Подумай еще раз.

Односекундная задержка загрузки страницы дает:

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

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

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

Как оптимизация скорости веб-сайта влияет на конверсию

Медленные сайты убивают конверсии .

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

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

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

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

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

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

Один из лучших примеров этого — улучшение конверсий и доходов Walmart после увеличения скорости их сайта.

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

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

В конце оптимизации скорости своего веб-сайта Walmart сообщил следующие результаты:

  • За каждую секунду увеличения скорости сайта они увеличивали конверсию на 2%.
  • На каждые 100 мс улучшения они увеличивали дополнительный доход до 1%.

В другом исследовании взаимосвязь между временем загрузки и коэффициентом конверсии показала 25% -ное снижение коэффициента конверсии всего за одну дополнительную секунду времени загрузки.

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

Как узнать, что убивает ваши конверсии

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

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

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

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

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

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

Это полная противоположность тому, как раньше работал индекс.

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

Это уже не так.

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

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

Почему мой веб-сайт медленный?

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

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

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

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

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

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

Это может быть сложно, если вы не знаете, какова приемлемая скорость страницы.

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

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

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

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

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

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

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

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

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

Как ускорить работу вашего сайта в 2019

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

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

И если это число звучит ошеломляюще — не волнуйтесь.

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

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

Имея это в виду, приступим.

1. Минимизация HTTP-запросов

Согласно Yahoo, 80% времени загрузки веб-страницы тратится на загрузку различных частей страницы, таких как изображения, таблицы стилей и скрипты.

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

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

Если вы используете Google Chrome, вы можете использовать инструменты разработчика браузера, чтобы узнать, сколько HTTP-запросов делает ваш сайт.

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

Столбец «Имя» показывает все файлы на странице, столбец «Размер» показывает размер каждого файла, а столбец «Время» показывает, сколько времени требуется для загрузки каждого файла.

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

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

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

2. Минимизировать и объединить файлы

Теперь, когда вы знаете, сколько запросов делает ваш сайт, вы можете приступить к сокращению этого количества.Лучше всего начать с файлов HTML, CSS и JavaScript.

Это чрезвычайно важные файлы, так как они определяют внешний вид вашего сайта.

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

Вы можете уменьшить это число, «уменьшив» и объединив файлы. Это уменьшает размер каждого файла, а также общее количество файлов.

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

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

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

Объединение файлов — это именно то, на что похоже. Если на вашем сайте работает несколько файлов CSS и JavaScript, вы можете объединить их в один.

Есть несколько способов минимизировать и объединить файлы, и если ваш сайт работает на WordPress, плагины , такие как WP Rocket , значительно упрощают этот процесс.

Если у вас установлен этот плагин, перейдите на вкладку «Статические файлы» и отметьте файлы, которые вы хотите минимизировать и объединить.

Это может включать файлы HTML, CSS и JavaScript, а также шрифты Google.

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

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

3. Используйте асинхронную загрузку для файлов CSS и JavaScript

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

Скрипты, такие как CSS и JavaScript, могут быть загружены двумя разными способами: синхронно или асинхронно.

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

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

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

Используя ту же вкладку «Статические файлы» в плагине WP Rocket, проверьте параметры рядом с «Блокировка рендеринга CSS / JS».

Нажмите «Сохранить изменения», затем проверьте свой сайт, чтобы убедиться, что все загружается правильно.

4. Отложить загрузку JavaScript

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

Если у вас есть сайт WordPress, вы можете использовать упомянутый выше плагин WP Rocket, чтобы легко включить отложенную загрузку JavaScript. Просто установите флажок «Загружать файлы JS с задержкой», и все готово.

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

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

5.Минимизировать время до первого байта

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

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

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

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

  1. Поиск DNS
  2. Сервер обработки
  3. Ответ

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

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

Чтобы получить доступ к этой информации в Инструментах разработчика, щелкните вкладку «Сеть» и наведите указатель мыши на верхний элемент в столбце «Водопад».

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

Если TTFB меньше 200 мс, значит, вы в хорошей форме.

Если нет, то в корне может быть несколько разных проблем.

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

Из этих четырех факторов вы можете контролировать два: создание динамического контента и конфигурацию сервера.

В отличие от статических страниц, серверу необходимо «построить» динамический файл перед ответом.

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

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

6. Уменьшить время отклика сервера

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

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

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

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

Ваш интернет-провайдер выполнит поиск в DNS, чтобы найти IP-адрес, связанный с этим URL.

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

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

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

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

7. Выберите подходящий вариант хостинга для своих нужд

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

При выборе хостинга у вас есть три различных варианта:

  • Виртуальный хостинг
  • VPS хостинг
  • Выделенный сервер

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

При виртуальном хостинге вы разделяете определенные ресурсы, такие как ЦП, дисковое пространство и ОЗУ, с другими сайтами, размещенными на том же сервере.

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

KeyCDN объясняет это, используя аналогию, когда живут в квартире и живут в кондоминиуме .

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

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

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

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

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

Но, как вы уже догадались, это самый дорогой вариант.

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

8. Проведите аудит компрессии

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

Страницы с большим количеством изображений и другого содержимого часто могут иметь размер более 100 КБ.В результате они громоздкие и загружаются медленно.

Вы можете ускорить загрузку, сжав ее.

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

Просто введите свой URL и нажмите «Проверить». Если страница, которую вы вводите, не сжата, вы увидите что-то вроде этого:

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

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

Это сжатие включает файлы HTML, CSS, JavaScript, обычный текст и XML.

9. Включить сжатие

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

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

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

Большинство веб-серверов могут сжимать файлы в формате Gzip перед их отправкой на загрузку, вызывая сторонний модуль или используя встроенные процедуры. По данным Yahoo, это может сократить время загрузки примерно на 70% .

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

Если вы не уверены, включен ли на вашем сайте Gzip, вы можете использовать checkgzipcompression.com , чтобы увидеть. Просто введите URL своего сайта, и если у вас включен Gzip, вы увидите что-то вроде этого:

Если у вас не , Gzip включен, вы захотите исправить это как можно скорее.

Если ваш сайт работает на WordPress, плагины WP Rocket и W3 Total Cache поддерживают включение Gzip.

В W3 Total Cache все, что вам нужно сделать, это установить флажок «Включить сжатие HTTP (gzip)».

Если у вас есть статический HTML-сайт, вам необходимо включить Gzip в файле .htaccess. Точный код, который вам нужен, зависит от вашего сервера, но если ваш сайт работает, например, на Apache, он выглядит так:

Также существует аналогичная версия необходимого кода для серверов NGINX.

10.Включить кеширование браузера

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

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

Вот как это объясняет Tenni Theurer , ранее принадлежавшая Yahoo:

Когда кто-то впервые заходит на ваш веб-сайт, он должен загрузить документ HTML, таблицы стилей, файлы javascript и изображения, прежде чем сможет использовать вашу страницу.Это может быть до 30 компонентов и 2,4 секунды.

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

В тесте Терера это было всего три компонента и 0,9 секунды, что сократило время загрузки почти на 2 секунды.

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

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

Увеличьте скорость вашего сайта в WordPress с помощью W3 Total Cache

Если у вас сайт WordPress, вы можете использовать плагин, например W3 Total Cache , чтобы легко включить кеширование.

После установки перейдите к «Кэш страницы» в разделе «Общие настройки» и установите флажок «Включить».

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

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

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

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

Эта функция также находится в ваших общих настройках.

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

После того, как вы настроите свои настройки, вы сразу увидите улучшение времени загрузки. W3 Total Cache утверждает, что его пользователи увидели 10-кратное улучшение результатов Google PageSpeed ​​и до 80% экономии полосы пропускания после полной настройки плагина.

Если у вас есть статический HTML-сайт, вы можете включить кеширование в файле .htaccess.

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

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

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

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

11. Уменьшить размер изображения

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

Но удалить их совсем не вариант.

Подумайте вот о чем: средняя конверсия на сайте электронной коммерции колеблется в пределах 1-3%

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

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

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

Это также означает, что сжатие изображений имеет решающее значение — и это важно, есть ли на вашем сайте магазин электронной коммерции или нет.

Вы можете увидеть, насколько большое влияние изображения оказывают на любую из ваших страниц, с помощью такого инструмента, как Pingdom .Запустите тест скорости страницы, затем посмотрите «Запросы по типу контента».

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

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

Фактически, в одном исследовании изменение размера изображений с 22 МБ до 300 КБ привело к сокращению времени взаимодействия на на 70%. , или количество времени, которое пользователю нужно ждать, прежде чем он сможет взаимодействовать с сайтом.

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

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

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

Затем вы можете сжать файлы изображений с помощью нескольких различных инструментов.

Если ваш сайт работает на WordPress, WP Smush — отличный вариант.

Установите флажок «Автоматически стирать мои изображения при загрузке», и все ваши новые изображения будут сжаты без дополнительной секунды работы.

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

Если вы не используете WordPress, вы можете использовать инструмент, отличный от WordPress, например Compressor. io.

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

(Если вы не уверены, что лучше, продолжайте читать — мы вернемся к этому через минуту.)

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

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

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

У вас есть несколько различных вариантов, наиболее распространенными из которых являются JPG, PNG и GIF .

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

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

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

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

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

Наконец, GIF-файлы следует использовать только для небольшой или простой графики размером менее 10 × 10 пикселей, цветовой палитры из 3 или менее цветов, а также для анимированных изображений.

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

В HTML код изображения включает это:

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

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

12. Используйте CDN

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

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

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

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

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

CDN, или сеть доставки контента, может помочь вам устранить эти проблемы.

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

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

Если пользователь из Южной Африки заходит на ваш сайт, его браузер может загружать файлы с ближайшего сервера.

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

В одном эксперименте VentureHarbor сообщил об уменьшении времени загрузки в диапазоне от 20 до 51%, — для 20 минут работы.

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

Если вы хотите начать использовать CDN, лучше всего подходят MaxCDN и Cloudflare .

MaxCDN — это полноценный CDN, то есть только предлагает услуги CDN. У них больше центров обработки данных, и они сосредоточены исключительно на сокращении времени загрузки.

Cloudflare, с другой стороны, сочетает сервис CDN с функциями безопасности и оптимизации.

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

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

Если вы выберете MaxCDN, вы начнете с создания «вытягивающей зоны». Нажмите «Зоны» в панели администратора.

Затем нажмите «Создать зону извлечения».

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

После нажатия кнопки «Создать» вы увидите URL-адрес своего CDN, например cdn.yourdomain.netdna-cdn.com. Скопируйте это в блокнот или другое легкодоступное место. (Он понадобится вам через несколько минут.)

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

Обычно это cdn.yourdomain.com, cdn1.yourdomain.com, cdn1.yourdomain.com, cdn3.yourdomain.com и т. Д.

(Этот формат именования является стандартной практикой, и его легче всего запомнить, если вы когда-нибудь столкнетесь с проблемами или вам понадобится проконсультироваться с разработчиком. )

Вы можете добавить до семи пользовательских доменов, затем нажмите «Обновить».

Затем вам нужно будет добавить новый CDN на свой сайт с помощью редактора DNS вашего хостинг-провайдера. Точное местоположение зависит от провайдера, но в большинстве случаев вы можете найти редактор DNS в меню «Домены».

В Bluehost это меню называется «Редактор зон». Если вы используете Bluehost, нужные вам поля будут выглядеть следующим образом.

Введите URL-адрес, предоставленный MaxCDN (скопированный и вставленный из блокнота), установите для Типа значение «CNAME» и один из созданных вами пользовательских доменов CDN (например, cdn.yourdomain.com).

Затем повторите этот процесс для всех своих поддоменов.

Готово!

А если вы хотите использовать Cloudflare, , то процесс еще проще .

Нажмите кнопку «Зарегистрироваться» на их домашней странице , затем создайте учетную запись. Введите свой домен и нажмите «Начать сканирование».

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

Выберите нужный план и нажмите «Обработать и продолжить».

Затем вы увидите серверы имен Cloudflare для своего домена. Затем вам нужно будет обновить серверы имен для своего домена.

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

Это индивидуально для каждого регистратора. В Bluehost, например, вы можете найти его, перейдя в «Диспетчер домена», затем щелкнув вкладку «Сервер имен».

Затем переключите свои предпочтения на «Использовать настраиваемые серверы имен» и скопируйте и вставьте сервер имен, предоставленный Cloudflare.

Сохраните изменения, затем вернитесь на панель управления Cloudflare, чтобы убедиться, что вы правильно установили CDN. Перейдите на вкладку «Обзор», и если ваша CDN работает, вы увидите код статуса «Активен».

Если да, значит ваш CDN работает!

Последний шаг, который вам нужно сделать, — это проверить наличие ваших записей SSL.Щелкните вкладку «Шифрование», чтобы проверить наличие записей SSL. Вы должны увидеть одну для вашего корневого домена и одну запись поддомена с подстановочными знаками.

Если вы еще не видите эти записи, они появятся в течение 24 часов.

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

13. Используйте внешние хостинговые платформы

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

Это особенно важно для видео.

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

Что теперь?

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

Не делайте этого.

Когда вы размещаете видео на собственном сервере, они занимают тонн и места. Видео файлы могут легко занимать более 100 МБ.

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

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

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

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

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

Не делайте этого со своими посетителями.

Вместо этого разместите свое видео на стороннем сервисе, например YouTube , Vimeo или Wistia .

Затем разместите видео на своем сайте.

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

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

YouTube

Когда большинство людей думают об онлайн-видео, они думают о YouTube. Это один из самых известных сайтов в мире, с пользовательской базой в человек, более 1,5 миллиона человек и человек смотрят почти 5 миллиардов видео в день.

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

Это также совершенно бесплатно.

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

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

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

Vimeo

После YouTube Vimeo является второй по величине платформой для видеохостинга с 715 миллионами просмотров в месяц .

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

С другой стороны, его стандартный видеопроигрыватель выглядит немного лучше, чем YouTube.

Однако важно отметить, что Vimeo имеет ограничения на загрузку контента.

В то время как базовое членство позволит вам загружать 500 МБ в неделю и до 5 ГБ в целом, их три платных плана варьируются от 7 до 50 долларов в месяц, с хранилищем от 250 ГБ до 5 ТБ.

Wistia

Wistia немного отличается от YouTube и Vimeo тем, что он разработан с учетом требований маркетинга.

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

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

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

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

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

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

И если вы используете HubSpot или Marketo, он может быть полностью интегрирован с обеими этими платформами.

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

Кроме того, платные планы стоят более 99 долларов в месяц.

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

Выберите «Встроить» и скопируйте HTML-код, предоставляемый вашей платформой.

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

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

Для WordPress: переключитесь в текстовый редактор и сделайте то же самое.

Вот пример того, как выглядит видео Wistia, встроенное в сообщение в блоге WordPress:

14. Оптимизация доставки CSS

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

Внешний CSS загружается в заголовок вашего HTML с кодом, который выглядит примерно так:

Встроенный CSS вложен в HTML вашей страницы и выглядит так:

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

Это уменьшает размер вашего кода и создает меньше дублирования кода.

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

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

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

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

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

Просто скопируйте содержимое каждого файла CSS, который у вас есть, и вставьте его в один основной файл CSS .

Затем обновите свой HTML, чтобы он ссылался на этот новый файл, и удалите все ссылки на старые файлы.

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

Как только вы это сделаете, вы можете использовать PageSpeed ​​Insights , чтобы убедиться, что у вас нет проблем с CSS, блокирующим рендеринг.

Если у вас есть какие-либо ресурсы сценария блокировки, вы увидите их в разделе «Предложения по оптимизации».

Если вы уже используете такой плагин, как WP Rocket или W3 Total Cache, это не должно быть проблемой.Если у вас по-прежнему есть проблемы с блокировкой рендеринга, дважды проверьте настройки плагина или следуйте рекомендациям Google по оптимизации доставки CSS.

15. Приоритет содержимого верхней части страницы (отложенная загрузка)

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

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

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

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

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

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

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

А если вы запустите свой сайт на WordPress, включить его так же просто, как установить плагин. Существует вариантов, которые вы можете использовать , чтобы начать использовать отложенную загрузку на своем сайте.

Ленивая загрузка

Lazy Load — чрезвычайно простой плагин, который использует jQuery.sonar для загрузки изображений только тогда, когда они видны в браузере пользователя.

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

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

В любом случае: если вы ищете быстрое и простое решение, то вот оно.

BJ Ленивая загрузка

BJ Lazy Load — еще один относительно простой плагин, но он предлагает еще несколько вариантов настройки.

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

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

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

Таким образом, плагин знает, что изображение загружается как обычно.

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

Плагин также поддерживает бесконечную прокрутку.

Если вы ищете плагин, который прост в использовании, но дает немного больше контроля, чем Lazy Load, это отличный вариант.

WP Ракета

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

Откройте настройки WP Rocket, затем щелкните вкладку «Основные».В разделе LazyLoad установите флажок «Включить для изображений».

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

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

Просто откройте страницу, затем прокрутите вниз до поля «Параметры кэша» на правой боковой панели. Затем снимите флажок рядом с «LazyLoad for Images» и сохраните изменения.

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

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

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

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

Просто добавьте его в код своего изображения, и оно загрузится нормально.

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

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

Вы также можете найти этот фрагмент в руководстве по ленивой загрузке WP Rocket .

16. Уменьшите количество плагинов, которые вы используете на своем сайте

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

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

Plus, их очень легко установить.

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

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

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

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

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

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

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

Проверьте свои плагины

Если вы хотите повысить скорость работы сайта, есть два разных способа определить, какие плагины влияют на нее.

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

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

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

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

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

К счастью, есть альтернатива: установка другого плагина.

… да, я вижу здесь иронию.

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

После установки плагина перейдите на страницу настроек и выполните сканирование сайта.

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

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

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

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

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

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

Но сегодня многие темы имеют встроенную функцию контактной формы.

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

Выявить дублирование функций

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

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

Например, плагины WP Rocket и WP Total Cache на этой странице чрезвычайно полезны для повышения скорости сайта, и оба они являются отличными вариантами.

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

Затем включите все эти функции в плагине, который вы хотите использовать, и отключите остальные.

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

Удалите плагины для задач, которые можно выполнить вручную

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

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

Если у вас установлен плагин Insert Headers and Footers (или аналогичный) для редактирования других частей тега заголовка, вы можете скопировать код Google Analytics из панели администратора, а затем вставить его сюда.

Сохраните изменения, и ваш код отслеживания будет установлен.

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

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

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

Перейдите к Google Fonts и выберите шрифт, который хотите использовать на своем сайте.В разделе «Встроить» вы увидите коды HTML и CSS для этого шрифта.

Добавьте HTML-код в свой заголовок и CSS в таблицу стилей CSS вашего сайта, где бы вы ни хотели использовать выбранный шрифт.

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

17. Уменьшить количество перенаправлений

Переадресация часто необходима при перемещении и удалении страниц и является лучшим способом устранения проблем с неработающими ссылками.

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

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

К сожалению, это нереально для большинства владельцев сайтов, которые когда-либо удаляли или реструктурировали свой контент.

Тем не менее, в большинстве случаев есть возможности для улучшения.

Вы можете начать с использования Screaming Frog , чтобы быстро определить все перенаправления на вашем сайте в настоящее время.

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

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

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

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

18. Уменьшить внешние скрипты

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

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

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

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

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

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

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

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

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

19. Отслеживайте свою скорость с течением времени

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

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

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

Как сделать тест скорости веб-сайта

Для этого можно использовать множество инструментов. Одним из лучших для мониторинга общей производительности сайта является тест скорости веб-сайта Pingdom .

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

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

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

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

Вся эта информация включена в бесплатную версию инструмента.

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

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

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

20. Монитор скорости мобильной страницы

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

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

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

Вы можете начать с использования инструмента Google Test My Site для проверки скорости вашей страницы. Для начала просто введите свой URL.

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

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

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

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

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

Заключение

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

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

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

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

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

Эта статья была написана сегодня Daily Eggspert.

Последние сообщения Today’s Eggspert (посмотреть все)

3 простых совета по увеличению скорости загрузки страницы вашего веб-сайта

Быстро загружающийся веб-сайт становится все более важным фактором как для взаимодействия с пользователем (UX), так и для поисковой оптимизации (SEO).

Сегодняшний пользователь ожидает, что веб-сайт будет загружаться быстро, а те, которые не загружаются, вероятно, испытают в результате негативные последствия.Aberdeen Group провела исследование, которое показало, что задержка загрузки страницы в одну секунду приводит к уменьшению количества просмотров страниц на 11%, снижению удовлетворенности клиентов на 16% и снижению конверсии на 7%. Google также указал, что скорость загрузки сайта является одним из сигналов, используемых его алгоритмом для ранжирования страниц.

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

1. Оптимизировать изображения и видео

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

Уменьшить размер файла всех медиаресурсов

  • Правильно изменяйте размер изображений — Мы часто видели, что клиенты совершали ошибку, загружая полноразмерные 12-мегапиксельные изображения без предварительного изменения размера.Не загружайте изображение шириной 6000 пикселей, если оно будет отображаться с разрешением 500 пикселей. Хотя сетчатка имеет значение (2x), убедитесь, что размер фотографий соответствует параметрам дизайна.
  • По возможности придерживайтесь JPG — JPG — это формат сжатого изображения, который поддерживает целостность изображения, не тратя лишнего места. Поэтому для подавляющего большинства приложений предпочтительнее формат JPG. Вы должны использовать PNG только тогда, когда необходима прозрачность. Избегайте одновременного использования форматов TIFF и BMP.
  • Сжать все фотографии — Даже фотографии с соответствующим размером все равно останутся файлами большего размера, чем они должны быть. Убедитесь, что все фотографии сжаты, так как сжатие может значительно уменьшить размер файла без значительного ущерба для качества изображения. На базовом уровне вы можете экспортировать из Photoshop (или другого графического инструмента), используя опцию «Сохранить для Интернета». Мы большие поклонники Imagify из-за его полной интеграции в WordPress. В Интернете также есть множество инструментов для сжатия изображений, которые вы также можете использовать.
  • Сжать все видео — Видео — особенно видео высокой четкости — потенциально может значительно снизить скорость. Обязательно сжимайте каждое видео с помощью инструмента сжатия видео, такого как Handbrake.
  • Встраивание с использованием платформы видеохостинга 3 rd . — Также неплохо встраивать видео с помощью платформы видеохостинга 3 rd , такой как Vimeo или Wistia, чтобы снизить влияние на пропускную способность вашего хостинг-сервера.

Ограничить количество общих активов на каждой странице

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

2. Используйте плагин кэширования, скорости страницы

Есть много факторов, которые влияют на скорость загрузки страницы веб-сайта, но многие из них просто выходят за рамки компетенции среднего маркетолога.К счастью, существует множество полезных плагинов или модулей (в зависимости от вашей CMS), которые могут помочь с технической тяжелой работой. Кэширование страниц — это еще один способ сократить время загрузки страницы. Кэшированные страницы обслуживаются как статические HTML-версии определенной страницы, чтобы избежать длительных запросов к базе данных вашего веб-сайта. Кэшированная веб-страница загружается намного быстрее — при этом нагрузка на сервер снижается до 80%. Пользователи WordPress могут легко установить один из многих популярных плагинов кэширования страниц, например W3 Total Cache.

Надежное решение для скорости страницы для веб-сайтов WordPress, таких как WP Rocket, может не только обрабатывать кеширование страниц (заменяя необходимость в плагине, таком как W3 Total Cache), но и множество других методов оптимизации скорости страницы, таких как:

  • Включение кеширования браузера
  • Ленивая загрузка изображений и видео
  • Минификация ресурсов (HTML, CSS, JS)
  • Удаление строк запроса из статических ресурсов
  • Объединение файлов (Google шрифты, CSS, JS)
  • Оптимизация базы данных
  • Асинхронная загрузка файлов CSS
  • Загрузка файлов JS отложена

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

3. Обновите свой пакет веб-хостинга

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

Другие советы по ускорению вашего сайта

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

  • Минимизация HTTP-запросов — Это сводится к мельчайшим деталям веб-разработки, но уменьшает общее количество частей веб-страницы (таких как изображения, сценарии и т. Д.)), которые необходимо загрузить, может сократить время загрузки страницы.
  • Включить сжатие Gzip — Gzip сжимает ваши веб-страницы и таблицы стилей перед отправкой их в браузер. Это уменьшает размер страницы до 70%, что также может значительно сократить время передачи.
  • Использование CDN (сети доставки контента) — Использование CDN может повысить скорость вашего сайта за счет размещения файлов веб-сайта в большой сети серверов по всему миру. Это позволяет пользователям загружать файлы с серверов, которые находятся рядом с ними, а увеличение пропускной способности сокращает время загрузки страницы.
  • Настройка параметров сервера — Серверное программное обеспечение (например, Apache) не всегда достаточно настроено для оптимальной производительности веб-сайта. Проконсультируйтесь со своим хостинг-провайдером о том, как лучше всего «настроить производительность» вашего сервера для вашего веб-сайта и системы управления контентом (CMS).

Тим Азимос
Партнер и директор по цифровым технологиям и развитию

Тим — синдицированный блоггер и востребованный спикер в национальном масштабе, делится глубокими взглядами на современный маркетинг и необычным взглядом, почерпнутым из почти 20-летнего опыта работы в сфере B2B и A / E / C.

22 простых совета по ускорению вашего веб-сайта на 70% всего за 45 минут

В 2006 году Amazon сообщила, что каждые 100 миллисекунд, которые они ускоряют, свой веб-сайт, они видят увеличение дохода на 1%. Затем Google объявил, стремясь улучшить Интернет, что скорость загрузки страниц является фактором ранжирования результатов поиска.

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

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

Один из способов — использовать WhichLoadsFaster для сравнения скорости загрузки вашего сайта со скоростью загрузки всех ваших основных конкурентов. Стремитесь быть самым быстрым из всех.

Другой способ — использовать следующие рекомендации:

Менее 1 секунды = идеально
1-3 секунды = выше среднего
3-7 секунд = среднее
7+ секунд = очень плохо

Эти тесты основаны на исследованиях, показывающих, что 47% людей ожидают, что веб-страница загрузится менее чем за две секунды, а 57% посетителей покинут страницу, загрузка которой занимает 3 секунды или более.

Так как же работал этот сайт до того, как я описал все в этом посте?

Сайт Venture Harbour был неплохим со скоростью загрузки страницы 1,61 секунды, но явно было что улучшить. Домашняя страница выполняла 64 запроса и занимала более 3 Мбайт, что довольно много и во многом было вызвано загрузкой большого количества JS-файлов из плагинов, которые даже не использовались.

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

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

# 1 Используйте CDN (сеть доставки контента)

Размещение ваших медиафайлов в сети доставки контента — один из лучших способов ускорить работу вашего сайта. Часто он позволяет сэкономить до 60% полосы пропускания и вдвое сократить количество запросов, которые делает ваш сайт.

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

Мы протестировали несколько CDN в Venture Harbor, в том числе MaxCDN, Cloudwatch, Static DNA и Cloudflare. Cloudflare — наш фаворит (и для начала бесплатен).

# 2 Используйте WP Engine

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

9/10 протестированных мной веб-хостов имели время отклика от 600 мс до 1300 мс. Время ответа сервера WP Engine составило 293 мс. Да, это не самое дешевое решение для веб-хостинга (они начинаются с 29 долларов в месяц), но это одна из немногих хостинговых компаний, которая действительно оправдывает свою цену. На самом деле, если бы я мог вернуться на 5 лет назад и сделать что-то по-другому, я бы начал использовать WP Engine раньше, поскольку это не только значительно ускорило наши сайты, но и улучшения безопасности и рабочего процесса также избавили нас от многих головных болей.

Смена веб-хостинга не может быть чем-то, что вы можете сделать менее чем за 45 минут, но это может иметь больший эффект, чем все перечисленные ниже «настройки» вместе взятые. Мой совет? Если вы пользуетесь услугами посредственного или некачественного веб-хостинга, прекратите читать, начните использовать такой хост, как WP Engine, и вернитесь позже, если у вас все еще есть проблемы со скоростью загрузки страниц.

# 3 Используйте плагин кеширования

Если вы используете WordPress, один из самых быстрых и простых способов снизить скорость загрузки страницы — это установить плагин кеширования, например WP Total Cache или WP Super Cache.Конечно, если вы используете WP Engine, вы можете пропустить этот момент, поскольку у них есть встроенное кеширование.

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

# 4 Добавить заголовки Expires для использования кеширования браузера

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

Заголовки

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

Заголовки

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

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

# 5 Используйте хорошую тему (при использовании WordPress)

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

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

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

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

[includeme file = ”wp-content / themes / venture-harbor / blog-Promo-Box / serene-callout.html »]

# 6 Сжимайте изображения с помощью WP Smush.it

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

# 7 Очистите базу данных

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

После запуска этого в базе данных Venture Harbour мне удалось уменьшить базу данных с 5 МБ до 3 МБ, что помогает ускорить время, необходимое браузеру для сбора и возврата файлов из базы данных.

# 8 Сожмите свой сайт с помощью gzip

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

Вы можете включить Gzip, просто добавив следующий код в ваш файл .htaccess:

  # сжатие текста, html, javascript, css, xml:
AddOutputFilterByType DEFLATE текст / простой
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE текст / xml
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / javascript
AddOutputFilterByType DEFLATE application / x-javascript

# Или сжимайте файлы определенных типов по расширению:

SetOutputFilter DEFLATE  

Чтобы проверить, включен ли Gzip или работает ли он правильно на вашем сайте, вы можете использовать Gziptest.com.

# 9 Исправить все неработающие ссылки

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

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

Чтобы определить ваши неработающие ссылки, я бы рекомендовал использовать следующие (бесплатные) инструменты:

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

# 10 Уменьшение количества перенаправлений

Хотя переадресация 301 (постоянная) предпочтительнее, чем ошибка 404 (неработающие ссылки), они все еще не идеальны, поскольку замедляют время, необходимое браузеру для перехода к правильной версии страницы.

Screaming Frog снова стал отличным инструментом для обнаружения 301 редиректа. Если вы используете ПК, вы также можете использовать Xenu Link Sleuth, который является отличным инструментом для сканирования данных с веб-сайтов.

# 11 Минимизируйте файлы CSS и JS

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

Есть несколько способов уменьшить ваши файлы. Первый способ заключается в объединении всех ваших файлов в один — поэтому вместо вызова десяти отдельных файлов javascript вы просто помещаете весь свой javascript в один файл.

Второй аспект минимизации включает удаление пробелов и уменьшение размера файлов. Если вы используете WordPress, WP Minify — отличный плагин, который автоматически сделает все это за вас.

# 12 По возможности заменить PHP статическим HTML

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

Расти без догадок

Знайте, какие кампании будут работать без потери бюджета с нашим последним проектом TrueNorth.

Получите бесплатный ранний доступ

# 13 Ссылка на таблицы стилей, не используйте @import

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

# 14 Отключить пинг-бэк и трекбэк в WordPress

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

# 15 Включить Keep-Alive

HTTP Keep Alive — это сообщение, которое отправляется между клиентским компьютером и веб-сервером с просьбой разрешить загрузку файла.Включение Keep Alive позволяет клиентскому компьютеру загружать несколько файлов без повторного запроса разрешения, что помогает сэкономить пропускную способность.

Чтобы включить Keep Alive, просто скопируйте и вставьте приведенный ниже код в файл .htaccess.

  
    Набор заголовков Поддерживает активность соединения
  

# 16 Укажите размеры изображения

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

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

# 17 Укажите набор символов в заголовках HTTP

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

Вы можете сделать это, просто добавив тег набора символов UTF-8 в раздел своего веб-сайта.

# 18 Поместите CSS вверху, а JS внизу

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

# 19 Отключить хотлинкинг изображений

Когда другой веб-сайт использует «горячую ссылку» на ваши изображения, это крадет пропускную способность, замедляя работу вашего сайта.http (s)?: // (www.)? ventureharbour.com [NC] RewriteRule. (Jpg | jpeg | png | gif) $ — [NC, F, L]

# 20 Отключите все плагины, которые вы не используете

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

# 21 Минимизировать время приема-передачи (RTT)

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

Чтобы уменьшить количество запросов, используйте спрайты CSS, чтобы вызывать меньше изображений, уменьшать и объединять файлы JS и CSS и не вызывать ничего, что вам не нужно. Одна из моих самых больших проблем с WordPress заключается в том, что плагины, которые нужны только на определенных страницах, такие как Disqus или Contact Form 7, обычно вызываются на каждой странице, что создает ненужные запросы.Уменьшение количества ненужных запросов уменьшит ваши RTT.

# 22 Использовать спрайты CSS

Спрайт — это одно большое изображение, которое содержит все ваши изображения. Они похожи на те наборы наклеек, которые вы получали с сотней наклеек на одном листе. Используя CSS, вы можете «скрыть» все на изображении, кроме раздела между набором координат.

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

Самый быстрый способ использовать спрайты CSS — использовать SpriteMe, инструмент, который позволяет легко превращать все ваши изображения в спрайты CSS.

Почему скорость загрузки страниц сейчас важнее, чем когда-либо

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

Кредит изображения: Лен Мэтьюз

Рекомендации по оптимизации скорости и производительности веб-сайта

Время чтения: 9 минут

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

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

Важность оптимизации скорости сайта

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

Давайте посмотрим, как оптимизация скорости веб-сайта влияет на ключевые факторы успеха веб-сайта:

  • преобразование
  • видимость
  • юзабилити

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

Чем быстрее загружается страница, тем выше у нее коэффициент конверсии. Согласно исследованию Hubspot, задержка в 1 секунду означает снижение конверсии на 7 процентов. Например, замедление загрузки страницы на 1 секунду может стоить Amazon 1,6 миллиарда долларов продаж ежегодно.

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

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

Способы оценки скорости вашего сайта

Перед тем, как начать оптимизацию скорости вашего сайта, вы должны определить ваше текущее время загрузки и определить, что замедляет ваш сайт. Затем вы должны установить цели производительности вашего сайта. Рекомендуемое время загрузки страницы в 2018 году — менее 3 секунд. Согласно исследованию Google о средней скорости мобильной связи в отраслевых секторах, лишь небольшая часть веб-сайтов приближается к рекомендуемой скорости.

Индекс средней скорости мобильной связи в США

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

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

Есть несколько инструментов оценки производительности, которые стоит попробовать:

  • Google Pagespeed Insights — это бесплатный инструмент от Google, который выполняет тест производительности вашего сайта и дает рекомендации по увеличению производительности. Работает как для настольной, так и для мобильной версии.
  • Pingdom — также отличный инструмент для тестирования скорости веб-сайтов с рядом полезных функций. Он отслеживает историю производительности вашего веб-сайта, дает рекомендации на основе данных о том, как повысить скорость веб-сайта, и создает простые для понимания отчеты.Pingdom также предоставляет приложения для тестирования скорости веб-сайтов для Android и iOS. У него есть как бесплатные, так и профессиональные платные планы мониторинга.
  • YSlow также предоставляет рекомендации по повышению производительности страницы, рисует статистику и суммирует все компоненты.
  • Калькулятор бюджета производительности
  • — это бесплатный инструмент, который помогает выяснить, какой тип контента вы можете использовать для обеспечения оптимальной работы вашего сайта.

Калькулятор бюджета производительности

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

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

1.

Используйте сеть доставки контента (CDN)

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

2. Переместите ваш сайт на более удобный хост

Есть три возможных типа хостинга:

  • Виртуальный хостинг
  • Хостинг виртуальных частных серверов (VPS)
  • Выделенный сервер

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

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

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

Другой подход — аренда выделенного облачного ресурса у AWS, Microsoft Azure, Google или другого поставщика общедоступного облака. Оба подхода также можно объединить в гибридное облако, которое мы недавно обсуждали.С выделенными серверами все ресурсы принадлежат только вам, и вы получаете полный контроль над ними. Облачные инфраструктуры также могут добавлять неограниченную масштабируемость и масштабируемость по запросу в рамках ряда пакетов.

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

3. Оптимизируйте размер изображений на своем сайте

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

Лучший способ уменьшить размер изображения без ущерба для его качества — это сжать изображения с помощью таких инструментов, как ImageOptim, JPEGmini или Kraken. Процедура может занять немного времени, но оно того стоит. Другой способ уменьшить размер изображения — использовать атрибуты HTML-чувствительных изображений и , которые регулируют размер изображения в зависимости от свойств отображения пользователя.

4. Уменьшить количество плагинов

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

5. Минимизируйте количество файлов JavaScript и CSS

Если ваш веб-сайт содержит много файлов JavaScript и CSS, это приводит к большому количеству HTTP-запросов, когда посетители вашего веб-сайта хотят получить доступ к определенным файлам.Эти запросы обрабатываются браузером посетителя индивидуально и замедляют работу сайта. Если вы уменьшите количество файлов JavaScript и CSS, это, несомненно, ускорит ваш сайт. Попробуйте сгруппировать весь JavaScript в один, а также сделайте это со всеми файлами CSS. Это уменьшит общее количество HTTP-запросов. Существует множество инструментов для быстрой минимизации файлов HTML, CSS и JavaScript. Например, вы можете использовать инструменты WillPeavy, Script Minifier или Grunt.

6. Используйте кеширование веб-сайтов

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

Подходы к кешированию веб-сайтов зависят от платформы, на которой разработан ваш веб-сайт. Например, для WordPress вы можете использовать следующие плагины: W3 Total Cache или W3 Super Cache. Если вы используете VPS или выделенный сервер, вы также можете настроить кеширование в общих настройках.В случае с общим сервером кеширование веб-сайта обычно недоступно.

7. Реализовать сжатие Gzip

Gzip Compression — эффективный способ уменьшить размер файлов. Это минимизирует HTTP-запросы и сокращает время ответа сервера. Gzip сжимает файлы перед их отправкой в ​​браузер. Со стороны пользователя браузер распаковывает файлы и представляет их содержимое. Этот метод может работать со всеми файлами на вашем сайте. Вы можете включить Gzip на своем сайте, добавив несколько строк кода или используя утилиту gzip.

8. Оптимизация базы данных в CMS

Оптимизация базы данных — эффективный способ повышения производительности. Если вы используете систему управления контентом (CMS), упакованную сложными плагинами, размер базы данных увеличивается, и ваш сайт работает медленнее. Например, WordPress CMS хранит комментарии, сообщения в блогах и другую информацию, которая занимает много места для хранения данных. Каждая CMS требует собственных мер по оптимизации, а также имеет ряд специальных плагинов. Для WordPress, например, вы можете рассмотреть WP-Optimize .

9. Сократите использование веб-шрифтов

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

  • Используйте современные форматы WOFF2 для современных браузеров;
  • Включите только те наборы символов, которые используются на сайте;
  • Выбирайте только нужные стили

10.Обнаружить 404 ошибки

Ошибка 404 означает, что «Страница не найдена». Это сообщение предоставляется хостингом браузерам или поисковым системам, когда доступное содержимое страницы больше не существует. Чтобы обнаружить и исправить ошибку 404, вы можете использовать инструменты и плагины для обнаружения ошибок. Как мы уже упоминали, дополнительные плагины могут негативно повлиять на скорость вашего сайта, поэтому мы советуем запускать ресурс с помощью внешних инструментов для обнаружения ошибок. Например, Xenu’s Link Sleuth, Google Webmaster Tools (GWT) и 404 Redirected Plugin для WordPress .

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

11. Сократить редиректы

Перенаправления веб-сайтов создают дополнительные HTTP-запросы, которые негативно влияют на производительность.Мы советуем свести их к минимуму или полностью исключить. Во-первых, вы должны определить все перенаправления на своей странице, запустив сканирование сайта. Вы можете использовать Screaming Frog, чтобы быстро определять перенаправления. Затем вы должны проверить, служат ли они необходимой цели, и оставить только самые важные.

12. Используйте методы предварительной выборки

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

Существует три основных типа предварительной выборки:

DNS-prefetching. Эта практика предполагает предварительное преобразование доменов в IP-адреса.

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

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

Хотя предварительная выборка и эффективна, она требует глубокого анализа поведения пользователя, чтобы делать точные предположения.

Заключение

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

Итак, мы рекомендуем применить простой, но эффективный подход к оптимизации скорости сайта:

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

9 быстрых способов повысить скорость загрузки страницы

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

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

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

Сайт, оптимизированный по скорости, не только улучшает пользовательский опыт (UX), но также может помочь повысить рейтинг вашего сайта в поисковых системах.

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

Приступим!

Что такое скорость страницы?

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

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

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

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

Почему важна скорость страницы?

Когда дело доходит до скорости загрузки страницы, на счету каждая секунда. Фактически, исследование Google показывает, что при увеличении времени загрузки с одной до трех секунд вероятность отказа (посетитель сразу уходит) увеличивается на 32 процента.

Если загрузка страницы занимает пять секунд, вероятность возврата повышается на 90 процентов:

Источник изображения

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

Скорость страницы также играет ключевую роль в поисковой оптимизации (SEO). Google принимает во внимание множество факторов при принятии решения о ранжировании веб-страниц.

Однако скорость является важным показателем ранжирования как для поиска на настольных компьютерах, так и для мобильных.

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

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

Как измерить скорость страницы

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

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

Plus, как инструмент, поддерживаемый Google, может помочь вам убедиться, что вы соответствуете критериям производительности, необходимым для размещения с высокими результатами поиска.

Чтобы использовать PageSpeed ​​Insights, просто введите URL-адрес веб-страницы, которую вы хотите протестировать, в текстовое поле и нажмите кнопку Analyze :

Google PageSpeed ​​Insights.

PageSpeed ​​Insights затем проанализирует контент на вашей странице и оценит его по шкале от 0 до 100. Под вашей оценкой вы найдете список предложений о способах повышения скорости загрузки страницы:

Предложения по повышению производительности.

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

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

9 быстрых способов повысить скорость загрузки страницы

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

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

1. Выберите хостинг с оптимизацией производительности.

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

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

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

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

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

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

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

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

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

Если вы не используете WordPress в качестве своей CMS, вы можете попробовать tinypng.com, который может уменьшить размеры ваших изображений от 25% до 80%, и бесплатное приложение для веб-сайтов под названием Squoosh.

3. Уменьшите количество перенаправлений.

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

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

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

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

Инструмент отображения переадресации Патрика Секстона.

Это обнаружит все повторяющиеся перенаправления. Вы также можете использовать такой инструмент, как Screaming Frog, чтобы определить все перенаправления на вашем сайте и куда они ведут. Это должно упростить выявление перенаправлений, которые не служат цели. Затем вы можете удалить те, которые вам не нужны, через файл .htaccess вашего сайта.

4. Кэшируйте свои веб-страницы.

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

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

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

Другой вариант — использовать плагин кеширования, такой как W3 Total Cache , , который является бесплатным плагином WordPress, который делает кэширование ваших веб-страниц быстрым и простым. После установки и активации просто перейдите к General Settings > Page Cache и выберите опцию Enable .

5. Включите кеширование браузера.

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

Подобно W3 Total Cache, WP Rocket — это мощный плагин для кеширования, который вы можете использовать на своем сайте WordPress. Он использует кеширование страниц и предварительную загрузку кеша для оптимизации скорости ваших страниц и создания молниеносной загрузки.WP Rocket — это плагин премиум-класса с множеством тарифных планов на выбор.

6. Используйте асинхронную и отложенную загрузку для файлов CSS и JavaScript.

Ваш сайт состоит из файлов CSS и JavaScript. Эти скрипты могут загружаться синхронно или асинхронно.

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

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

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

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

7. Минимизируйте CSS, JavaScript и HTML.

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

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

Конечно, прочесывание каждой строчки кода для каждого файла вашего сайта не совсем эффективно.

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

Настройки плагина Autoptimize WordPress.

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

8. Используйте сеть доставки контента (CDN).

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

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

Это может максимизировать производительность за счет уменьшения расстояния, на которое запросы данных должны проходить между браузерами и серверами вашего хоста. Загружая контент для веб-страницы с сервера, расположенного рядом с каждым посетителем, CDN помогает уменьшить задержку в сети и снизить TTFB.

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

9. Удалите ненужные плагины.

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

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

Таким образом, это разумная идея — минимизировать количество плагинов, которые вы используете на своем сайте WordPress. Конечно, один из самых простых способов сделать это — отключить и удалить все плагины, которые вы в настоящее время не используете.

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

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

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

Деактивация плагинов WordPress.

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

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

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

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

Использование оптимизированного для производительности хостинга также может существенно повлиять на скорость вашего сайта.

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

Как набрать 100% очков в Google PageSpeed ​​Insights

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

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

Но есть проблема: вы обнаруживаете, что ваш новый красивый веб-сайт работает не так быстро, как вам нужно.

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

Если у вас нет быстрого веб-сайта, люди будут возвращаться быстрее, чем вы можете сказать «конверсии».

Но ускорить работу вашего сайта — непростая задача.

Часто бывает трудно определить причину, по которой ваш веб-сайт работает медленнее, чем следовало бы.

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

И вам нужно быстро диагностировать и устранять эти проблемы.

Google закроет ваш сайт, если вы этого не сделаете.

Если вы запустите свой веб-сайт через Google PageSpeed ​​Insights и получите 100% результат, ваш сайт будет быстрым.

И Google отдает предпочтение сайтам, которые загружаются быстро.

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

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

Но, к сожалению, они не дают вам лучших инструкций по достижению 100% результата.

Вот как набрать 100% баллов в Google PageSpeed ​​Insights и почему вам нужно это сделать.

Почему нужно заботиться о скорости страницы

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

Если ваш веб-сайт не входит в топ-10 обычных страниц, вы не попадете на первую страницу.

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

Не секрет, что 10 самых популярных результатов принесут больше всего кликов.

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

Backlinko недавно провела исследование, в котором проанализировала более миллионов страниц результатов поисковой системы (SERP) в Google.

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

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

Все высшие позиции в Google имеют одно и то же общее:

Высокая скорость страниц на своих сайтах.

У них были хорошо оптимизированные сайты, которые их создатели явно разработали для скорости.

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

Между быстрыми веб-сайтами и низким показателем отказов существует большая корреляция.

И эта корреляция была недавно подтверждена новым отраслевым тестом Google PageSpeed ​​.

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

Это означает, что если ваша страница загружается за 10 секунд, вероятность того, что кто-то покинет ваш сайт еще до того, как он загрузится, увеличивается более чем на 120%!

И если вы посмотрите на график Backlinko сверху, он показал, что все сайты с самым высоким рейтингом на первой странице Google имели скорость страницы менее 3 секунд.

Но согласно последнему отчету Google, большинство веб-сайтов работают невероятно медленно во всех отраслях:

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

Между тем, лучший тест — меньше трех секунд.

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

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

Исследование

Backlinko доказало это, а тесты Google еще больше подтверждают эти данные.

В другом исследовании BigCommerce обнаружила , что коэффициент конверсии для веб-сайтов электронной коммерции в среднем находится в диапазоне 1-2%.

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

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

Итак, что вызывает медленную загрузку страницы?

Наиболее частые причины медленных страниц — объемные изображения и плохо продуманный код.

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

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

Размер и вес страницы часто измеряются байтами веса страницы. Проще говоря, байты веса страницы показывают общий размер веб-страницы, измеренный в байтах.

Сравнительные данные Google показывают, что оптимальная практика для размера или веса страницы составляет менее 500 КБ:

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

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

«Что бы ни случилось, быстрее — лучше, а меньше — лучше».

Поскольку 70% страниц имеют размер более 1 МБ, 36% — более 2 МБ и 12% — более 4 МБ, это утверждение имеет большой вес (не каламбур).

Google обнаружил, что страница весом всего 1,49 МБ (сравнимо со средним размером одного HD-изображения) загружалась на страницу за семь секунд.

В ходе своего исследования они даже нашли веб-страницу с изображениями, размер каждого изображения которых составлял в среднем 16 МБ.

Google просто говорит нам суровую, но обнадеживающую правду:

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

Как диагностировать ваш компьютер и мобильный сайт

Осознание того, что медленные веб-сайты убивают конверсию, — это только начало.

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

Большинство сайтов будут работать медленно из-за больших изображений, занимающих слишком много места.

Но это не всегда верно для каждого веб-сайта.

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

Для начала откройте инструмент PageSpeed ​​Insights и введите URL-адрес своего веб-сайта в строку:

Нажмите «Анализировать», чтобы Google провел быструю проверку вашего сайта.

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

Вот как выглядит мой отчет:

Это 87/100.

Это не здорово. Впрочем, это тоже не страшно.

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

Во-первых, давайте посмотрим на элементы, которые я оптимизировал и усовершенствовал:

Теперь обратите внимание, что в этом списке всего несколько пунктов по сравнению с моим списком «Возможные оптимизации»:

Эта информация говорит мне, что пункты «Возможные оптимизации» немного менее эффективны, чем те, которые я уже оптимизировал.

Но, очевидно, вам нужно будет позаботиться о каждом элементе, чтобы достичь 100% результатов в инструменте Page Speed ​​Insights.

Вам нужно начать с предметов с наивысшим приоритетом (подробнее об этом позже).

Далее мы хотим отдельно протестировать наш мобильный сайт.

Вы можете использовать тестер мобильных сайтов в инструменте PageSpeed ​​Insights, но Google выпустил обновленную, более точную версию этого.

Зайдите на Test My Site , чтобы попробовать. Введите URL своего веб-сайта и нажмите Enter:

.

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

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

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

У меня время загрузки на мобильном телефоне составляет четыре секунды.

Помните: рекомендуемое время загрузки — три секунды или меньше.

Это означает, что моя скорость не соответствует отраслевым стандартам.

И из-за этого я теряю до 10% посетителей просто из-за низкой скорости!

Вот как выглядит мой мобильный тест, когда я сравниваю его с отраслевыми стандартами:

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

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

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

Это означает, что я потенциально могу загрузить свой веб-сайт за одну секунду!

Это потрясающе. И поверьте мне, чтобы сэкономить 10% посетителей или больше, это то, что вам нужно сделать.

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

В этом следующем разделе я расскажу вам, как исправить пять основных проблем со скоростью страницы, которые помогут вам набрать 100% в инструменте PageSpeed ​​Insights.

4 способа добиться идеального результата PageSpeed ​​

Получить все 100% с помощью инструмента Google PageSpeed ​​Insights — непростая задача.

Это тоже не произойдет в одночасье. Тебе придется немного поработать и провести несколько часов у точильного камня.

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

Это может быть скучно, утомительно и утомительно, но вам нужны эти преобразования. Вы не можете лениться и рисковать оставить трафик и прибыль на столе.

Вот четыре основных способа ускорить свой сайт и получить 100% результатов с помощью Google.

1. Сжимайте изображения

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

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

Одним из лучших методов оптимизации для исправления размера изображения является сжатие.

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

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

Мой любимый плагин — WP Smush Image Сжатие и оптимизация:

WP Smush имеет множество потрясающих функций бесплатно.

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

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

Одновременно можно обрабатывать до 50 изображений, что делает его одним из самых быстрых инструментов на рынке:

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

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

WP Smush — отличный бесплатный инструмент для обычного пользователя WordPress.

Но если вы не используете WordPress, что вы будете делать?

Ну, есть масса других плагинов для разных сайтов. Например, если у вас есть магазин и сайт на основе Shopify, вы можете использовать Crush.pics :

Crush.pics говорит, что вы можете ожидать большого скачка оценок PageSpeed ​​Insights, используя их инструмент:

«Оценка PageSpeed ​​до сжатия: 75/100. Оценка PageSpeed ​​после сжатия: 87/100 ”

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

Если вы не знакомы с плагинами или не хотите использовать их на своем сайте, вы можете использовать бесплатные онлайн-инструменты, такие как Compress JPEG , Optimizilla и другие.

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

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

Я уменьшил размер файла на 68% всего за две секунды с помощью Optimizilla.Он уменьшил размер с 380 КБ до 120 КБ практически без разницы в качестве!

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

2. Использовать кеширование браузера

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

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

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

И в этом может помочь кеширование браузера.

Он работает, «запоминая» ранее загруженные ресурсы, поэтому ему не нужно перезагружать их при каждом посещении.

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

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

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

Попробуйте использовать W3 Total Cache для сайтов WordPress. У него более миллиона активных установок, и это самый популярный плагин для кеширования на рынке:

W3 Total Cache утверждает, что может дать вам как минимум , что в 10 раз повысит общую производительность сайта.

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

Этот инструмент также помогает минимизировать HTML (который мы рассмотрим далее), JavaScript и CSS, что дает вам до 80% экономии полосы пропускания.

Попробуйте использовать W3 Total Cache сегодня, чтобы ускорить и ускорить работу своего веб-сайта, даже если у вас нет опыта программирования.

3. Сократите HTML-код

Сведение к минимуму места, занимаемого при кодировании HTML, — еще один важный фактор в получении отличной оценки от Google.

Минификация — это процесс удаления или исправления ненужных или дублированных данных без влияния на то, как браузер будет обрабатывать HTML.

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

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

Один из лучших инструментов для этого — HTML Minify :

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

Вы также можете установить его прямо со страницы плагина .

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

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

Перейдите на вкладку настроек вашего плагина Minify HTML и включите все следующие настройки:

Вы можете эффективно убить нескольких зайцев одним выстрелом.

Google PageSpeed ​​Insights рекомендует минимизировать HTML, JavaScript и CSS.

Включите параметры «Сократить HTML» + «Встроенный JavaScript».

Затем обязательно выберите «Да» для «Удалить комментарии HTML, JavaScript и CSS».

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

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

Сократите кодирование сегодня, и вы сразу увидите, как это повлияет на ваш отчет.

4. Внедрить AMP

AMP — это сокращение от Accelerated Mobile Pages .

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

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

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

Если вы просматриваете Интернет на своем мобильном телефоне, вы, вероятно, нажали на статью, основанную на AMP.

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

Их часто относят к разделу «Главные новости» результатов поиска Google, и они загружаются мгновенно.

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

Когда поисковик в Google нажимает на одну из этих статей AMP, он видит следующее содержание:

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

Например, вы можете просто провести пальцем влево или вправо , чтобы прочитать следующую статью в последовательности:

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

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

Здесь вы можете получить доступ к содержанию нескольких статей, не нажимая кнопку «Назад» один раз.

Это очень эффективно для ускорения работы вашего сайта и снижения вероятности того, что кто-то уйдет.

Тонны компаний используют AMP.

Компания WIRED приступила к внедрению AMP , чтобы улучшить работу с клиентами.

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

Решение потратить время на AMP оказало огромное влияние на WIRED.

Они увеличили CTR из обычных результатов поиска на 25%.

Они также обнаружили увеличение CTR рекламы в AMP-историях на 63%.

Они также смогли добавить истории AMP к более чем 100 тысячам статей на своем сайте.

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

Они получали более 100 000 посещений AMP-страниц каждый день, а время загрузки было в 3 раза быстрее, чем у стандартных мобильных страниц.

Конверсии тоже увеличились на 50%.

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

Если вы хотите начать использовать AMP на своем сайте, есть несколько способов сделать это.

Если вы знакомы с HTML, вы можете ознакомиться с подробным руководством по AMP здесь.

Для тех, кто менее разбирается в технологиях или не имеет опыта работы с HTML, попробуйте использовать плагин WordPress.

Один из самых популярных плагинов — AMP для WP .

Он имеет более 80 000 активных установок и имеет постоянную поддержку и обновления.

Плагин включает в себя конструктор страниц AMP, на который можно легко перетаскивать элементы страницы:

Это один из самых простых способов создания контента, удобного для AMP.

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

Оттуда вы можете использовать конструктор страниц для каждого нового загружаемого сообщения.

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

AMP — проверенный способ ускорить работу вашего мобильного сайта.

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

Заключение

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

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

Но это часто оставляет вас с веб-сайтом, который работает медленнее, чем лучшие практики, установленные Google.

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

Люди не хотят ждать 10 секунд загрузки вашего сайта, когда они могут вернуться в Google и выбрать следующий результат.

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

Чрезвычайно важно, чтобы вы набрали 100% результатов в Google PageSpeed ​​Insights. Или как можно ближе к этому высшему баллу.

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

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

Это изображения, элементы страницы, слишком много текста, плохой код или все вышеперечисленное?

Используйте инструмент Google PageSpeed ​​Insights, чтобы выяснить, каковы ваши следующие шаги.

Обычно изображения составляют основную часть вашей работы.

Начните со сжатия и оптимизации изображений с помощью плагина или компрессора изображений веб-сайта.

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

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

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

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

Получение идеальных 100% результатов в Google PageSpeed ​​Insights может дать вашему сайту импульс, необходимый для успеха.

Какие лучшие способы вы нашли для увеличения скорости вашего сайта?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
  • Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *