Меню
Бесплатно
Регистрация
Главная  /  ПО  /  Как сделать чтобы страницы загружались быстрее. Пять способов ускорить время загрузки страниц

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

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

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

Из множества сервисов, которые я использовал для проверки скорости загрузки страниц сайта, мне понравился сервис: Pingdom.com , который наглядно демонстрирует каждую деталь сайта и скорость загрузки необходимой страницы, например для главной страницы блога сайт, при выборе в настройках — «Amsterdam, Netherlands», скорость загрузки сайта будет составлять 1,08 секунды, что не так уж и плохо.
Ниже представлена вся необходимая информация, которая предоставляется сервисом по скорости соединения, ожидания и ответа как сторонних серверов, данные с которых запрашиваются, так и внутреннего сервера.

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

Оптимизируем скорость загрузки страниц сайта используя Google PageSpeed

На самом деле все проще чем кажется на первый взгляд, но хочу отметить тот момент, что при использовании Google PageSpeed Insights не видно всех моментов, которые могут ухудшать скорость загрузки страниц сайта, но он вполне подойдет, выполнив все пункты по требованию сервиса, вы сможете значительно улучшить скорость. Для более подробного анализа факторов влияющих на скорость загрузки сайта, необходимо воспользоваться браузером Mozilla Firefox с дополнением Firebug и плагином PageSpeed для Firefox .

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

Итак, после установки плагина и дополнения firebug в правом верхнем углу появится кнопка с изображением жука.

Перейдите на сайт, анализ для которого необходимо выполнить, нажмите на кнопку с жуком. Перед вами откроется окно, последняя вкладка которого будет называться Page Speed.После нажатия на вкладку появится окно с кнопкой Analyze Performance , необходимо нажать на кнопку и ожидать пока страница проанализируется. Далее Перед Вами появится список всех рекомендаций, которые требуется выполнить для улучшения скорости загрузки страниц сайта. После недолгих манипуляций над содержимым страниц блога, я добился результата по PageSpeed = 94 из 100 возможных баллов, что весьма неплохо, можно конечно и улучшить результат, но пока это не критично, главное, что все основные мешающие моменты устранил.

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

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

Включите сжатие — для настройки сжатия xml, css, js и html в формат gzip требуется добавить следующий код в файл.htaccess на ftp сервере сайта:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

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

Используйте кэш браузера , здесь же указывается валидатор кэша и выполняется пункт Укажите валидатор Кэша – необходимо использовать кэширование на стороне браузера, т.е. клиента, требуется добавить в.htaccess следующие строки кода:

Header set Cache-control: private FileETag MTime Size ExpiresActive on ExpiresDefault "access plus 7 day" BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.{2}" force-no-vary

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

Оптимизируйте изображения – для того, чтобы уменьшить размер страниц и соответственно увеличить скорость загрузки, потребуется воспользоваться принципом копирования всех изображений сайта с ftp сервера и пакетной загрузки для дальнейшей обработки в сервис http://www.smushit.com/ , процедура достаточно долгая, если на Вашем сайте количество изображений изменяется тысячами. Могут возникнуть ошибки того, что gif файлы будут пережаты в jpg или png, при этом изменяется имя файла, требуется учесть данный момент, если есть изображения формата gif, лучше их загружать отдельно и потом править вручную. Рекомендации:

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

Отложение синтаксического анализа java-скрипт – можно запустить скрипт некоторого времени загрузки документа, воспользовавшись кодом:

function onLoadScript () { var scri = document.createElement("script"); scri.src = ""; document.body.appendChild(scri); } window.onload = function () {setTimeout(onLoadScript, )}

function onLoadScript () { var scri = document.createElement("script"); scri.src = "jq.js"; document.body.appendChild(scri); } window.onload = function () {setTimeout(onLoadScript, 2000)}

Сократить JS скрипты и CSS стили – необходимо воспользоваться сервисом: http://www.refresh-sf.com/yui/, который удаляет лишние пробелы в коде, тем самым экономит место файла.

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

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

Укажите заголовок Vary: Accept-Encoding – все файлы, открытые для кеширования должны возвращать заголовок, достаточно добавить код в.htaccess на ftp сервере:

Header set Cache-control: private Header append Vary Accept-Encoding Header set Cache-control: public

P.S.: Для сокращения количества запросов к файлам, необходимо сократить количество CSS стилей и объединить их в 1 файл, скрипты js в идеале тоже необходимо объединить в 1 файл.

Заключение

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

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

Успехов Вам в оптимизации скорости страниц сайта!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл.htaccess, находящийся в корневой папке сайта, следующие строки:
Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"
Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

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

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

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

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

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

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

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

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

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

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

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

Accept-Encoding: gzip, deflate

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

Content-Encoding: gzip

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

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле.htaccess прописать следующие строки кода:
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

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

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

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

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

Какую скорость загрузки считать нормой

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

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

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

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

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

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

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

Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed . Работать с ним просто - указываем адрес сайта и жмем кнопку «Анализировать».

В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):

  • Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP - First Contentful Paint).
  • Через какое время пользователь видит основной контент в браузере (DCL - DOM Content Loaded).
  • Насколько сайт оптимизирован в плане скорости загрузки.
  • Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).

Желательно попасть в зеленую зону - и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».

Еще один хороший сервис для проверки скорости загрузки, правда, на английском - Pingdom . Отличительная черта - вот такие красивые графики (называются waterfall - водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:

А теперь к сути:

Как ускорить сайт Шаг 1. Оптимизация картинок

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

На что смотрим:

    Размер картинок (ширина и высота)

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

    Вес картинок (килобайты)

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

    Превью к большим картинкам

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

Например, Спортмастер использует картинки товаров в трех вариантах:

Картинка для списка товаров (весит 7 Кб)

Картинка для карточки товара (весит 18 Кб)

Картинка для просмотра товара с «лупой» (весит 942 Кб)

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

При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:

Шаг 2. Gzip-сжатие

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

Как включить Gzip-сжатие:

    Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):


    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

    Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http {...} и перезапускаем сервер:

    gzip on;
    gzip_static on;
    gzip_comp_level 5;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

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

Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

Шаг 3. Кэширование на стороне браузера

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

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

    Через файл htaccess (кэшируем статические файлы на 10 дней):


    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType image/gif "access plus 10 days"
    ExpiresByType image/jpg "access plus 10 days"
    ExpiresByType image/jpeg "access plus 10 days"
    ExpiresByType image/png "access plus 10 days"
    ExpiresByType image/svg+xml "access plus 10 days"
    ExpiresByType text/css "access plus 10 days"

    Для Nginx добавляем в конфигурацию:

    server {
    ...
    location ~* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ {
    root /var/www/user/data/www/site.ru;
    expires 10d;
    }
    ...
    }

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

Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

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

Шаг 4. Минимизация css- и js-файлов

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

Пример обычного кода:

Speedometer-wrapper {
position : relative ;
}
.speedometer-wrapper .list {
margin-top : 80px ;
margin-left : -20px ;
padding-bottom : 85px ;
}

После минимизации:

Speedometer-wrapper {position :relative }.speedometer-wrapper .list {margin-top :80px ;margin-left :-20px ;padding-bottom :85px }

Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей - подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант - 85 Кб. Чувствуете разницу?

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

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

Шаг 5. Порядок загрузки css- и js-файлов

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

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



...



...


...



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

Шаг 6. Лишние плагины или счетчики

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

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

Шаг 7. Использование CDN

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

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

Как правило, CDN используют в двух случаях:

  • Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
  • Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath . Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».
Шаг 8. Сокращение числа http-запросов

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

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

Настроенное кэширование для браузера (шаг 3) и удаление лишних скриптов (шаг 6) тоже уменьшают число http-запросов.

Шаг 9. Оптимизация шрифтов

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

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

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

Шаг 10. Сокращение HTML-кода

Помимо сжатия файлов стилей и скриптов (шаг 4), можно настроить минимизацию и для HTML-кода самой страницы. Думаю, это актуально для длинных страниц - статей в блогах, больших списков товаров и т.п. Для настройки стоит поискать подходящий плагин для своей CMS (например, Html Minifier для Joomla).

Шаг 11. Оптимизация работы сервера

Если у вас выделенный сервер (ваш системный администратор может управлять его настройками), можно попробовать проапгрейдить его параметры. Например, добавить оперативной памяти или заменить процессор. Также сисадмин может провести «уборку» на самом сервере - удалить неиспользуемые и обновить текущие модули.

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

Шаг 12. Оптимизация скриптов и баз данных

Один из этапов загрузки сайта - это генерация сервером итогового HTML-кода, который он отдаст браузеру. Этот код генерируется движком сайта (CMS). Если движок написан неграмотно, то он может «собирать» страницу весьма долго, делая лишние запросы к файлам и базам данных, используя «медленные» алгоритмы программирования и т.д.

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

Нет слоупокам

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

Если нужна помощь в оптимизации скорости загрузки сайта - пишите , посмотрим ваш сайт и подскажем, можно ли его ускорить.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • росту конверсии;
  • снижению показателя отказов (процентное соотношение количества посетителей, покинувших сайт прямо со страницы входа или просмотревших не более одной страницы сайта);
  • подъему в поисковых системах.
    • 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. Ускорить получение первых байтов (TTFB)

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

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

    6. Сократить время ответа сервера

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

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

    7. Выбрать оптимальные опции хостинга под запросы пользователей

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

    Для небольших сайтов компаний и визиток подойдет самый простой виртуальный хостинг (shared hosting). Для интернет-магазинов, порталов - VPS/VSD. Для сайтов с большой посещаемостью нужно смотреть в сторону выделенных физических сервером (Dedicated server).

    8. Провести анализ сжатия страниц

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

    Проверить, включен ли у вас на сайте gzip, можно, воспользовавшись любым предложенным поисковиком сервисом по запросу “gzip test”.

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

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


    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

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

    10. Настроить параметры кэширования

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

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

    Это и есть настройки параметры кэширования. Сделать это можно либо в настройках используемой вами CMS либо в файле.htaccess.

    11. Сжать все изображения и видео

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

    12. Использовать CDN

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

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

    13. Использовать облачные сервисы

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

    • видео на Youtube/Vimeo;
    • файлы для загрузки в Dropbox/Yandex Disk/Google Drive

    В большинстве случаев это бесплатно.

    14. Сократить число inline-стилей

    Задача для разработчиков. Очень часто встроенные в CMS визуальные редакторы грешат тем, что создают “грязный код”, в котором стили элементам задаются inline-методом в атрибуте style. Так, например, на странице будет несколько элементов:

    Внимание! Важное объявление

    ...

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


    ...

    Внимание! Важное объявление - 1


    ...

    15. Реализовать отложенную загрузку изображений, видео, iframe и контента

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

    Сделать это нужно для изображений, видео, iframe, а иногда и для текста (например, в случае сайта онлайн-библиотеки). Как это сделать - тема отдельной статьи.

    16. Провести анализ кода и сократить число используемых плагинов

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

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

    17. Уменьшить число редиректов

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

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

    Необходимо пройтись по всем редиректам на сайте и оптимизировать эти цепочки.

    18. Сократить число внешних скриптов

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

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

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

    19. Провести аудит быстродействия мобильной версии сайта

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

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

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

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

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

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

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

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

    2. Используйте компрессию сайта

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

    Проверить, используется ли на вашем сайте gzip для сжатия данных, можно на этом ресурсе: http://www.gidnetwork.com/tools/gzip-test.php

    А пройдя по следующей ссылке, вы сможете выяснить, применяется ли в целом какая-либо технология сжатия на вашем сайте: http://www.whatsmyip.org/http-compression-test/

    3. Сократите количество переадресаций

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

    Проверить свой сайт на наличие переадресаций вы можете при помощи этой программы (есть бесплатная версия): https://www.screamingfrog.co.uk/seo-spider/

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

    Данный пункт касается тех, кто пользуется CMS: Wordpress, Joomla или какой-либо другой. Регулярно проверяйте список плагинов, которые вы используете, на предмет ненужных или уже неиспользуемых. Уменьшение количества плагинов положительно скажется на загрузке вашего сайта и его работе в целом. Если вы используете Wordpress в качестве системы управления контентом, то оптимизировать число плагинов вы также можете при помощи специального плагина P3 (Plugin Performance Profiler): https://wordpress.org/plugins/p3-profiler/ Этот плагин покажет вам данные, касающиеся производительности других плагинов, и того, как каждый из них влияет на работу сайта. Это поможет вам определить, от каких плагинов следует отказаться в первую очередь.

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

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

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

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

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

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

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

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

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

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

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