Ускорение загрузки страниц. Как значительно ускорить загрузку страниц в браузере

Здравствуйте, ребята!

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

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

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

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

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

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

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

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

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

Конечно, бывает сложно добиться маленького значения и это зависит от многих факторов:

• Количество контента на странице;
• Количество подгружаемых скриптов;
• Размер графики на странице и на сайте в целом;
• Количество плагинов.

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

Оптимизация графики

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

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

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

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

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

Уменьшает время загрузки;

Повышает удобность потребления контента.

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

Кэширование

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

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

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

Я их не использую. Кэширования с помощью плагина Hyper Cache более, чем достаточно.

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

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

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

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

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

Покажу на практике, как это все делать. Начну с видео-урока.

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

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

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

Теперь сохраняем данный файл в формате.js и называем его удобным именем. Я назову "footer-scripts.js", чтобы четко понимать, что это файл скриптов, которые выводятся в футере сайта.

Теперь можно подгрузить этот файл на сайт, чтобы скрипты работали. Для этого нужно разместить строчку кода, в которой прописан путь к этому файлу. Разместить код нужно в файле footer.php перед закрывающим тегом /

Вот моя строка кода.

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

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

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

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

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

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

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

Избавление от лишних запросов в коде шаблона

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

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

Теперь текстовый вариант.

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

Как видим, это php код. Если же посмотреть в исходный код (ctrl+u) любой страницы сайта, то увидим, что этого php кода уже нет, а будет HTML код с указанной кодировкой.

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

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

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

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

Отключение ревизий

Снова замучаю вас видео-уроком.

Ревизии - это автоматическое сохранение копий записей, которые делаются при создании записей в определенные интервалы времени.

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

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

В корне движка имеется папка WP-includes, в которой лежит файл default-constants.php. Необходимо открыть его, найти в нем следующее содержание.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 60); /** * @since 2.9.0 */if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 30); if (!defined("WP_POST_REVISIONS")) define("WP_POST_REVISIONS", true);

define ("AUTOSAVE_INTERVAL" , 60 ) ; * @since 2.9.0 define ("EMPTY_TRASH_DAYS" , 30 ) ; if (! defined ("WP_POST_REVISIONS" ) ) define ("WP_POST_REVISIONS" , true ) ;

На момент написания этой статьи все это находится, начиная с 277 строки. Весь этот код отвечает за сохранность наших записей. Состоит он из 3х частей, каждая из которых начинается на if.

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

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 600);

if (! defined ("AUTOSAVE_INTERVAL" ) ) define ("AUTOSAVE_INTERVAL" , 600 ) ;

Значение ставим в секундах.

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

if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 0);

if (! defined ("EMPTY_TRASH_DAYS" ) ) define ("EMPTY_TRASH_DAYS" , 0 ) ;

Третья часть отвечает за работу ревизий. По умолчанию они включены. Если хотите отключить, то значение true необходимо изменить на false или поставить 0.

«Распределили часть контента (изображения, jQuery) на поддомены, а часть на CDN (cloudflare.com) для сокращения расстояния между сервером и пользователем.» Для сайта плохо - картинки будут привязаны не к сайту, а к CDN. В Яндексе в статистике будете видеть "картинок в индексе - 0".© инфа от яндекса.

То есть включили все галочки в настройках оптимизации сайта на хостинге. С заказчика содрали пару сотен баксов. При этом убили такой параметр в заголовке как lastmodified, ибо при включении этих опций он не передается - такова его специфика. Ощущение, что и сайта нету никакого, просто придумали статью и переписали название чекбоксов с хостинга, думая что справит неизгладимое впечатление.
Браво, примитивнее статьи не читал, кейс на премию Дарвина!

Александр Поречников

Java - это даже и не близко Java Script

Александр Поречников

Вот Вы пишите, Геннадий, что включили http2 и при этом зачем-то обьединяете ресурсы в один файл, Противоречите сами себе? Или просто не знаете как работает http2. И судя по чеклисту, то меряли ли Вы скорость загрузки после простого включения ганзипа, все остальное это такие тонкости и дебри в которые лезут, когда нужно с 500мс сделать 400мс или от нагрузки сервер подвисает (504 ошибки проскакивают). И выкиньте Апач из связки Апач + Нжиникс (если Вы, конечно, не используете специфические плагины Апача) + совет, держите всю статику на СДН, это очень недорого, а толк от этого огромный, как минимум в снижении нагрузки на процессор

Александр Поречников

а для чего созданы зеркала - слейте СДН с основным доменом и все

Александр Поречников

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

Настроили OpCashe, исправьте на OPcache

Александр, несомненно, эти опции модуля pagespeed ускоряют сайт, но при выборе хотя бы одной из них на хостинге last-modified не передается, ответ сервера 304 на запрос if-modified-since не отдается, cache conrol -> max-age становится 0.
Возмутило не это в статье, возмутило то, что автор пишет такие заумные вещи как они план составляли, как воплощали в жизнь мега СЕО технологии и как потратили на это 60 человекочасов, 60 КАРЛ! То есть с заказчика содрали минимум 500 баксов за то, что поставили галки на хостинге. Не жалко, на здоровье! Ну развел и молчи, но не лезь со своими псевдознаниями на нормальные сайты и не отбирай у людей время! Почему уверен что рулили на хостинге -- вот скрин украинского продвинутого хостера, где порядок этих галок практически на 100% совпадает с гениальным планом автора и ко по ускорению сайта.
https://uploads.disquscdn.c...

Александр Поречников

на этом хостинге у нас даже один из старых полустатичных проектов крутится, отличнаый хостинг. По поводу чего Вы высказалась я знаю, но многие не понимают, что на самом деле есть всего несколько способов действительно уменьшить время загрузки, а не "экономия на спичках" - это:
0) включение сжатия на веб-сервере (gzip),
1) установка правильных заголовков на сайте
2) использование не шаред-хостинга, а пусть даже минимальной ВПСки
3) использование более-менее быстрого движка (желательно не Вордпресс, а на фреймворке)
4) минификация статичных файлов (то что редко меняется - стили, картинки, скрипты, шрифты)
5) кеширование страниц/статики

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

Согласен с Вами на 100%, благодарю за лаконизм и точность!

Ляпушкин Никита

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

Филандер

а что за хостинг?)

Филандер

Alexey Tyazhelnikov

Что значит "Расширили время кэш для JavaScript и CSS" ?

Включили последнюю и предпоследнюю галочку на хостинге (пост со скрином выше))))

Геннадий Федоров

Да, так и сделали!
Извините, Вы не компетентны в этом вопросе.

Геннадий Федоров

Спасибо!
Комплекс работ - дает результат.

Геннадий Федоров

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

Геннадий Федоров

Спасибо за комментарий!
Признаю, все объединили до перехода на https/http2))
Да, скорость после gzip мерили, не тот результат (не всем угодишь)...

Геннадий Федоров

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

Геннадий Федоров

Ваш комментарий вообще непонятен

Александр Поречников

пользователи обычно не настраивают сервер, не программируют и не создают продукты, то что можно создать "бложик/сайт" на вордпрессе человеку без знаний - это несомненно хорошо, но если у такого человека возникнут вопросы, то ему все равно придется столкнутся с PHP, JavaScript, Nginx, Apache и прочими ранее незнакомыми словами и в этом обычно помогает гугл, поэтому "легкая безграмотность" в терминах приведет к тому, что человек будет искать что-то похожее на "слайдер на Java" и удивлятся что ему какой-то JavaScript подсовывают в результатах. Поэтому взывать к стороне пользователя не стоит

Александр Поречников

часто проблема не в том что скорость повышается от всех манипуляций (пусть даже если и на 0,1%), а в том, что мы не видим других путей оптимизации (CDN, nginx) и не понимаем как это работает (http2) и в результате оптимизируем то что нет смысла оптимизировать и забываем о том что следовало бы оптимизировать или как добится максимального результата при своей оптимизации.

Один из самых важных аспектов вашего сайта - это скорость его загрузки; пользователи хотят мгновенно получать картинку без всяких тормозов, и если вы не в состоянии дать им это, то они долго не раздумывая, поищут информацию в другом месте. В этой статье мы обсудим 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, мы можем создать изображение, которое будет изменяться при наведении мышки.

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

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

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

.sprite { background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); } #logo { width:100px; height:45px; background-position:0 0; } #button { background-position:0 -355px; padding:5px 8px; } #button:hover{ background-position:-25px -355px; }

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

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

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

Загружайте файлы CSS в разделе прямо перед началом тега body.

Подключайте JavaScript перед самым закрытием тега body.

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

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

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

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

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

Настройка процесса:

Создайте 3 поддомена на вашем сервере

Расположите ваши изображения в папках на разных поддоменах

Замените пути в ваших файлах

5. Добавление заголовков Expires

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

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

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

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

Следующий пример.htaccess файла устанавливает заголовки expires на какое-то число в 2010 году для таких типов файлов как.ico, .pfd, .flv (файлы Flash), .jpg, .png, etc.

Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"

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

К примеру, если у вас есть файл JavaScript, в котором вы что-то изменили, просто добавьте в название номер версии (что-то типа javascriptfile-1.0.js, javascriptfile-1.1.js и т.д.)

Вывод

Сегодня мы прошлись по многим способам. Надеюсь, вы отметили для себя несколько методов, которые будете активно применять в ваших проектах! Удачи!

При создании клиентоориентированного сайта вам необходимо учесть и продумать множество вещей, начиная от творческих (дизайн, наполнение) и заканчивая техническими (верстка, размещение в сети Интернет). Для клиентов важна каждая мелочь, поэтому важно смотреть не только на внешнюю сторону вашего проекта - то, что увидит пользователь - но и на внутреннюю, а именно, как быстро пользователь это увидит. Исследования показывают, что примерно половина пользователей ожидает, что сайт загрузиться менее чем за две секунды, а 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 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.

Заключение

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

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

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

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

После принятых мер, скорость загрузки моего сайта выросла в 3 - 7 раз. Замеры времени проводились уже после оптимизации изображений. А учитывая оптимизацию изображений, скорость загрузки сайта возрастает намного больше. Разброс в цифрах говорит о том, что скорость загрузки сайта величина вообще не постоянная. Более того она зависит от очень большого количества факторов, которые постоянно меняются. Давайте разберёмся, что же влияет на формирование этой величины.

Скорость загрузки сайта и что на неё влияет Время ответа сервера

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

Как вы уже знаете, сайт расположен на сервере. Сервер это специальный компьютер, предназначенный для раздачи информации всем пользователям сети. И как всякий компьютер, он должен быть мощным. А для обслуживания большого количества пользователей он должен быть очень мощным. Как правило, нормальные хостеры описывают оборудование своих серверов: тип процессора, объём памяти, тип жесткого диска (SATA, SCSI,...), операционная система сервера (Unix, Linux, Windows). И вы по своему кошельку или по требованиям к сайту, точнее к его посещаемости и объёмам хранимой информации, выбираете тариф и оборудование. Отсюда вывод:

1. Чем мощнее сервер, тем меньше время ответа сервера, тем быстрее работает сайт.

Если с оборудованием всё понятно, то какое отношение к мощности сервера имеет операционная система? Самое непосредственное. Unix изначально разрабатывалась как сетевая, многозадачная и многопользовательская серверная операционная система. Она получилась более производительной, чем Windows. Были случаи, кода простая замена операционной системы сервера Windows на Unix приводила к двукратному увеличению скорости работы сети. Linux это производные ОС от Unix и в силу своей комплектации могут незначительно отличаться. Поэтому обращайте внимание и на ОС. Вывод:

2. Лучшая ОС - Unix, значительно улучшает время ответа сервера.

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

3. Чем меньше сайтов расположено на одном сервере, тем меньше запросов обрабатывает сервер, тем быстрее время ответа сервера, тем быстрее работает ваш сайт.

Развивая дальше тему, что плохого, когда много сайтов на одном сервере, должен сказать, что сервер подключен к интернету, как правило, только одним сетевым кабелем. Это значит, все сайты передают информацию в интернет поочерёдно, используя только один общий IP-адрес. В случае сильной нагрузки (огромное количество запросов) на любой сайт этого сервера, будет тормозить весь сервер. И ваш сайт будет загружаться медленно. В случает блокировки IP-адреса по решению суда, будут заблокированы все сайты, расположенные на этом сервере и ваш сайт станет недоступным для посетителей. Отсюда ещё один важный вывод:

4. Лучше иметь свой выделенный IP-адрес. Это повышает безопасность и скорость обработки запросов именно к вашему сайту, а следовательно и время ответа сервера.

Суммируя два последних вывода, получаем новый вывод ещё более важный:

5. Лучше под сайт заказать Выделенный сервер с выделенным IP-адресом. Это много-кратно повышает безопасность и время ответа сервера, а следовательно и быстродействие вашего сайта.

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

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

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

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

6. При вещании на определённый регион выбирайте сервер в центре региона, или как можно ближе к региону.

Время отклика DNS-сервера

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

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

7. Время отклика DNS-сервера сильно влияет на время ответа сервера. Проблема решается выбором сервера от местного хостера.

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

Настройки wp-config.php

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

Находим в файле wp-config.php строку:

define ("WPLANG", "ru_RU");

Заменяем её на:

if (strpos($_SERVER["REQUEST_URI"], "wp-admin")) define ("WPLANG", "ru_RU"); else define ("WPLANG", "ru_RU_lite");

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

Ненужные плагины

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

Пинг беки и трек беки

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

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

Быстрый шаблон

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

Настройка шаблона

1. Максимально уменьшаем количество виджетов . Удаляем, виджеты "Архивы", "Свежие записи", "Свежие комментарии", "Популярные сообщения", "Мета". Если у вас уже есть хорошее меню, то виджет "Рубрики" тоже удаляем. Можно оставить виджет "Облако меток" и то если очень нужно. Эта процедура уменьшает количество запросов к БД, сокращает объём кода для всех ваших страниц и резко уменьшает количество ссылок на всех страницах вообще, а так же уменьшает количество ссылок дублей ваших страниц. Что очень полезно. Дело в том что архивы, рубрики и метки формируют для ваших сообщений новые URL, но с тем же содержанием. Об этом достаточно подробно написано в настройках SEO плагинов, в частности .

3. Облегчаем размеры выводимых страниц . Очень большие статьи разделяем на страницы с помощью тега .

4. Уменьшаем количество выводимых комментариев . Если ваши статьи активно комментируются, не следует выводить под статьёй больше 50 комментариев. Используйте переключение страниц между комментариями. Настройки устанавливайте в "Настройках обсуждений".

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

Уменьшаем в объёмах все картинки, имеющиеся на сайте. Если у вас есть изображения в формате PNG, переформатируем их в JPG. Файлы JPG формата значительно меньше по размерам. Но и JPG тоже можно ужать. Сжатие изображений может достигать 30-70%, что позволяет уменьшить объём страницы в 2-3 раза. Соответственно во столько же раз вырастит скорость загрузки страницы. Самый простой и лучший способ выполнить эту операцию, это проверить скорость загрузки сайта на developers.google.com/speed/pagespeed/insights/ .

После тестирования страницы, ниже результатов тестирования и ниже пункта «Внедренные приемы оптимизации», находите строку «Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы». Нажимаете на ссылку и скачиваете архив, с уже сжатыми изображениями, JavaScript и CSS файлами. Распаковываете его. Смотрите в результатах тестирования, что где находится и копируете файлы на свои места на сайте. Так вы разом убиваете трёх зайцев. Но правда не всех сразу. Такую процедуру придётся выполнить для каждой страницы отдельно.

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

Массовую оптимизацию всех изображений на сайте можно выполнить с помощью плагина для оптимизации WordPress Webcraftic Clearfy.

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

Оптимизация JavaScript и CSS

Описанная выше операция оптимизации JavaScript и CSS даёт некоторую усадку объёма, за счет уменьшения количества пробелов и комментариев, но не решает всех проблем, которые они создают. JavaScript и CSS, расположенные в шапке сайта, сильно тормозят загрузку содержимого сайта. Происходит это потому, что при запросе JavaScript или CSS, файлы не только их загружаются, но ещё и выполняются. На это время загрузка страницы приостанавливается. И чем файлов больше, чем больше их объём, тем больше они тормозят загрузку сайта. Чтобы ускорить загрузку сайта необходимо все файлы JavaScript и CSS объединить в один файл и перенести в конец страницы. С такой задачей великолепно справится плагин Autoptimize. Кроме этого он ещё оптимизирует HTML-код вашего сайта (извлекает из кода тексты комментариев).

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

Основой WordPress является база данных, в которой записано всё о вашем сайте: доменное имя, URL, название сайта, название статей, их содержание, адреса расположений картинок, комментарии и всё, всё, всё… При написании статей сохраняются промежуточные копии (ревизии), которых может быть очень много. Большинство плагинов, при активации и работе, в базу добавляют свои таблицы. А после их отключения, эти таблицы остаются брошенными. В результате база раздувается и скорость обработки запросов к ней естественно снижается. Поэтому периодически необходимо чистить базу данных и оптимизировать. Быстро и качественно выполнит эту работу один из плагинов WP-Optimize, Wp-DBManager, Optimize Database after Deleting Revisions, WPDBSpringClean.

Уменьшение количества запросов к БД или редактирование шаблона

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

Открываем файл header.php вашего шаблона в текстовом редакторе, желательно Notepad++ (можно в AkelPad или phpDesigner).

1. Указываем кодировку . Если вы используете на сайте UTF-8, то делаем так.

Ищем код, отвечающий за кодировку контента:
" type="text/css" media="screen, projection" />

или так: