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


Содержание материала:

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

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

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

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

1. Поиск слабых мест и получение показателей

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

Для проведения данной операции можно воспользоваться программой Fiddler, HttpWatch, Firebug, панель Web developer браузера Internet Explorer (начиная с 8-й версии) и много других.

Рисунок 1. Внешний вид профайлера из панели Web developer браузера Internet Explorer

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

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

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

Если у вас много используется достаточно много изображений, то оптимизация их размера позволит сильно сократить время загрузки и объем загружаемых данных, а в итоге повысить производительность сайта. Основная задача по оптимизации изображений сводится к использованию подходящего графического формата (JPG, GIF или PNG) подходящего размера. Кратко – для изображений с большим количеством цветов нужно использовать формат JPG, для остальных GIF или PNG.

Для сравнения, возьмем файл размером 250х188

JPG, качество 60 GIF, 128 цветов PNG-8, 128 цветов
Размер: 12 Кб Размер: 28 Кб Размер: 25 Кб

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

3. Минимизация CSS и Javascript файлов

При верстке файлы CSS можно вводить свойства стилей как удобно, но для публикации файлов в интернете рекомендуется пользоваться CSS-минимизаторами (Online CSS Optimizer/Optimiser, Clean CSS …), многие из которых имеют онлайн реализацию. Суть работы CSS минимизатора сводится к вытягиванию текста в строку, удаляя лишние пробелы. Для примера, есть у вас такой класс someclass, записанный в читабельном виде.

Для снижения объема можно сделать файл менее читабельным, собрав все в одну строку:

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

Аналогично нужно поступить и с JavaScript файлами. Для их сжатия есть такие утилиты, как JSMIN, YUI Compressor, JavaScript Code Improver.

4. Снижение числа HTTP-запросов за счет объединения JavaScript и CSS файлов

Для каждого файла стилей CSS и JavaScript на сервер отправляется отдельный HTTP-запрос на его загрузку. Потому для публикации рекомендую сократить до минимума файлы, собрав стили и скрипты JavaScript соответственно в 1 файл стилей и в 1 JS-файл (ну может 2 файла – это как получится).

5. Снижение числа HTTP-запросов за счет объединения маленьких изображений в один файл

Один файл размером 4 килобайта грузится быстрее, чем 4 файла по 1 килобайту, т.к. в первом случае число HTTP-запросов сокращается в 4 раза. Потому лучше воспользоваться созданием одного файла с иконками (см.Рис.3) и через CSS описать background-position для элементов.

Рисунок 3.Файл иконок для сайта

6. Включение сжатия данных на стороне сервера

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

7. Загрузка JavaScript со сторонних быстрых серверов

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

У Google есть быстрый хостинг для таких фреймворков. С него можно загружать тот же jQuery либо стандартным методом:

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

Пять способов ускорить время загрузки страниц

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

1. Используйте YSlow для отслеживания времени загрузки страниц

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

Перед тем как мы начнём, вам необходимо установить YSlow, если вы уже конечно этого не сделали. YSlow — это расширение к Mozilla Firefox, которое вы сможете найти на этой странице:

Теперь давайте откроем какой-то сайт. Допустим Six Revisions, для того чтобы данные у нас были примерно одни и те же (просто откройте данный сайт в новой вкладке вашего браузера).

В нижней правой стороне вашего браузера, у вас находится специальная панель с иконкой (смотрите рисунок 1). Чуть поодаль данной панели, после загрузки страницы, рядом с ‘YSlow’ вы увидите число. Данное число – это время загрузки данной страницы в секундах в вашем браузере. Нам необходимо, чтобы данное число было как можно меньше.

Самыми часто встречаемыми «тормозилами» являются следующие объекты или операции:

  • Слишком много HTTP запросов
  • Не сжатые файлы JavaScript
  • Отсутствие времени истечения заголовков для графических файлов

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

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

Используем YSlow на полную

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

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

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

Но люди, как правило, не используют CDN (что является довольно-таки дорогим удовольствием).

Классификация типов ошибок

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

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

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

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

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

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

Избегайте CSS выражений: я лично никогда не использовал CSS выражения (ещё их называют динамическими свойствами). Данные выражения являются собственной концепцией программирования для IE (такие как условные выражения) в CSS. Технология, которая используется в IE8, да и во всех остальных версиях больше поддерживаться не будет, так что в любом случае придётся завязывать с данным написанием CSS выражений. PHP больше подходит для подобных целей, к примеру, для того, чтобы загрузить разные CSS стили в зависимости от какого-то условия, такого как случайное число, время суток или браузер пользователя.

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

Сокращайте время DNS поиска: когда пользователь набирает имя вашего сайта в строке браузера, то тут же начинается DNS поиск IP адреса, по которому находится ваш сайт. Чем больше ваш сайт содержит внешних источников, тем больше будет занимать время DNS поиск. Как правило, один такой поиск длится 60-100 миллисекунд.

Минимизируйте JS: помимо сжатия посредством gzip, минимизация JavaScript файлов позволит вам облегчить скрипты, избавившись от ненужных пробелов, табов, и других специальных знаков, которые в совокупности увеличивают размеры файлов. Это же очевидно – чем меньше файлы, тем быстрее грузятся страницы. Для минимизирования JavaScript файлов можете использовать инструмент JSMIN.

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

Избегайте дублирования загрузки скриптов: если ваш браузер загружает скрипт более одного раза, это значительно сказывается на загрузке страницы. Математика тут не сложная. Чем больше загрузок одних и тех же файлов, тем дольше загрузка страницы. Просмотрите ваши скрипты и убедитесь, что вы не вызываете jQuery 2 или 3 раза. То же самое относится и к скриптам JS.

Что же… думаю этого достаточно. Теперь давайте перейдём к следующей вкладке YSlow, перед тем как рассмотрим некоторые другие техники, которые позволят увеличить скорость загрузки ваших страниц.

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

И наконец, перейдём к последней вкладке Stats tab. Тут вы найдёте информацию обо всех HTTP запросах, как для обычных файлов, так и для закэшированных. Значение Empty cache показывает, что данные файлы необходимо загрузить для отображения страницы. В свою очередь Primed Cache — это файлы, которые уже были закэшированы браузером пользователя. Это означает, что их скачивать не нужно.

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

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

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

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

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

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

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

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

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

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

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

3. Загружайте CSS файлы в начале, JavaScript в конце

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

Стоит также отметить:

  1. Загружайте файлы CSS в разделе прямо перед началом тега body.
  2. Подключайте JavaScript перед самым закрытием тега body.

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

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

8 способов увеличить производительность сайта на 1С-Битрикс

Что будет, если нагрузить фуру и старую клячу грузом в 1 тонну? Правильно: первый поедет на максимальной скорости, а вторая не сможет сдвинуться с места. Так и сайты: у каждого из них свои требования к хостингу, конфигурации, настройкам платформы 1С-Битрикс.

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

1. Оцените производительность

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

Что нужно знать о показателях производительности:

  • меньше 30 пунктов – забудьте про производительность и быструю загрузку страниц. Показателя «Очень быстро» вам не видать. Тормозить будет все!
  • от 30 до 60 – подойдет для небольших проектов (корпоративные сайты или интернет магазины с небольшим количеством товаров, небольшим количеством SKU и параметров в умном фильтре)
  • от 60 до 100 — конфигурация сервера приемлема, но не оптимальна. Подойдет для большинства проектов. Сайт работать будет, но не на сверхскоростях.
  • от 100 – вы молодцы: не поленились выбрать нормальную хостинг площадку! Админка летает, большие объемы данных из 1С выгружаются на ура, страницы отдаются быстро. Вы спите спокойно и даже не думаете писать в техподдерожку с жалобами на проблемы с загрузкой сайта, ни разу не видели ошибок Request timeout или 502 Bad Gateway.
  • 200 и выше – идеально!

Оценка производительности. Результаты испытания демо-стенда (тариф RED.Site-3, хостинг RedDock). Решение – универсальный интернет-магазин Аспро: Оптимус

Как протестировать сайт
Перейдите в панель производительности: Настройки → Производительность → Панель производительности. Нажмите кнопку «Тестирование производительности» и подождите несколько минут.

2. Перейдите на PHP7
3 декабря 2015 года вышла седьмая версия PHP. Она разрабатывалась с упором на увеличение производительности и уменьшение потребления памяти. Тесты это убедительно показывают ( пример 1 , пример 2 ) — прирост производительности после перехода на новое ядро составляет от 40%!
Сидеть на старых версиях PHP — осложнять жизнь пользователю и делать этот интернет хуже. Если ваш хостинг не поддерживает PHP7, меняйте его (например, на этот с бесплатным переносом). Если ваш сайт не поддерживает PHP7, срочно исправляйтесь. А еще лучше, используйте решения с поддержкой PHP7 — например, от Аспро.

3. Настройте кеширование

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

Как не надо:

  1. Оставлять настройки по умолчанию (120 секунд).
    Почему: первый посетитель заходит на страницу товара. Формируется кеш. Второй посетитель заходит на сайт через час. Кеш нужно формировать заново — его время истекло. В итоге кеш генерируется каждый раз при открытии страницы. Прироста производительности и скорости не просто нет — она даже снижается.
  2. Не соотносить время жизни кеша с частотой обновления данных на сайте и посещаемости сайта.
  3. Задавать для отдельных разделов (новости, статьи) огромное время кеширования.

Как надо — в зависимости от частоты обновления данных и посещаемости сайта:

  1. Цены на сайте обновляются вручную или несколько раз в неделю.
    Рекомендуемое время кеширования: не менее 172800 секунд (2 суток).
  2. Цены на сайте обновляются один раз в день, выгрузка из 1С или другой системы складского учета происходит ночью.
    Рекомендуемое время кеширования: 86400 секунд (1 сутки).
  3. Нечасто, но бывает: цены обновляются через реал-тайм обмен с 1С и бывает, что несколько раз в течение дня.
    Рекомендуемое время кеширования: 7200 секунд (2 часа).

4. Создайте фасетные индексы для умного фильтра

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

5. Проанализируйте и создайте индексы в базе данных

Индексы анализируются и создаются здесь: Настройки → Производительность → Индексы → Анализ индексов.

Нажмите на кнопку «Выполнить анализ собранных SQL запросов». Если появившиеся индикаторы зеленые, все в порядке: индексы созданы. Если индикаторы желтые, создайте их самостоятельно. Инструкция в мануалах 1С-Битрикс

6. Отключите неиспользуемые модули

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

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

  • AD/LDAP интеграция (ldap)
  • Push and Pull (pull)
  • Wiki (wiki)
  • А/B-тестирование (abtest)
  • Веб-аналитика (statistic)
  • Веб-кластер (cluster)
  • Веб-мессенджер (im)
  • Веб-сервисы (webservice)
  • Дизайнер бизнес-процессов (bizprocdesigner)
  • Документооборот (workflow)
  • Календарь событий (calendar)
  • Конструктор отчетов (report)
  • Менеджер идей (idea)
  • Мобильная платформа (mobileapp) — если не подключено мобильное приложение
  • Мобильное приложение для интернет-магазина (eshopapp) — если не подключено мобильное приложение
  • Обучение (learning)
  • Перевод (translate)
  • Почта (mail)
  • Техподдержка (support)
  • Универсальные списки (lists)
  • Управление масштабированием (scale).

Как это сделать: перейдите в настройки модулей Рабочий стол → Настройки → Настройки продукта → Модули и отключите лишние. Инструкция в базе знаний

7. Настройте CDN

Еще одна неоднозначная вещь, которая может как разогнать сайт, так и заставить его хорошенько притормозить. Что это такое?

Теория:
«Модуль Ускорение сайта (CDN), который позволяет загружать весь статический контент вашего сайта (картинки, файлы стилей css, скрипты js) через сеть дистрибуции контента ( Content Delivery Network или Content Distribution Network, CDN ). Тем самым значительная часть ресурсов сайта загружается посетителем с ближайшего к нему сервера. Это позволяет увеличить скорость загрузки страниц до нескольких раз.
Также подключение CDN снижает нагрузку на основные серверы сайта. Так как весь статический контент загружается посетителями вашего сайта не напрямую с ваших серверов, а с узлов CDN, которые умеют очень эффективно кэшировать контент, снижается количество обращений непосредственно к вашим серверам» ( отсюда )

Настраивается CDN здесь: Настройки → Облако 1С-Битрикс → Ускорение сайта (CDN).

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

8. Включите объединение и сжатие CSS и JS-файлов

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

6 бесплатных инструментов для повышения производительности

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

Многие фрилансеры в стремлении увеличить свои доходы полагают, что для того, чтобы больше зарабатывать, нужно больше работать. Их To-Do-списки забиты таким количеством дел, что их практически невозможно сделать в течение рабочего дня. Такое трудолюбие, конечно, очень похвально, но, как однажды сказал Стив Джобс, работать нужно не 12 часов в сутки, а головой. Правильная организация труда позволяет решать самые сложные задания без особого напряжения, а с умом подобранные инструменты могут существенно сократить время работы над проектами. FreelanceToday предлагает вашему вниманию 6 инструментов для повышения производительности.

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

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

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

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

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

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

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

Одним из главных преимуществ работы фрилансера является свободный график. Можно работать тогда, когда удобно, даже глубокой ночью. К сожалению, клиенты в основном работают днем, соответственно, они ожидают получить все сообщения и файлы в рабочее время. Boomerang является отличным инструментом, с помощью которого можно планировать отправку электронных писем. Если фрилансер предпочитает работать вечером или ночью, он может написать все письма заранее, указать время отправки сообщения и нажать кнопку «Отправить позже». Заказчик получит все данные в удобное для него время. Также с помощью Boomerang можно сократить время работы с почтовыми архивами. Если заказчик ждет ответа фрилансера через неделю, можно отметить нужную переписку и приложение пришлет напоминание о необходимости ответить. Приложение Boomerang работает только с учетными записями Gmail.

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

ВЫВОД

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

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

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

Алгоритмы ранжирования Google учитывают скорость загрузки страницы

9 апреля 2010 года Google официально объявили о том, что в их алгоритмах учитывается скорость загрузки страницы. Слухи ходили задолго до этого — когда компания стала подчеркнуто внимательно относиться к скорости, выпуская продукты Chrome (быстрый браузер) и SPDY (быстрый протокол передачи веб-контента) и продвигая сверхскоростные широкополосные каналы. В этой статье мы постараемся объяснить, как Google определяет скорость, и как вы можете проверить скорость загрузки своих страниц и увеличить ее.

Мы считаем, что скорость загрузки страницы — отличное дополнение к остальному списку факторов, определяющих ранжирование страниц в Google, и на это есть две основные причины:

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

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

Как Google определяет скорость?

Два основных метода анализа загрузки страницы:

1. Отклик Google-боту. GoogleBot — это программа-агент, которая сканирует ссылки по всей сети, распределяя страницы и контент по категориям и отправляя все это Google, который обрабатывает полученные данные с помощью собственного алгоритма. Google-бот просто собирает информацию, он не анализирует и не оценивает ее. Однако у него есть некоторые ограничения относительно того, насколько полно он просканирует ту или иную страницу, поскольку просмотр миллиардов страниц занимает много времени. Это одна из причин, по которым рекомендуется иметь «чистый» код, размещать хороший контент в верхней части страницы и помещать повторяющийся код (например, CSS) в отдельные файлы.

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

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

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

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

2. Page Speed — это плагин для браузеров Firebug/Firefox, который определяет, насколько хорошо грузится страница, и дает рекомендации по ее исправлению.

3. YSlow — еще один плагин для Firebug/Firefox, анализирующий скорость и предоставляющий рекомендации.

Что это изменение алгоритма означает для вас

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

6 способов повысить скорость загрузки страниц и увеличить рейтинг

1. Оптимизируйте изображения: крупные картинки можно обрезать, сжать и увеличить скорость их загрузки.
2. Вместо фоновых изображений используйте просто цвета: так загрузка будет происходить быстрее.
3. Пользуйтесь кэшем: кэширование удобно для пользователей, поскольку картинки и другие статичные файлы загружаются только при первом посещении, а при последующих этого уже не требуется.
4. Загружайте внешний Javascript и вызываемые объекты в последнюю очередь: худшее, что вы можете сделать — заставить своих посетителей ждать, пока загрузится весь контент одновременно. По возможности сделайте так, чтобы ваш контент грузился первым, а внешний контент — после него.
5. Пользуйтесь отдельными файлами для повторяющегося кода: отдельные файлы чаще всего используются с таблицами стилей CSS и позволяют облегчить html-код страницы (меньше строк кода), а также дают центральный, легко находимый файл для внесения изменений в важные участки кода (например, в таблицы стилей).
6. Для организации страниц используйте стили CSS вместо таблиц HTML: прежде чем загружать саму таблицу, веб-браузеры (IE, Firefox и др.) ждут, пока загрузится весь ее контент. CSS делает этот процесс быстрее (и проще для обновления).

Что делать дальше

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

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

Руководство по повышению скорости и производительности WordPress

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

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

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

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

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

Почему скорость важна для вашего сайта?

Исследования показывают, что с 2000 по 2020 год средний уровень внимания человека снизился с 12 секунд до 7 секунд.

Что это значит для вас как владельца веб-сайта?

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

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

Согласно тематическому исследованию StrangeLoop, в котором участвовали Amazon, Google и другие более крупные сайты, 1 секунда задержки загрузки страницы может привести к 7%-ному снижению конверсии, на 11% меньше просмотров страниц и снижению удовлетворенности клиентов на 16%.

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

Чтобы подвести итог, если вы хотите больше трафика, подписчиков и дохода от своего сайта, то вы должны сделать ваш сайт на WordPress FAST!

Как проверить скорость вашего сайта на WordPress?

Часто начинающие считают, что их сайт в порядке, потому что он не чувствует себя медленным на их компьютере. Это ОГРОМНАЯ ошибка.

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

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

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

Именно поэтому я рекомендую вам протестировать скорость вашего сайта с помощью инструмента Pingdom.

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

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

Хорошее время загрузки страницы составляет менее 2 секунд.

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

Что замедляет ваш сайт?

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

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

Основными причинами для медленного веб-сайта WordPress являются:

Веб-хостинг. Если ваш веб-хостинг-сервер настроен неправильно, это может навредить вашей веб-странице.

  • Конфигурация WordPress. Если ваш сайт WordPress не поддерживает кешированные страницы, он перегрузит ваш сервер, что приведет к замедлению работы вашего сайта или к сбою.
  • Размер страницы. Основные изображения, которые не оптимизированы для Интернета.
  • Плохие плагины. Если вы используете плохо закодированный плагин, это может значительно замедлить работу вашего сайта.
  • Внешние скрипты. Внешние скрипты, такие как объявления, загрузчики шрифтов и т. д., также могут иметь огромное влияние на производительность вашего сайта.

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

Важность хорошего хостинга WordPress

Ваш провайдер, который предоставляет услуги хостинга – играет важную роль в эффективности сайта. Хороший хостинг-провайдер, такой как Timeweb или Shneider-Host, принимает дополнительные меры для оптимизации вашего сайта для повышения производительности.

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

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

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

Для корпоративного хостинга WordPress я рекомендую использовать Shneider-Host, потому что они лучшие в бизнесе.

Ускорение WordPress в простых шагах (без кодирования)

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

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

Я покажу вам, как можно ускорить работу сайта WordPress всего за несколько кликов (без необходимости кодирования).

Установите плагин кэширования в WordPress

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

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

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

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

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

Для WordPress доступно много плагинов кеширования, но я рекомендую использовать плагин WP Super Cache. Его не сложно настроить, а ваши посетители сразу заметят разницу в скорости загрузки.

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

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

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

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

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

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

На своем сайте я использую только два формата изображения: JPEG и PNG.

Теперь вам может быть интересно: какая разница?

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

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

Итак, мы решаем, какой формат изображения выбрать?

  • Если у нашей фотографии или изображения много разных цветов, мы используем JPEG.
  • Если это более простой образ или нам нужно прозрачное изображение, мы используем PNG.
  • Большинство моих изображений – это JPEG.

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

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

Оптимальная оптимизация производительности WordPress

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

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

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

Обновите свой сайт

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

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

Использовать анонс статьи на главной странице и архивах

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

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

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

Вы можете перейти в Настройки – Чтение и выбрать “Анонс” в пункте “Для каждой статьи в RSS-ленте отображать” вместо “Полный текст”.

Разбить комментарии на страницы

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

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

WordPress поставляется со встроенным решением для этого. Просто зайдите в Настройки – Обсуждения и установите флажок рядом с параметром “Разбивать комментарии верхнего уровня на страницы”.

Используйте сеть доставки контента (CDN)

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

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

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

CDN – это сеть, состоящая из серверов по всему миру. Каждый сервер будет хранить “статические” файлы, используемые для создания вашего сайта. Статические файлы – это неизменные файлы, такие как изображения, CSS и JavaScript, в отличие от ваших страниц WordPress, которые являются “динамическими”, как объяснялось выше.

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

Вы можете увидеть, как это работает в этой инфографике.

Не загружайте видео прямо в WordPress

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

Но вы НИКОГДА не должны этого делать!

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

Вместо этого вы должны использовать услуги видеохостинга, такие ​​как YouTube, Vimeo, RuTube и т. д. И пусть они позаботятся о тяжелой работе. У них есть пропускная способность!

WordPress имеет встроенную функцию встраивания видео, поэтому вы можете скопировать и вставить URL своего видео прямо в свой пост, и он внедрится автоматически.

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

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

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

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

Используйт Faster Slider Plugin

Слайдеры – еще один общий элемент веб-дизайна, который может сделать ваш сайт медленным.

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

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

Вот показатели других популярных плагинов слайдера.

Плагин слайдера Время загрузки страницы Запросы Размер страницы
Soliloquy 1.34 сек. 26 945 KB
Nivo Slider 2.12 сек. 29 MB
Meteor 2.32 сек. 27 1.2 MB
Revolution Slider 2.25 сек. 29 1 MB
LayerSlider 2.12 сек. 30 975 KB

Используйте Faster Gallery Plugin

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

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

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

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

Плагин слайдера Время загрузки страницы Запросы Размер страницы
Envira Gallery 1.08 secs 24 1MB
Foo Gallery 1.89 secs 23 357.1KB
NextGEN 1.88 secs 33 518KB

Точная настройка WordPress для скорости (для опытных)

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

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

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

Разделить длинные статьи на страницы

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

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

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

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

Уменьшить внешние HTTP-запросы

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

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

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

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

Сокращение запросов к базе данных

Примечание. Этот шаг является немного более техническим и потребует базовых знаний о файлах шаблонов PHP и WordPress.

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

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

Ускорение WordPress — 18 советов по оптимизации сайта

WordPress – отличная CMS для сайта, но она довольно медленная из коробки, если ее не оптимизировать правильно. В этом руководстве, составленном KeyCDN, мы рассмотрим основные способы оптимизации и ускорения сайта на WordPress.

WordPress также одна из самых популярных CMS для сайтов компаний. Более половины сайтов, на которых можно определить систему управления контентом, работают на WordPress. А это более чем 74 миллиона сайтов.

По данным W3Techs, WordPress используется на 60% сайтов с известной CMS. Это 31,6% всех сайтов в мире.

Инструменты для измерения скорости сайта

Один из самых важных инструментов при работе над оптимизацией скорости сайта — тестировщики скорости загрузки (page speed tool). Мы рекомендуем проводить измерения перед началом работ по оптимизации, и в процессе, после каждого внесенного изменения. Это даст лучшее понимание, изменения каких параметров оказывают положительное или отрицательное влияние на производительность.

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

Важность скорости работы сайта в 2020 году

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

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

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

Сервис Google Impact calculator позволяет оценить примерный уровень роста годового оборота в зависимости от скорости загрузки сайта.

Например, если вы ускорите загрузку сайта с 2,2 секунд до 1,4 секунд, при трафике 200 000 уников в месяц, среднем чеке $50 и конверсии 3%, вы можете получить дополнительно $146 000 годового дохода.

Техники ускорения WordPress, актуальные в 2020 году

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

1.Выбор качественной темы/фреймворка

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

Нужно очень тщательно выбирать темы для покупки на маркетплейсах типа ThemeForest или Creative Market. Большинство тем там сделано довольно некачественно, потому что разработчики гонятся за универсальностью и пихают в тему все подряд. Это дает им больше продаж, но темы в итоге выходят тяжелыми и медленными. Зато с красивым интерфейсом покраски кнопок из админки. На таких площадках важнее найти адекватных разработчиков, и пользоваться их темами. Например, Total WordPress theme от ребят из WPExplorer неплохая тема. Имея довольно богатый функционал, сайт на ней, наполненный контентом, загружается в пределах 800 мс.

Фреймворки Thesis Theme framework и Genesis тоже имеют хорошую репутацию, благодаря своей скорости и качеству кода.

2. Настройка кэширования WordPress

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

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

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

Для кэширования сайта на WordPress чаще всего используются следующие плагины:

  • Cache Enabler
  • W3 Total Cache
  • WP Super Cache
  • WP Rocket

Кэширование в браузере – включаем Expire Headers в WordPress

Усилить эффект браузерного кэширования ресурсов можно с помощью технологии leverage browser caching, добавив заголовки expire. Они говорят браузеру, загружать конкретные файлы с сервера или взять их из кэша браузера. Это позволит уменьшить количество запросов к серверу. Некоторые кэширующие плагины WordPress позволяют включить expire headers в настройках, но эту функцию также можно активировать, добавив следующий код в файл .htaccess .

Кэширование WordPress на сервере

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

Предзагрузка (prefetch) популярных доменов

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

Активировать прездагрузку (prefetch) в WordPress можно путем добавления следующего кода в файл header.php между тэгами и . Это неблокирующий загрузку страницы процесс, и он исполняется, когда есть возможность. Приведем некоторые примеры:

Предварительная загрузка шрифтов Google

Предварительная загрузка Google Code (jQuery)

Предварительная загрузка Google Analytics

Remove Query Strings – Удаляем строку запроса со статических ресурсов

Эта настройка может дать положительный эффект, так как окончания файлов типа ?ver=4.7 могут привести к проблемам с кэшированием статики, особенно при использовании прокси и CDN. Удалить Query Strings в WordPress можно несколькими способами.

  • Внести следующие изменения в файл functions.php – вставить функцию, которая удалит query strings.
  • Если вы используете кэширующий плагин типа W3 Total Cache, для удаления query strings в нем может быть соответствующая настройка.
  • Существуют специальные плагины для WordPress, основная функция которых заключается в удалении query strings, такие как Query Strings Remover и Remove Query Strings From Static Resources.

3. Подключение CDN (Content Delivery Network)

Использование CDN может принести пользу любому сайту, независимо от его размера и количества посетителей. Content Delivery Network загружает статические файлы вашего сайта (CSS, Javascript, изображения) с ближайшего к пользователю сервера, снижая время загрузки сайта. Кроме скорости, использование CDN положительным образом влияет на пользовательский опыт посетителей сайта, снижает показатель отказов, увеличивает время, проведенное на сайте, конверсию и даже SEO.

Для использования CDN на WordPress существуют специальные плагины, как правило, провайдер CDN разрабатывает плагин под свою сеть, например, KeyCDN или Селектел.

Загружайте через CDN все, что можно

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

На примере ниже можно видеть, как 100% статики грузятся с CDN

Граватары также можно грузить с CDN.

4. Оптимизация базы данных WordPress

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

Отключение и лимит ревизий постов WordPress

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

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

Отключение редакций постов WordPress

Для того, чтобы отключить создание редакций записей в WordPress, достаточно добавить следующий код в файл wp-config.php . Он изменит интервал автосохранения записей с 60 секунд до 5 минут и отключит создание ревизий. По умолчанию останется только одна предыдущая редакция записи.

Если вы не хотите ковыряться в коде, можно сделать то же самое с помощью бесплатного плагина Disable Post Revision.

Ограничение количества редакций записей в WordPress

Для того, чтобы ограничить количество редакций записей в WordPress, достаточно добавить следующий код в файл wp-config.php . Он изменит интервал автосохранения записей с 60 секунд до 5 минут и установит количество сохраняемых редакций до трех. Можно задать количество ревизий любым числом.

Удаление старых редакций записей из базы данных WordPress

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

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

Следите за ограничением на 100 страниц в WordPress

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

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

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

5. Оптимизация изображений с помощью сжатия

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

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

6. Сжатие Gzip/Brotli

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

GZIP позволяет сохранить от 50 до 80% трафика, тем самым значительно ускорив скорость загрузки сайта. – Check GZIP compression

Apache

Настроить сжатие на сервере Apache можно, добавив следующий код в файл .htaccess

Nginx

Если вы используете веб-сервер Nginx, сжатие активируется путем включения следующих инструкций в файл настроек nginx.conf .

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

7. Уменьшение количества плагинов WordPress

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

Есть плагины, которые позволяют оценить степень влияния установленных плагинов на скорость работы сайта, но они устарели и не поддерживаются разработчиками. Это плагины P3 Plugin Performance Profiler и WP Performance Profiler

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

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

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

8. Оптимизация производительности веб-шрифтов

По данным исследований, в 2020 году 57% сайтов используют не стандартные шрифты, это рост на 850% по сравнению с 2011 годом. Очень важно использовать только те шрифты, которые нужны, в форматах WOFF и WOFF2. Сервисы типа Typekit base64 преобразуют шрифты во все возможные форматы, замедляя тем самым скорость загрузки сайта.

По результатам тестов, шрифты Google показывают хороший уровень производительности, потому что используют CDN для загрузки и предоставляются только в форматах WOFF. Open Sans — самый быстрый из 10 популярных шрифтов.

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

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

Можно пойти еще дальше и поместить все шрифты в отдельный css файл и хранить их в localStorage. Браузерный кэш сбрасывается довольно часто, особенно на мобильных устройствах. А сохраняя файлы в localStorage, можно хранить их у пользователя постоянно. Smashing Magazine сэкономили 700 мс при загрузке страницы с помощью localStorage.

Рекомендуем использовать сервис localFont tool от Jaime Caballero. Можно перетащить свой шрифт в окно и конвертировать его в CSS и Javascript для размещения на сайте WordPress.

9. Оптимизация иконок Font Awesome

Если вы используете Font Awesome, можно ускорить их загрузку, поместив файлы на CDN. Если вы используете тему WordPress с Font Awesome, ее придется немного доработать.

Хранение Font Awesome на своей CDN уменьшит количество запросов к серверу и поисков DNS.

10. Lazy Load для изображений, видео и Disqus

Lazy loading – это технология загрузки объекта только в тот момент, когда он нужен. В случае WordPress это означает, что элемент не загружается до тех пор, пока пользователь не прокрутит страницу до него. Lazy load можно применить для любых элементов страницы, от изображений и видео, до блока комментариев Disqus.

Отложенная загрузка изображений

Для отложенной загрузки картинок на сайте WordPress можно использовать хороший бесплатный плагин BJ Lazy Load. Он заменяет все изображения, ярлыки и фреймы на странице плейсхолдерами и загружает контент по мере приближения его к границе окна при прокрутке пользователем. Это также работает и для текстовых виджетов. Если вы пользуетесь плагином WP Rocket, в нем есть настройки для включения Lazy Load.

Отложенная загрузка видео

Для отложенной загрузки видео на WordPress можно использовать бесплатный плагин Lazy Load for Videos. Он заменяет встроенное видео Youtube и Vimeo кликабельным изображением превью. Если у вас на сайте много видео, этот плагин поможет значительно улучшить скорость загрузки страниц.

Отложенная загрузка Disqus

Disqus – это очень удобная система комментирования, которая очень хорошо борется со спамом. Но стандартный плагин Disqus создает более 10 HTTP запросов, которые могут значительно замедлить загрузку страницы. Чтобы решить эту проблему, разработчик James Joel сделал плагин Disqus Conditional Load, который откладывает загрузку Disqus. Он в том числе не вредит SEO, то есть поисковые системы все равно могут индексировать комментарии.

11. Минификация и объединение CSS и Javascript файлов

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

Минификация

Минификация файлов означает удаление лишних символов из файлов HTML, Javascript, и CSS, таких как:

  • Пробелы
  • Переносы строки
  • Комментарии
  • Разделители блоков

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

Объединение (конкатенация)

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

Для минификации и конкатенации файлов в WordPress можно использовать плагины, например, WP Rocket

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

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

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

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

Граватары

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

Есть несколько способов решения этой проблемы.

Вариант 1 — отключить граватары

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

Для этого нужно установить бесплатный плагин WP User Avatar. И в настройках включить опцию «Отключить Граватары и использовать только локальные аватары»

Вариант 2 – использовать Disqus

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

Отключение Emoji

С выходом WordPress 4.2 появилась поддержка Emoji. Это привело к добавлению лишнего скрипта wp-emoji-release.min.js?ver=4.3.1 в хедере. Этот скрипт создает дополнительный HTTP-запрос, от которго нужно избавиться, если вы не собираетесь использовать Emoji.

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

В настройках «Написание» отключите “convert emoticons”.

Вариант 1 – WordPress плагин

Установите бесплатный плагин для WordPress “Disable Emojis” by Ryan Hellyer. Этот плагин отключает функционал emoji в WordPress 4.2.

Вариант 2 – функция WordPress

Чтобы не перегружать сайт лишними плагинами, можно избавиться от emoji путем добавления в functions.php следующего кода:

Отключение скриптов на странице

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

Отключаем Embeds

С версии 4.4 в WordPress загружается новый скрипт wp-embed.min.js , который позволяет упростить вставку видео, изображений, твитов, и т.п. Например, WordPress автоматически преобразует URL в YouTube вставку и сделает превью в визуальном редакторе. Но не всем нужна подобная функция, можно просто скопировать готовый код для вставки с YouTube или Twitter. Проблема с этой функцией в том, что она загружает свой скрипт на каждой странице. Есть несколько способов избавиться от него.

Вариант 1 – WordPress плагин

Установите WordPress плагин “Disable Embeds” by Pascal Birchler. Он делает следующее:

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

Вариант 2 – функция WordPress

Можно добавить следующий код в файл functions.php, это отключит функцию вставки.

Отключаем комментарии

Независимо от того, используете вы или нет систему комментариев WordPress, скрипт comment-reply.min.js подключается на каждой странице сайта. Это не всегда оправдано, на сайте могут быть не нужны комментарии вообще или подключен Disqus. Тогда можно отключить этот ненужный скрипт.

Для этого можно добавить следующий код в файл functions.php .

13. Отключение хотлинков

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

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

14. Отключение Pingback и Trackback

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

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

15. Задание размеров изображений

Все видели похожие рекомендации при проверке скорости сайта Google Pagespeed:

Optimization suggestion: “By compressing and adjusting the size of … you can save 5.8 KB (51%).”

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

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

16. Решение проблемы медленной загрузки admin-ajax.php

В WordPress 3.6 бал представлен WordPress Heartbeat API, который позволил WordPress общаться с сервером и браузером. Это улучшило управление сессиями, контроль ревизий и автосохранение.

WordPress Heartbeat API использует admin-ajax.php для AJAX запросов из браузера. Это может привести к повышенной нагрузке на процессор и большому количеству вызовов PHP. Например, если оставить открытой страницу с админкой, она будет посылать POST запросы к этому файлу постоянно с заданным интервалом.

Существует бесплатный плагин Heartbeat control, который позволяет задать частоту обращений WordPress heartbeat API.

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

Таким образом можно вычислить, какой плагин выполняет запрос. В этом примере это был плагин соцсетей, для которого не было включено кэширование. Как только кэширование плагина активировали, постоянные обращения к admin-ajax.php прекратились.

17. Настройка MySQL сервера

Оптимизация работы сервера баз данных MySQL также очень важна для быстрой работы сайта на WordPress. Настройки MySQL в большой степени зависят от конфигурации серверного окружения на вашем хостинге, поэтому нет универсальных рекомендаций по оптимизации MySQL. Обычно настройки MySQL/MariaDB находятся в файле /etc/my.cnf . Вот несколько параметров, на значение которых стоит обратить внимание:

  • tmp_table_size
  • query_cache_type
  • query_cache_size
  • query_cache_size
  • join_buffer_size
  • max_heap_table_size

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

18. Выбор качественного хостинга для WordPress

И последний, но немаловажный фактор оптимизации сайта на WordPress — выбор надежного производительного хостинга. Не рекомендуем использовать дешевые шаред хостинги, которые забиты сайтами. Лучшим решением будет использовать VPS или WordPress хостинг с поддержкой.

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

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

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

Хотите попасть в число избранных и достичь поставленных целей?

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

Быстродействие сайта — один из важных показателей, который положительно влияет на ранжирование в поисковых системах и конверсию.

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

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

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

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

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

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

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

  • 1 секунда — отличный, но труднодостижимый результат.
  • 2–3 секунды — стандартное время отклика большинства успешных ресурсов.
  • 3–5 секунд — маленькая, но для некоторых проектов терпимая скорость;
  • 6–10 секунд — столь низкий показатель негативно влияет на продвижение;
  • от 11 секунд — плачевный результат, при котором надо срочно ускорять сайт.

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

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

Лучше всего об оптимальном именно для вас показателе расскажет Google PageSpeed Insights. Постарайтесь получить хотя бы не менее 70–80 баллов — это средняя планка, равная 2–4 секундам. В первую очередь обратите внимание на следующие метрики:

  • time to first byte — время получения начальных сведений от сервера;
  • load time — скорость загрузки главных элементов;
  • page size — размер (общий вес) страницы;
  • requests — количество запросов к базе данных необходимых для формирования страницы.

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

От чего зависит скорость загрузки?

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

Итак, полный цикл загрузки при первом посещении выглядит подобным образом:

  1. DNS-запрос по названию ресурса.
  2. Подключение к серверу по IP-адресу.
  3. Установка защищенного соединения при использовании HTTPS.
  4. Запрос HTML-страницы по url и ожидание ответа сервера.
  5. Загрузка HTML.
  6. Разбор файла на стороне браузера, создание очереди запросов.
  7. Загрузка и анализ CSS-стилей.
  8. Загрузка и запуск JS-кода.
  9. Начало отрисовки страницы, выполнение JavaScript (JS).
  10. Загрузка web-шрифтов.
  11. Загрузка картинок и других медиа.
  12. Окончание отрисовки, работа отложенного JS-кода.

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

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

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

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

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

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

Индексация

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

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

Совет здесь один: желаете избавиться от проблем с индексацией? Пора увеличить скорость загрузки сайта!

Ранжирование

Быстродействие веб-проекта считается одной из 200 метрик, влияющих на ранжирование ресурсов в поисковой выдаче. По сути, оно представляет собой неотъемлемую часть юзабилити — удобства сайта для пользователей.

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

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

Важно! Согласно исследованиям американской компании MOZ, четкая взаимосвязь между скоростью полной загрузки страницы и ее позицией в «Гугл» отсутствует. А вот быстрота получения первого байта (показатель Time To First Byte) 100% влияет на ранжирование: чем резвее ответ сервера, тем выше сайт в выдаче.

Конверсия

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

Многочисленные опросы говорят о том, что 47% готовы ждать полную отрисовку не более двух секунд, задержка даже в одну лишнюю секунду чревата потерей лояльности на 16%. К тому же 88% участников исследования заявили: они вряд ли вновь воспользуются сайтом после неудачной попытки. Кстати, мобильные пользователи не менее требовательны к производительности ресурсов (85% из них хотят, чтобы страницы открывались так же быстро, как и на компьютере).

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

Лучшие инструменты для мониторинга скорости загрузки

Готовы изменить свой web-проект к лучшему? Прежде всего, надо проверить показатели при помощи специальных сервисов.

  • Google PageSpeed Insights

Простой и удобный анализатор для мгновенной оценки клиентской оптимизации. Перейдите по ссылке https://developers.google.com/speed/pagespeed/insights/, введите в поле адрес интересующего вас сайта и нажмите «Анализировать».

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

FCP (First Contentful Paint) — первая отрисовка контента. Низкий показатель указывает на вероятные проблемы с самим соединением либо размерами используемых ресурсов.

Что касается DCL (DOMContentLoaded), то это не менее значимый параметр, означающий полную загрузку HTML и построение DOM-дерева.

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

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

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

  • Отчет Google Аналитики

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

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

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

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

Пользоваться им просто: надо перейти на https://gtmetrix.com/ и ввести в поле адрес сайта, а затем нажать на кнопку Analyze.

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

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

А знаете ли вы? Результаты исследований Strangeloop Networks доказывают, что за последние несколько лет время загрузки web-проектов возросло на 21%. Если раньше статьи чаще всего дополнялись картинками низкого качества, то сейчас ресурсы наполнены тяжелыми элементами (первоклассными изображениями, галереями, видео, анимацией и внешними приложениями). Все это улучшает визуальное впечатление, однако замедляет работу сайта. Здесь, как и во многих других вопросах SEO, важно найти золотую середину.

Как ускорить загрузку и сохранить симпатии пользователей?

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

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

Серверная часть

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

Улучшение хостинга

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

Настройка сервера Nginx

Выделенный веб-сервер Nginx — отличный способ повысить производительность сайта. Особенно хорош он при обработке статического контента (до 600 тысяч запросов в секунду на Linux), впрочем, даже такой показатель можно улучшить с помощью правильной настройки.

  • Удаление неиспользуемых nginx-модулей

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

Вам нужно выполнить сборку с такими командами:

В итоге вы получите Nginx с уже отключенными модулями Autoindex и SSI, которые в большинстве случаев бесполезны. Запустив скрипт configure с флагом -help , вы узнаете, какие еще модули можно безболезненно исключить из веб-сервера.

  • Работа с секцией Server

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

# vi /etc/nginx/nginx.conf
# Таймаут при чтении тела запроса клиента
client_body_timeout 10 ;

# Таймаут при чтении заголовка запроса клиента
client_header_timeout 10 ;

# Таймаут, по истечению которого keep-alive соединение с клиентом не будет закрыто со стороны сервера
keepalive_timeout 5 5 ;

# Таймаут при передаче ответа клиенту
send_timeout 10 ;

  • Сжатие данных

Обязательная процедура для тех, кто желает повысить скорость загрузки сайта. Так вы сможете уменьшить размер пересылаемого трафика.
Откройте файл конфигурации, который находится по адресу / etc / nginx / nginx.conf и добавьте в секцию http < … >следующую информацию:

  • Кэширование статических файлов

В том же файле необходимо найти конструкцию Server и дописать туда:

* ^.+. ( jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js ) $ <
root /var/www/ user /data/www/site.ru ;
expires 7d ;

— ( expires 7d — количество дней хранения кэша на ПК пользователя).

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

Настройки сервера Apache

Самая быстрая возможность оптимизировать веб-сервер — воспользоваться модулем mod-pagespeed от Google. После его установки, соединитесь через SSH с сервером и введите такие команды:

Зайдите в директорию / var / cache / mod_pagespeed и удостоверьтесь, что модуль работает корректно. В ней должны появиться папки сайта с кэшированием запросов к Apache — все настроено автоматически.

Что делает данный инструмент? Он удаляет лишние пробелы и атрибуты HTML-документов, объединяет несколько JS, CSS и HTML файлов в один, конвертирует картинки под установленный в тегах img / > размер, а также способствует оптимизации другими способами.

Gzip — сжатие на стороне сервера

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

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

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

Откройте файл .htacess и добавьте в него код:

Или прописать в нем такие строки:

Внимание! Gzip сжимает файлы от одного до девяти единиц. Оптимальным параметром считается пятерка.

CDN для загрузки популярных JavaScript библиотек

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

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

На Content Delivery Network часто переносят все файлы JavaScript, изображения и CSS, оставляя на основном сервере лишь файл HTML.

Настройка кэширования на стороне сервера

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

Создайте на сервере папку с любым допустимым названием (например, cache) и напишите в начале PHP-страницы следующее:

При наличии файла index_xx_yy.cache просто считайте его содержимое и выведите на экран (здесь xx — это переменная $_GET [ «page» ] , а yy — значение переменной $_GET [ «id» ] ). Если вышеупомянутого файла нет, включите в папке кэш буфер и запишите туда все процессы, запущенные на странице.

В конце после тэга не забудьте добавить:

Запишите в $buffer его содержимое, затем остановите буферизацию и очистите контент. Следующее действие предполагает открытие файла index_xx_yy.cache (если его на сервере нет, то надо создать) и запись в файл $fp значения $buffer .

Оптимизация базы данных

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

Это можно сделать вручную через phpMyAdmin хостинга (пункт SQL). Не хотите попусту тратить время? Воспользуйтесь специальными плагинами или настройте автоматическую оптимизацию. Сделать это несложно.

Установите на ПК программу Notepad++ и подключитесь через FTP к хостингу. Найдите в папке public_html файл wp-config.php и перетащите на рабочий стол. После этого откройте его с помощью Notepad++ и найдите строчку с названием базы данных. Под ней надо добавить следующее:

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

Обновите файл и перетащите его мышкой обратно на хостинг, заменив старую версию новой.

Оптимизация TCP, TLS, HTTP/2

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

TCP — популярный сетевой протокол, функционирующий на основе «окна перезагрузки». Чем выше габариты окна (количества пакетов для передачи), тем больше пропускная способность. Ваша задача — правильно рассчитать и настроить размер буфера TCP. Большинство разработчиков используют для этого параметры задержки и полосы пропускания, умноженные на два. Чтобы изменить размер буфера, используйте вызов Setsockopt в С или методы setReceiveBufferSize и setSendBufferSize в Java. Такая корректировка ориентирована на ускорение масштабных порталов и серверов. Главное — регулярно обновлять систему.

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

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

# Создаем отдельный Server для перенаправления с HTTP на HTTPS
server <
server_name example.com www.example.com ; # можно указать любые домены и поддомены
listen 1.2.3.4: 80 ; # где 1.2.3.4 — айпи вашего сервера
rewrite ^ ( .* ) https:// $host $1 permanent ; # редирект HTTP/1.1 301 Moved Permanently с http на https
>

# Прописываем основной сервер с HTTPS
server <
server_name example.com www.example.com ; # копируем из верхнего сервера
listen 1.2.3.4: 443 ssl http2 ; # вместо 1.2.3.4 вставляем IP своего сервера. http2 включаем поддержку протокола http/2

ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem ; # сертификат
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem ; # ключ

# Для кэширования запросов
keepalive_timeout 70 ; # 70 секунд держим соединение открытым
keepalive_requests 150 ; # 150 запросов максимум на одно соединение, после чего закрываем
ssl_session_cache shared:SSL:10m ; # разделяемый между всеми процессами кэш сессий на 10 байт с названием SSL. 1 Мб вмещает около 4000 сессий
ssl_session_timeout 10m ; # 10 минут — максимальное время жизни сессии

# Для улучшения безопасности соединения
ssl_prefer_server_ciphers on ; # указываем, чтобы при использовании протоколов SSLv3 и TLS серверные шифры обладали большим приоритетом, чем клиентские
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:ECDHE-RSA-DES-CBC3-SHA:ECDHE-ECDSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA ; # типы шифров
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 ; # разрешённые типы протоколов
>

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

Количество HTTP-запросов

Время открытия страницы на 80% зависит от загрузки Flash, CSS, скриптов и картинок. Уменьшение числа упомянутых элементов приводит к ускорению веб-проекта. Но как сократить количество запросов без изменения внешнего вида?
Для этого достаточно применить встроенные в страницу Inline-изображения и CSS-спрайты — комбинированные картинки, которые состоят из небольших фрагментов.
Если вы используете на странице несколько JS и CSS-элементов, их можно объединить в один файл — это действенный и простой прием.

Уменьшение редиректов

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

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

Клиентская часть

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

Настройка асинхронной загрузки

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

Ускорить сайт можно при помощи специального скрипта Google ExtSrcJs. Надо лишь заменить:

20 способов ускорить загрузку сайта в 2020 году

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

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

Снижение скорости загрузки страницы на 1 секунду влечет за собой:

  • уменьшение числа просмотров на 11%;
  • снижение показателя удовлетворенности пользователя на 16%;
  • уменьшение конверсии до 6%.

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

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

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

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

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

Терпение пользователей мобильного интернета

Увеличение скорости загрузки сайта как способ увеличить конверсию

Время загрузки сайта влияет на конверсию. Рассмотрим на примере сети Walmart.

Зависимость показателя конверсии от времени загрузки страницы

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

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

Влияние оптимизации загрузки сайта на органический трафик

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

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

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

Обобщая вышесказанное делаем вывод, что ускорение сайта приводит к:

  1. росту конверсии;
  2. снижению показателя отказов (процентное соотношение количества посетителей, покинувших сайт прямо со страницы входа или просмотревших не более одной страницы сайта);
  3. подъему в поисковых системах.

20 способов как ускорить загрузку сайта

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

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

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

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

Рассмотрим процесс на примере браузера Google Chrome.

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

2. Объединить и минифицировать CSS и JS-файлы

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

Самый простой способ сократить количество запросов — объединить и минифицировать (сжать) HTML, CSS и JavaScript файлы. Правильнее всего поставить эту задачу разработчикам. Если нет такой возможности, можно попробовать сделать это самостоятельно.

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

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

3. Реализовать асинхронную загрузку CSS и JS

Все мы привыкли загружать CSS файл в HTML посредством вставки тега

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

Реализовать асинхронную загрузкуу CSS и JS часто под силу только профессиональным разработчикам. Отметим лишь то, что смотреть нужно либо в сторону использования значения preload атрибута rel в совокупности с атрибутом onload, либо подгружать стили js-скриптом.

4. Настроить отложенную загрузку javascript-кода

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

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

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

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

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

Вводные факты

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

  • Инженеры Google выяснили, что пользователь замечает даже пустяковую задержку загрузки — 0,4 секунды;
  • Пользователь с большой вероятностью покинет страницу, если та загружается 3+ секунд;
  • Мобильные пользователи готовы ждать немного дольше — 6-10 секунд;
  • 79% пользователей интернет-магазинов не сделают повторную покупку, если в первый раз сайт загружался долго.

Эксперимент Financial Times

Представители деловой газеты провели эксперимент с новым сайтом издания.

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

ТОП-100 лучших SEO-агентств России 2020

Кто лучше всех в России умеет продвигать сайты в поисковых системах – и к кому лучше обратиться за продвижением сайта своей компании?

Ответ – в свежем рейтинге SEO-компаний за 2020 год по версии RUWARD.

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

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

Скорость загрузки можно измерить с помощью этих сервисов:

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

1. Уменьшите объем загружаемых страниц

Используйте сжатие gzip, это сократит время передачи файлов браузеру. Объём передаваемых данных уменьшится в 4-5 раз, а скорость загрузки — увеличится.

Nginx

Для включения сжатия gzip в Nginx, измените конфигурацию сервера и добавьте эти строки:

server <
.
gzip on;
gzip_disable «msie6»;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
>

Apache

Сначала убедитесь, что подключен модуль mod_deflate. После этого нужно добавьте в файл .htaccess следующие строки:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/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

Уровень сжатия

Gzip поддерживает уровень сжатия от 1 до 9. В Nginx его можно регулировать таким образом:

Оптимальный уровень сжатия — 5.

2. Уменьшите объём графики

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

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

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

Как это работает:

Сжать изображения можно при помощи функции сохранения веб-страниц в графических редакторах или сервисов PunyPNG, TinyPNG и других.

3. Уменьшите количество запросов браузера

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

Используйте CSS-спрайты — графические файлы, содержащие сразу несколько изображений. Это оптимальный способ, если на сайте много маленьких изображений и иконок. Объедините несколько CSS- и JS-файлов в один, это сократит количество HTTP-запросов.

Чтобы посмотреть количество запросов браузера в Chrome, войдите в «Инструменты разработчика» (Настройки → Дополнительные инструменты) и перейдите во вкладку Network.

4. Включите кэширование данных

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

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

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

Используйте модуль headers веб-сервера Apache, который контролирует и изменяет заголовки HTTP-запросов и HTTP-ответов. Браузер загружает с сервера в локальный кэш данные, которые редко изменяются, и при посещении сайта загружает их уже из кэша. Также можно кэшировать файлы определённых типов на заданное время, по истечении которого они будут загружены с сервера заново.

Это можно сделать так:

Header set Cache-Control «max-age=1234000»

Укажите нужные расширения файлов в конструкции FilesMatch, где для них устанавливается заголовок Cache-Control и переменная max-age, с помощью которой указывается время хранения файлов в секундах. Те файлы, которые не нужно кэшировать, просто не включайте в список.

Также можно запретить кэширование файлов. Добавьте приведённый ниже код в .htachess, предварительно указав, какие типы файлов кэшировать не нужно:

Header unset Cache-Control

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

ExpiresActive On
ExpiresDefault «access plus 2 month»

ExpiresByType image/png «access plus 4 months»
ExpiresByType image/swf «access plus 4 months»

ExpiresByType text/html «access plus 2 month 14 days 7 hours»
ExpiresByType image/gif «modification plus 8 hours 3 minutes»

5. Сократите размер кода CSS и JavaScript

Специальные сервисы для упрощения JavaScript и CSS удаляют из кода «лишние» символы (пробелы, комментарии) и сокращают время его загрузки. Для увеличения скорости они могут быть эффективнее, чем стандартное сжатие gzip. Google рекомендует СSS-файлы небольшого размера вставлять непосредственно в документ HTML.

Вы можете воспользоваться этими сервисами:

Размещайте CSS-файлы в начале страницы, а JS-файлы — в конце.

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

Источник фото на тизере: Depositphotos

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

Топ-пост этого месяца:  Создание лучшей страницы контактов
Добавить комментарий