Как ускорить загрузку сайта
Здравствуйте, ребята!
Сегодня будет одна из важнейших тем во внутренней оптимизации сайта. Материал большой, но практический и полезный. Сложные моменты я подкрепил видео-уроками.
Поговорим мы о том, как ускорить загрузку вашего сайта, использовав при этом 7 рабочих способов. Возможно они всем известны. Но я заметил, что их используют далеко не все. А в комплексе, уж тем более, мало кто.
В общем, в содержании по пунктам распишу все способы, а далее уже читайте и применяйте все на практике.
Перед тем, как ускорить сайт, я хочу пару слов сказать о важности сего действия и о способах проверки скорости загрузки.
Уже давно известно, что скорость загрузки ресурса — один из факторов ранжирования в поисковой выдаче. Если взять абсолютно 2 одинаковых страницы, но одна будет грузиться быстрей, то и в выдаче она будет иметь более высокие позиции. Но это не значит, что первая будет на 30 позиции, а вторая на 1й. Нет, просто сайт с более быстрой загрузкой будет иметь немного лучше позиции.
Поэтому, если и имеются какие-то легкие способы обогнать наших конкурентов хоть в чем-то, то нужно это делать. Тем более, что таких способов масса. Использовав их все мы будет идти в нужном направлении в обгоне наших конкурентов.
Касаемо проверки скорости загрузки сайта, то я всегда пользовался сервисом webwait. Перейдя на него, нужно просто вставить адрес любой страницы вашего сайта и начать проверку.
«>
По умолчанию, сервис будет проверять скорость загрузки страницы 5 раз, чтобы выявить среднее значение. Интервал между запросами будет 5 секунд. Если вы хотите изменить оба значения, то синей рамкой на изображении выше я выделил соответствующие настройки. Первая — количество проверок, вторая — интервал между запросами.
Только, что я проверил скорость загрузки одной своей статьи. По результатам 5ти проверок получил средний результат в 0,82 секунды.
«>
Рекомендую вам ориентироваться на результат менее 1 секунды по данному сервису. Более уже будет не так хорошо, так как сейчас данному моменту уделяют слишком много внимания.
Конечно, бывает сложно добиться маленького значения и это зависит от многих факторов:
- Количество контента на странице;
- Количество подгружаемых скриптов;
- Размер графики на странице и на сайте в целом;
- Количество плагинов.
Поэтому, нужно стараться уменьшить влияние всех этих факторов. Об этом мы и начинаем говорить далее. Переходим к первому и, пожалуй самому простому способу.
Оптимизация графики
Не секрет, что самым весомым элементов каждого сайта является именно графика. Сюда входит, как графика на каждой странице, так и общая графика. Касаемо графики на каждой страницы, то это контентная графика — изображения, скриншоты, фотографии. Общая графика — это графика, которая входит в дизайн сайта. Все это мы можем оптимизировать.
В свои статьи ни в коем случае нельзя размещать графику полного размера. Данная ошибка ярко выражена на сайтах, посвященных кулинарной тематике и фотографиям, когда все фотографии загружают в статьи в полном размере.
Одна фотография, сделанная на зеркальный фотоаппарат среднего качества, будет весить несколько мегабайт. Если загрузить такую фотографию на сайт, то посетитель при заходе на страницу будет ее всю скачивать. Представьте, сколько времени будет длиться загрузка страницы, если будет размещено 10 высокообъемных изображений.
Данному моменту уделяйте время, когда публикуете контент. Когда-то я писал статью о том, как уменьшить размер изображения без потери качества. Материал будет вам очень кстати.
Относительно дизайна, то старайтесь использовать в нем меньше изображений. Можно сделать вполне вменяемый и органичный дизайн, использовав при этом CSS стили. Это даже к лучшему будет. Если вы посмотрите на очень популярные ресурсы, то заметите, что у них дизайн — это по сути белый фон с разделительными линиями. Это играет на руку очень сильно и убивает 2х зайцев:
- Уменьшает время загрузки;
- Повышает удобность потребления контента.
Если же без красочных изображений никуда, то в помощь статья про уменьшение размера картинок (ссылка выше).
Кэширование
Кэширование — пожалуй, важнейший элемент в быстрой загрузке страниц сайта. Особенно данная функция полезна при большой посещаемости, когда создается много запросов к базе данных.
Чтобы сделать кэширование на сайте (для WordPress) нужно установить плагин Hyper Cache. Полную инструкцию читайте по данной ссылке. Все разжевал там.
Также можно добавить некоторые коды в файл .htaccess, которые также будут включать кеширование, а также gzip сжатие. Честно сказать, их действие на своем сайте я не заметил. Может потому, что мой блог уже был полностью оптимизирован. Да и не вижу в них особого смысла. И заморочка одна имеется, так как не сможем очищать кэш. Тогда не будет видно изменений на сайте. Поэтому, не буду давать эти коды, чтобы вы потом не ломали себе голову при возникновении проблем.
Я их не использую. Кэширования с помощью плагина Hyper Cache более, чем достаточно.
Оптимизация загрузки скриптов
Если ваш сайт довольно функциональный (различные социальные кнопки, слайдеры, счетчики посещаемости и т.д.), то на нем имеется много скриптов.
Скрипты — всегда лишняя и большая нагрузка на сайт. По возможности всегда избавляйтесь от них. Если же это невозможно, то можно сделать их загрузку в последнюю очередь, а также удалить их с самого кода шаблона темы оформления.
Чтобы подгрузить скрипты в самом конце загрузки страницы, их нужно разместить в самом низу кода страницы, то есть в подвале. На WordPress это реализовывается с помощью размещения в файле footer.php перед закрывающим тегом </body>.
Также можно разместить скрипты в отдельном файле, а не в файле footer.php. А затем уже подгрузить этот файл в конце файла подвала. Это наилучший способ, как загружать скрипты на сайте.
Покажу на практике, как это все делать. Начну с видео-урока.
«>
Красной рамкой я выделил ту часть, которая нам нужна. Как видим, она заключена в открывающий и закрывающий теги скрипта, который выделен синими рамками. Черной же рамкой я выделил закрывающий тег , чтобы показать, где размещен сам скрипт.
Чтобы разместить этот скрипт в отдельном файле, нам нужно взять его содержимое (красная рамка) и разместить в новом файле, который я создаю с помощью редактора Notepad. Выглядеть содержимое нового файла будет следующим образом.
«>
Теперь сохраняем данный файл в формате .js и называем его удобным именем. Я назову «footer-scripts.js», чтобы четко понимать, что это файл скриптов, которые выводятся в футере сайта.
«>
Далее мы этот файл загружаем на хостинг в папку с шаблоном оформления. Должен лежать вместе со всеми файлами шаблона.
«>
Теперь можно подгрузить этот файл на сайт, чтобы скрипты работали. Для этого нужно разместить строчку кода, в которой прописан путь к этому файлу. Разместить код нужно в файле footer.php перед закрывающим тегом </body>/
Вот моя строка кода.
В ней вам нужно будет заменить путь к файлу и его имя, если называли по-другому. Чтобы было легче понять, даю строку с подсказками.
Путь к файлу в данной строке подходит к сайтам на WordPress. Если у вас сайт на другом движке или просто HTML станица, то путь придется изменить под себя.
Когда изменили строку, мы размещаем ее в файле подвала перед закрывающим тегом body. Выглядеть это будет, как на изображении ниже.
«>
Примерно так же должно быть и у вас. Как видите, кроме этой строчки, выводятся еще и другие скрипты. Таким образом они загружаются в последнюю очередь загрузки сайта. Код самого сайта становится чище и приятней для поисковых систем. Это также играет роль в продвижении.
Таким способом вы должны избавиться от максимального количества скриптов в файлах вашего шаблона и постараться либо вообще их удалить либо же подгрузить через файл, как я показал выше. Это один из лучших способов, как ускорить работу сайта, если на нем много скриптов.
Если вам в одном файле необходимо разместить не один скрипт, а несколько, то просто ставите отступ вниз и размещаете новый код. Но лучше тогда подписывать каждый скрипт, чтобы потом не запутаться. Для примера можете скачать мой файл, чтобы ориентироваться на него.
«>
И еще одна пометка. Не все скрипты работают в подвале сайта. Некоторые работают только при размещении их в шапке, то есть в файле Header.php между тегами. Например, социальная кнопка «мне нравится» от Вконтакте не работает в подвале, если ее код будете брать именно с социальной сети. В таком случае нужно будет разместить скрипт в шапке.
Идем дальше.
Избавление от лишних запросов в коде шаблона
Это самый сложный способ в ускорении сайта, который стоит на каком-то движке, например на WordPress. Его суть в замене строчек php кода в файле шаблона на уже сгенерированный код, чтобы избавиться от лишней генерации запросов к базе данных.
Нам потребуется файл header.php и все, что находится внутри него между тегами <head></head>. Между этими тегами и хранятся php коды, которые генерируют запросы и выводят основную информацию. Всю суть легче будет понять с помощью видео-урока, который я подготовил ниже.
Покажу все на примере строки, которая генерирует запрос на вывод кодировки сайта. Строка в файле выглядит следующим образом.
«>
Как видим, это php код. Если же посмотреть в исходный код (ctrl+u) любой страницы сайта, то увидим, что этого php кода уже нет, а будет HTML код с указанной кодировкой.
«>
Чтобы избавиться от этого запроса на формирование кодировки, нужно взять уже готовую строку из исходного кода и зменить ею php код в файле шаблона. В конечном итоге будет так.
«>
От одного запроса избавились. Таким же образом нужно заменить другие возможные строчки. Конечно получится не все сделать, так как не все в исходном коде выводится. Но нужно стремиться к максимальному количеству замен.
Также хочу обратить внимание, что имеется код на генерацию названия сайта. Заключается он, как правило, в теги <title></title>. Если вы планируете изменять название ресурса, то либо не заменяйте этот код или же не забудьте потом в коде файла изменить название, так как после замены название будет выводиться из готовой строки с названием. Генерация имени сайта не будет происходить, так как php кода не будет. Учтите этот момент.
Также не забываем все подобные махинации с файлами производить только после резервного копирования. И делайте их на своем компьютере с помощью программ для редактирования, чтобы можно было отменить правки. Я использую Notepad для подобных целей.
Отключение ревизий
Снова замучаю вас видео-уроком.
На самом деле, вещь полезная, но иногда создает очень много мусора и нагружает базу данных. Я бы не сильно рекомендовал отключать данный функционал, так как иногда спасает. Может внезапно пропасть свет и что тогда? А, если будут копии записи, то вы сможете спокойно восстановить прогресс. Не раз такое бывало, знаю по собственному опыту.
Я их все таки отключил, но вам, если вы новичок, не рекомендую этого делать. Лучше время от времени очищайте базу данных от ревизий, так как их большое количество создает значительную нагрузку.
Как очистить БД я покажу далее, а сейчас все таки покажу, как отключить ревизии в WordPress.
В корне движка имеется папка WP-includes, в которой лежит файл default-constants.php. Необходимо открыть его, найти в нем следующее содержание.
На момент написания этой статьи все это находится, начиная с 277 строки. Весь этот код отвечает за сохранность наших записей. Состоит он из 3х частей, каждая из которых начинается на if.
«>
Первая часть отвечает за интервал для автоматического создания ревизий. По умолчанию значение стоит в 60 секунд, то есть каждую минуту будет создаваться одна копия записи. Представьте, что статью вы пишите не один час. Можно данное значение увеличить, например до 10-20 минут. Данная настройка работает только при включенных ревизиях.
Значение ставим в секундах.
Вторая часть отвечает за время хранения удаленных записей в корзине. Когда мы удаляем записи, то они попадают в корзину. По умолчанию, хранятся они там 30 дней, после чего происходит удаление. Если поставить значение 0, то записи в корзину попадать не будут, а сразу удаляются без возможности восстановления.
Третья часть отвечает за работу ревизий. По умолчанию они включены. Если хотите отключить, то значение true необходимо изменить на false или поставить 0.
Что делать с ревизиями, решать вам, но мое мнение — отключать не нужно. Рекомендую просто поставить значение интервала сохранения в пределах 15-20 минут, а затем периодически удалять все ревизии из базы данных.
Минимум плагинов
Чем больше плагинов на сайте, тем больше та же нагрузка на базу данных. Поэтому, стараемся сократить их количество к минимуму. Если у вас сайт на WordPress, то количество можно сократить до 4-5 плагинов, использовав только реально необходимые плагины. Кстати, по этой ссылке вы узнаете, что это за плагины.
Что касается основных и популярных функций, то большинство из них можно заменить кодами:
- Форма обратной связи без плагинов
- Карта сайта без плагинов
- Редирект после первого комментария
Данный список постоянно пополняется. Так, что ждем вас еще.
Чистка базы данных
По мере развития и роста проекта база данных имеет свойство увеличивать свой объем и становится более громоздкой, что приводит к ее более медленной работе. Появляется всякий мусор в виде огромного количества ревизий, ненужных таблиц и так далее.
Все это нужно периодически чистить. Можно делать это с помощью плагинов, но я не сторонник таких методов. Предпочитаю делать все ручками. Тем более, что делается это не каждый день.
Нам потребуется некий список запросов, которые нужно выполнить через phpMyAdmin нашего хостинга.
Вот сами запросы.
- 1я строчка — удаляем все ревизии;
- 2я строчка — очищаем корзину;
- 3я строчка — оптимизируем таблицы;
- 4я строчка — удаляем все спам комментарии;
- 5я строчка — удаляем пингбэки;
- 6я строчка — отключаем пингбэки;
- 7я строчка — удаляем информацию о последних редактированиях постов и еще некоторые моменты.
Заходим в phpMyAdmin своего хостинга и выбираем свою базу данных, которую будем чистить. Нас интересует пункт SQL.
«>
После перехода в данный пункт мы должны вставить список запросов, который я дал выше и выполнить их.
«>
После выполнения запроса должно выдать результат очистки базы данных. Количество очищенной информации будет у всех разное. Все зависит от вашего сайта и количества мусора, которого вы насобирали. У меня очистило 102 строки.
«>
Удалились и ревизии, и корзина, и неиспользуемые данные. В общем, все пучком. Такое действие делайте хотя бы раз в месяц, если активно развиваете ресурс.
Друзья, вот и все, о чем я хотел поведать в данном большом материале. Можно было бы его разбить на несколько частей. Но я решил сделать, так сказать пошаговое руководство к действию для новичков и не только.
Надеюсь, что использовав все эти фишки, вы значительно ускорите свой сайт. Я не давал ничего нерабочего. Сам все проделал и получил замечательные результаты. Берите все на вооружение.
Если вам что-то непонятно, то обязательно пишите свои комментарии, а я пошел готовить новые полезные материалы.
На очереди масса полезных статей, в которых я также собрал только рабочую информацию, а главное — ее мало кто использует. А зря.
Ну все. До встречи в новых материалах. Пока!
С уважением, Константин Хмелев!
kostyakhmelev.ru
1. Используйте сеть доставки содержимого
Сеть доставки содержимого (CDN) – это группа серверов, которые предоставляют пользователю страницы сайтов и другой контент в соответствии с его местонахождением, источником страницы и ее сервером.
Сеть доставки содержимого может справляться с интенсивным трафиком и ускорять доставку контента.
Отличный инструмент для блогов на WordPress – Cloudflare. С его помощью можно ускорить работу сайта и оптимизировать его под разные устройства. Кроме того, инструмент бесплатен.
Также Cloudflare предлагает сервисы безопасности. Они помогают защитить сайт от сканеров, ботов и других злоумышленников.
2. Сжимайте изображения
Еще одним эффективным способом сократить время загрузки страницы и увеличить скорость сайта является сжатие изображений. Если вы используете сеть доставки содержимого, то часть работы уже сделана. Но не на 100 процентов.
Существует множество плагинов, которые сжимают все изображения на вашем сайте и аналогичным образом обрабатывают новые картинки при загрузке в админку. Один из них – ShortPixel.
Мы используем его на SEJ и на других сайтах. И довольны результатом.
Чем хорош этот плагин? Помимо того, что он сжимает все картинки, ShortPixel сокращает время, необходимое на резервное копирование, гарантирует, что все обработанные файлы безопасны и защищены. Кстати, сжатие никак не отражается на качестве изображения – оно остается неизменным, вне зависимости от изначального размера.
3. Удалите рекламные скрипты и всплывающие окна
Сегодня многие страницы сайтов содержат сторонний скрипт, который либо запускает рекламу, либо использует всплывающие окна для конверсии. Да, конечно, вы хотите увеличить свою аудиторию и получить больше клиентов. Но все-таки ключевое понятие здесь – баланс.
На самом деле, совсем избавиться от рекламных скриптов и всплывающих форм практически невозможно. Но для увеличения скорости это и не нужно. Достаточно просто уменьшить их влияние на производительность.
Первое, что нужно сделать – это определить сторонние скрипты, которые запускаются на вашем сайте, узнать, откуда они появляются и как влияют на метрику вашего блога.
Для этого есть специальные инструменты. Один из моих любимых – Pingdom. Мне он нравится, поскольку очень детален в анализе – Pingdom оценивает каждый файл и сценарий, так что вы получаете подробную информацию о скорости загрузки элементов.
То же правило применяется к плагинам всплывающих окон.
Знание того, какие из них лучше всего подходят для повышения показателей конверсии и увеличения количества подписок на рассылку, позволяет определить, какие плагины нужно сохранить, а какие – удалить.
Один из самых быстрых плагинов – OptinMonster (партнер StudioPress).
4. Установите плагин кэширования
Еще один эффективный способ сократить время загрузки сайта – установить плагины для кэширования. Они создают статическую версию вашего блога и именно ее предоставляют посетителям сайта. Это сокращает время загрузки страницы пополам.
Эти плагины просты в установке. Они позволяют выбирать страницы для кэширования – конкретные или все – и предлагают множество других параметров сжатия содержимого. При необходимости их можно легко отключить.
Конечно, плагинов с таким набором функций гораздо больше, чем те два, которые мы упомянули. И по большей части они одинаково удобны. Решить, какой будет эффективнее для вашего сайта можно только методом тестирования.
5. Отключите плагины, которые вы не используете
Ну правда, зачем вам столько? Тонны плагинов WordPress замедляют ваш сайт. Но вы же не пользуетесь ими всеми, не так ли?
Просто посмотрите на все то, что установили за время существования блога и отключите элементы, которые не использовали или могли бы не использовать без ущерба для функциональности сайта. Да, некоторые плагины могут показаться супер важными из-за того, что улучшают внешний вид блога, но так ли это важно, если из-за низкой скорости посетители все равно уходят на другие сайты?
6. Еще раз оптимизируйте медиа
Когда мы работали над оптимизацией SEJ, столкнулись с проблемой. Она заключалась в том, что даже после сжатия изображений, удаления рекламных скриптов и установки плагинов кэширования, все еще оставалось несколько форм медиа, которые замедляли загрузку страниц.
С проблемой мы справились с помощью BJ Lazy Load. Это плагин с отложенной загрузкой изображений. Сначала он отображает весь текстовый контент, а затем, когда пользователь прокручивает страницу вниз, загружает изображения и другие формы медиа. Таким образом, пользователю не нужно ждать загрузки множества файлов перед тем, как он получит доступ к основному содержимому.
Что мне действительно нравится в BJ Lazy Load, так это то, что помимо изображений, он точно также загружает и прочие вложенные файлы, iFrame и видео на YouTube.
6.Бонусный совет: попросите хостинг о помощи
Если вы работаете с платформой WordPress, вам следует сотрудничать с хостинговой компанией, которая специализируется на этой системе управления контентом. Например, с WP Engine, Presslabs или Synthesis от Rainmaker.
Я работал со всеми тремя. Поэтому могу с полной уверенностью сказать, что если вы обратитесь к ним и спросите, как можно ускорить ваш сайт, они помогут. Ведь это в их интересах: чем быстрее ваш сайт, тем меньше нагрузка на их серверы.
В заключение
Все больше и больше людей обращаются к мобильным устройствам для доступа в интернет. Поэтому важно оптимизировать блоги для мобильного использования и находить способы, которые сокращают время загрузки страницы.
Помните, что показатели отказов увеличиваются, когда загрузка страниц слишком медленная. Даже если вы создаете крутой контент, немногие пользователи согласятся тратить свое драгоценное время на ожидание загрузки. Скорее, они уйдут на другой, более быстрый сайт.
Оригинал статьи.
semantica.in
Этап 1. Определите "рамки" оптимизации скорости сайта
Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, медиафайлов и других файлов, которые загружаются на вашем сайте.
Определив "рамки", мы будем знать конечную, к которой нужно идти. А поможет нам найти данные "рамки оптимизации скорости сайта" сервис, созданный Джонатаном Филдингом — www.performancebudget.io.
Посмотрите небольшое видео по работе с данным сайтом, где я наглядно показал что нужно выбрать, чтобы определить "рамки оптимизации скорости сайта":
Этап 2. Узнаем реальную скорость сайта
Как я уже писал выше, Google PageSpeed Insights это хороший инструмент для проверки оптимизации скорости сайта, но все же он "дает" лишь поверхностные советы. Вы можете сперва проверить с помощью этого инструмента, а затем переходить к более подробной статистике, которую дают следующие сервисы:
- WebPagetest
- GTmetrix
Будь внимательны когда делаете тестирование с помощью данных сервисов, потому что время загрузки может отличаться из-за того, что сервер вашего сайта и сервер на котором идет тест находятся далеко друг от друга.
Сервис WebPagetest позволяет выбрать сервер тестирования и браузер. Данный сервис показывает в виде диаграмм каких ресурсов (CSS, JS) больше всего в процентном соотношении на вашем сайте. Что больше всего радует, так это подробная статистика по запросам в виде графиков. Также есть информация о том, к каким файлам применяется GZIP сжатие и становится сразу понятно все ли верно указали в настройках .htaccess.
А вот сервис GTmetrix позволяет увидеть график загрузки файлов, так еще к этому все показывает подробные советы по оптимизации каждого нюанса на сайте. И здесь все разбивается на более детальные моменты оптимизации.
Зная реальную информацию о своем сайте, сейчас вы можете сравнить данную цифру с той, где были показаны рамки оптимизации скорости сайта.
И только сейчас вы можете воспользоваться чек-листом, который находится ниже, в полной мере. В данном чек-листе я рассматриваю только те способы оптимизации, которые не потребуют от вас дополнительных вложений в плане денег, а необходимо лишь желание и немного усидчивости, чтобы пройтись и оптимизировать каждый пункт.
(Чек-лист) Самостоятельная оптимизация скорости сайта
1. Оптимизация изображений
- Используйте изображения именно того разрешения, которое необходимо на странице.
Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании галерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.
- Объедините все иконки (если SVG, то в SVG-спрайт) в одно изображение (спрайт).
Это уменьшит количество запросов к серверу. Сейчас существуют онлайн решения: css.spritegen.com, iconizr. Так и решения для сборщиков (для Gulp — gulp-svg-sprites, для Grunt — grunt-svg-sprite, для Webpack — Webpack SVG sprite loader).
- Оптимизируйте изображения: PNG, JPG, SVG.
Здесь есть как онлайн решения: TinyPNG, Kraken.io. Так и автоматизированные решения для сборщиков: Gulp — gulp-imagemin, gulp-pngquant; Grunt — grunt-contrib-imagemin; Webpack — imagemin-webpack-plugin.
- Deferring images without lazy loading or jQuery — https://varvy.com/pagespeed/defer-images.html
2. Уменьшите количество запросов
- Используйте SVG-спрайты и PNG-спрайты.
Об этом я писал в блоке "Оптимизация изображений", который находится выше.
- Объедините все CSS файлы в один.
Как я говорил раннее — это уменьшит количество запросов к серверу. Плагины для сборщиков (для Gulp — gulp-concat-css, для Grunt — grunt-concat-css, для Webpack — css-concat-loader).
- Объедините все JS файлы в один по возможности.
Плагины для сборщиков (для Gulp — gulp-concat-js, для Grunt — grunt-contrib-concat, для Webpack — webpack-uglify-js-plugin).
- Максимально уменьшите количество запросов к базе данных.
Все, что можно загружать без запросов к базе данных, загружайте без ее использования — статично. Так как на запросы и ответ уходит время, то будет логичным, если мы максимально уменьшим данный показатель.
3. Оптимизируем CSS и JS
- Сжимаем все CSS файлы.
Онлайн решения: CSS Compressor, CSS Minifier. Плагины для сборщиков: Gulp — gulp-clean-css; Grunt — grunt-contrib-cssmin; Webpack — clean-css-loader.
- Сжимаем все JS файлы.
Сервисы онлайн: JavaScript Compression Tool, JS Minifier. Плагины для сборщиков: Gulp — gulp-uglify; Grunt — grunt-contrib-compress; Webpack — плагин, который указан в прошлом пункте также сжимает JS.
- Загружайте все CSS и JS файлы в самом конце. Размещайте их перед закрывающим тегом <body>.
Необходимо между тегами <style> и </style> вставить самые важные CSS свойства. То есть именно те, которые отвечают за вывод первого экрана на сайте. Потому что эту часть сайта пользователь видит в самом начале. А затем догрузить оставшуюся часть CSS из файла, а уже после JS.
- Удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта и т.д.
Эти параметры указываются в адресе через знак ?v=1.0.1 (вопрос).
Вывод
Надеюсь вы уже поняли, что это была лишь часть онлайн чек-листа по самостоятельно оптимизации сайта и его скорости загрузки. Я решил разобрать все детали в оптимизации скорости загрузки. Если будут появляться дополнения к статье, я обязательно буду ее дополнять, а также готовить следующую часть чек-листа.
Если вы знаете интересное решение, которое позволяет ускорить загрузку страницы, пожалуйста, пишите об этом в комментариях, будем вместе делиться полезными материалами и вместе сделаем интернет еще быстрее и комфортнее! 😉
www.sitehere.ru
Короткое резюме по ускорению сайта на WordPress
Основное влияние на скорость оказали такие факторы как смена хостинга с использованием SSD дисков, оптимизация изображений, включение плагина кеширования W3 Total Cache, оптимизация БД сайта, удаление старых ревизий, включение сжатия файлов на стороне сервера, включение кеша для статичных файлов на стороне браузера. Далее следует полная развернутая инструкция по ускорению сайта на WordPress.
Полная инструкция как ускорить сайт на WordPress
1. Качественный SSD хостинг, быстрый пинг
Хостинг должен быть на SSD дисках. Желательно чтобы сервера хостинга располагались в вашей географической зоне, на которую ориентирован сайт. Если хостинг будет на SSD, но в США, а ваш блог ориентирован на Россию и страны СНГ, то толку от такого SSD будет мало. Так как будет идти долгий пинг для связи с сервером. Поэтому месторасположение дата центра хостинга также важно. Это важный параметр хостинга — быстрый пинг, отклик серверов. И чтобы хостер не делал оверселлинг услуг. Про тип хостинга — конечно лучше брать как VDS (виртуальный выделенный сервер) с необходимыми для вашего сайта параметрами, вместо обычного shared хостинга. Какую именно конфигурацию VDS выбрать — это зависит от нагрузки которую ваш сайт создает не сервер и от размера его суточной аудитории. Я бы советовал брать минимум 1Gb Ram, 1 ядро процессора и 10 Гб SSD. В начале у меня был VDS на обычных HDD дисках, затем я поменял его на SSD VDS хостинг.
Хостинг «До»:
VPS хостинг FreeHost.com.ua
Размер диска: 30 Gb HDD
Память: 2 Gb RAM
Частота CPU: 2,2 Ghz
Количество CPU: 1
Расположение серверов: Киев, Украина
Стоимость: 12,8 $/месяц
Хостинг «После»:
VDS хостинг от ihor.ru
Размер диска: 20 Gb HDD
Память: 1 Gb RAM
Частота CPU: 2,4 Ghz
Количество CPU: 1
Расположение серверов: Москва, Россия
Стоимость: 250 руб/месяц (примерно 5$/месяц)
По скриншотам теста скорости загрузки сайта, видно что на старом хостинге время ответа сайта достигало 12,3 секунды. Что непомерно много. На новом хостинге от ihor.ru время ответа сайта составляло 1,2 секунды, что в разы быстрее, по сравнению со старым хостингом. На этот показатель повлияли SSD диски, и более лучший дата центр с лучшим и более быстрым каналом.
Смена хостинга является одной из главных причин ускорения работы сайта.
2. Оптимизировать изображения
Проверьте используете ли вы оптимизированные jpg файлы изображений. Которые занимают небольшой размер и при этом обладают хорошим качеством. В Photoshop сохранять такие изображения можно командой Save for Web (Ctrl + Shift + Alt + S), или через функцию export assets если вы используете Photoshop CC. Не стоит сохранят большие непрозрачные картинки в .png формате, он занимает слишком много места, и для этого лучше использовать jpeg формат. Формат png подходит для небольшой графики которая используется в оформлении сайта, в шаблоне, это могут быть изображения кнопок, буллеты, изображения с прозрачным фоном.
Некоторые миниатюры к записям у меня были сохранены в .png формате, и размер изображения достигал 300 Кб. Пересохранив изображения в jpg формат, каждая миниатюра стала занимать 60-90 Кб в среднем. Таким образом вес некоторых изображений уменьшился в 3-4 раза, без потери качества.
Существует специальный плагин для оптимизации изображений – WP Smush. Признаюсь — я ним не пользуюсь, так как сам перед публикацией оптимизирую все изображения на предмет размера и качества. Но если вы хотите автоматизировать процесс — то используйте этот плагин.
3. Настройка wp-config.php для ускорения работы сайта на wordpress
Небольшой способ снизить загрузку на хостинг — отредактировать файл 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 загружает много ненужных параметров.
4. Настройка Robots.txt — запрет на индексацию ненужным сайтам.
Файл robots.txt регулирует доступ различных поисковых роботов к страницам сайта. Предлагаю добавить следующие строки в файл, сразу же перед директивой Host. Сделаем мы это для того чтобы запретить на сайт вход различным поисковым роботам, грабберам и парсерам, которые могут воровать контент и создавать ненужную нагрузку на хостинг.
Например, помимо роботов от Yandex и Google на сайт также заходит поисковый робот от поисковика Yahoo. Таким кодом можно запретить Yahoo роботу просматривать сайт:
User-agent: Slurp Disallow: /
Я прописал следующие запрещающие директивы:
User-agent: grub-client Disallow: / User-agent: grub Disallow: / User-agent: looksmart Disallow: / User-agent: WebZip Disallow: / User-agent: larbin Disallow: / User-agent: b2w/0.1 Disallow: / User-agent: psbot Disallow: / User-agent: Python-urllib Disallow: / User-agent: NetMechanic Disallow: / User-agent: URL_Spider_Pro Disallow: / User-agent: CherryPicker Disallow: / User-agent: EmailCollector Disallow: / User-agent: EmailSiphon Disallow: / User-agent: WebBandit Disallow: / User-agent: EmailWolf Disallow: / User-agent: ExtractorPro Disallow: / User-agent: CopyRightCheck Disallow: / User-agent: Crescent Disallow: / User-agent: SiteSnagger Disallow: / User-agent: ProWebWalker Disallow: / User-agent: CheeseBot Disallow: / User-agent: LNSpiderguy Disallow: / User-agent: ia_archiver Disallow: / User-agent: ia_archiver/1.6 Disallow: / User-agent: Teleport Disallow: / User-agent: TeleportPro Disallow: / User-agent: MIIxpc Disallow: / User-agent: Telesoft Disallow: / User-agent: Website Quester Disallow: / User-agent: moget/2.1 Disallow: / User-agent: WebZip/4.0 Disallow: / User-agent: WebStripper Disallow: / User-agent: WebSauger Disallow: / User-agent: WebCopier Disallow: / User-agent: NetAnts Disallow: / User-agent: Mister PiX Disallow: / User-agent: WebAuto Disallow: / User-agent: TheNomad Disallow: / User-agent: WWW-Collector-E Disallow: / User-agent: RMA Disallow: / User-agent: libWeb/clsHTTP Disallow: / User-agent: asterias Disallow: / User-agent: httplib Disallow: / User-agent: turingos Disallow: / User-agent: spanner Disallow: / User-agent: InfoNaviRobot Disallow: / User-agent: Harvest/1.5 Disallow: / User-agent: Bullseye/1.0 Disallow: / User-agent: Mozilla/4.0 (compatible; BullsEye; Windows 95) Disallow: / User-agent: Crescent Internet ToolPak HTTP OLE Control v.1.0 Disallow: / User-agent: CherryPickerSE/1.0 Disallow: / User-agent: CherryPickerElite/1.0 Disallow: / User-agent: WebBandit/3.50 Disallow: / User-agent: NICErsPRO Disallow: / User-agent: Microsoft URL Control - 5.01.4511 Disallow: / User-agent: DittoSpyder Disallow: / User-agent: Foobot Disallow: / User-agent: WebmasterWorldForumBot Disallow: / User-agent: SpankBot Disallow: / User-agent: BotALot Disallow: / User-agent: lwp-trivial/1.34 Disallow: / User-agent: lwp-trivial Disallow: / User-agent: BunnySlippers Disallow: / User-agent: Microsoft URL Control - 6.00.8169 Disallow: / User-agent: URLy Warning Disallow: / User-agent: Wget/1.6 Disallow: / User-agent: Wget/1.5.3 Disallow: / User-agent: Wget Disallow: / User-agent: LinkWalker Disallow: / User-agent: cosmos Disallow: / User-agent: moget Disallow: / User-agent: hloader Disallow: / User-agent: humanlinks Disallow: / User-agent: LinkextractorPro Disallow: / User-agent: Offline Explorer Disallow: / User-agent: Mata Hari Disallow: / User-agent: LexiBot Disallow: / User-agent: Web Image Collector Disallow: / User-agent: The Intraformant Disallow: / User-agent: True_Robot/1.0 Disallow: / User-agent: True_Robot Disallow: / User-agent: BlowFish/1.0 Disallow: / User-agent: JennyBot Disallow: / User-agent: MIIxpc/4.2 Disallow: / User-agent: BuiltBotTough Disallow: / User-agent: ProPowerBot/2.14 Disallow: / User-agent: BackDoorBot/1.0 Disallow: / User-agent: toCrawl/UrlDispatcher Disallow: / User-agent: WebEnhancer Disallow: / User-agent: suzuran Disallow: / User-agent: VCI WebViewer VCI WebViewer Win32 Disallow: / User-agent: VCI Disallow: / User-agent: Szukacz/1.4 Disallow: / User-agent: QueryN Metasearch Disallow: / User-agent: Openfind data gathere Disallow: / User-agent: Openfind Disallow: / User-agent: Xenu's Link Sleuth 1.1c Disallow: / User-agent: Xenu's Disallow: / User-agent: Zeus Disallow: / User-agent: RepoMonkey Bait & Tackle/v1.01 Disallow: / User-agent: RepoMonkey Disallow: / User-agent: Microsoft URL Control Disallow: / User-agent: Openbot Disallow: / User-agent: URL Control Disallow: / User-agent: Zeus Link Scout Disallow: / User-agent: Zeus 32297 Webster Pro V2.9 Win32 Disallow: / User-agent: Webster Pro Disallow: / User-agent: EroCrawler Disallow: / User-agent: LinkScan/8.1a Unix Disallow: / User-agent: Keyword Density/0.9 Disallow: / User-agent: Kenjin Spider Disallow: / User-agent: Iron33/1.0.2 Disallow: / User-agent: Bookmark search tool Disallow: / User-agent: GetRight/4.2 Disallow: / User-agent: FairAd Client Disallow: / User-agent: Gaisbot Disallow: / User-agent: Aqua_Products Disallow: / User-agent: Radiation Retriever 1.1 Disallow: / User-agent: Flaming AttackBot Disallow: / User-agent: Oracle Ultra Search Disallow: / User-agent: MSIECrawler Disallow: / User-agent: PerMan Disallow: / User-agent: searchpreview Disallow: /
Вот пример моего файла robots.txt
Запретив индексацию сайта этим способом, вы сможете снизить нагрузку на хостинг, следовательно ускорить загрузку сайта, высвободив ресурсы сервера.
5. Настройка файла .htaccess для снижения нагрузки на сервер.
В файле .htaccess — задаются дополнительные команды для хостинга.С помощью специальных настроек можно убрать лишнюб нагрузку на сервер, и ускорить работу сайта.
Настройка №1. Часто с сайтов копируют информацию вместе с картинками, не изменяя адреса картинок. И когда такое происходит картинки лежащие на нашем хостинге загружаются на других сайтах, и это создает ненужную нагрузку на хостинг.
Следующим кодом можно запретить загружать изображения нашего сайта на сторонних сайтах:
RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?undsoft.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.net/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?feedburner.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?mail.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?poisk.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?yourdomain.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^$ [NC] RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]
После добавления этого кода, на чужом сайте вместо вашего изображения будет выходить ошибка.
Настройка №2. В файле .htaccess можно и следует указать кэширование для некоторых объектов сайта (изображений, css и js фалов) чтобы браузер кешировал их на своей стороне и не загружал их каждый раз. Для этого в .htaccess ниже первого кода добавляем следующий код:
FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|gif|png|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 year" </filesmatch> </ifmodule>
Настройка №3. Включим gzip сжатие страниц перед отправкой их пользователю. Вставим в .htaccess следующий код:
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>
Настройка №4. Ограничение спама в комментариях. Большинство спам комментариев отправляются автоматически. Этим кодом мы запретим напрямую отсылать комментарии минуя форму комментирования. Теперь спам боты не смогу отправлять комментарии.
RewriteEngine On RewriteCond %{REQUEST_METHOD} POST RewriteCond %{REQUEST_URI} .wp-comments-post.php* RewriteCond %{HTTP_REFERER} !.*yourdomain.ru.* [OR] RewriteCond %{HTTP_USER_AGENT} ^$ RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
Настройка №5. Если вы пользуетесь системой FeedBurner, то у вас явно установлены плагины, которые отправляют RSS-контент на сайт FeedBurner. Сегодня вы можете их удалить, потому что перенаправить контент можно и без плагинов, уменьшив нагрузку на хостинг.
RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC] RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC] RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://yourdomain.ru [R=302,NC,L]
ВНИМАНИЕ!!! Не забудьте в примерах выше заменить адрес yourdomain.ru на адрес своего сайта.
6. Оптимизация базы данных
Важное значение в скорости работы сайта имеет База Данных. При сохранении постов по нескольку раз WordPress создает ревизии записи — состояния постов в разные моменты их редактирования. В результате со временем база данных содержит большое количество ненужных ревизий постов, и их необходимо очищать и оптимизировать. Сделать это можно с помощью плагина Optimize DB. Установить его можно из админки WordPress. Например запустив его на своем сайте я удалили более 1200 ревизий постов. Что значительно улучшило скорость работы БД.
7. Оптимизация кода шаблона (темы)
Оптимизация кода темы заключается в том чтобы убрать ненужные запросы и/или заменить их на конкретные значения, например название блога.
Настройка №1. Найти код, который отвечает за стили в файле header.php:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Заменить на:
<link media="screen" type="text/css" href="http://yoursite.ru/wp-content/themes/yourthemes/style.css" rel="stylesheet">
Внимание!!! Не забудьте изменить yoursite.ru на ссылку своего сайта.
Настройка №2. Изменить код пинбеков:
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Заменить с исправлением yoursite.ru на свою ссылку:
<link href="http://yoursite.ru/xmlrpc.php" rel="pingback"/>
Настройка №3. Изменение кода RSS ленты:
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
Заменить с исправлением yoursite.ru на свою ссылку:
<link href="http://yoursite.ru/feed" title="ВАШ САЙТ RSS Feed" type="application/rss+xml" rel="alternate"/>
Настройка №4. Довольно часто в подвале сайта (footer.php), разработчики тем оставляют совершенно ненужные запросы к Базе данных. Например:
<?php get_bloginfo('name') ?>
Данный код просто отображает название сайта, что бы лишний раз не обращаться к базе данных разумнее своими руками один раз написать название и не нагружать сайт. Этот же код можно поискать и в других разделах сайта, но прежде чем удалять, подумайте.
Некоторые маленькие советы, которые позволят ускорить загрузку сайта:
1) Если ваш сайт не использует комментарии, не стоит их скрывать с помощью плагинов, это создает совершенно ненужную нагрузку. Так как вам комментарии совершенно не нужны, просто удалите следующий код из файла темы (single.php):
<?php comments_template(); ?>
2) Старайтесь не использовать внешние скрипты, такие как, комментарии от Вконтакте, различные виджеты социальных сетей. Да, это выглядит красиво и эффектно, но создает приличную нагрузку на сайт. Из примеров могу сказать что мой сайт значительно грузил код веб-визора от ЯндексМетрики, виджет Add.This. Кнопки соц сетей я поменял на отельный JS плагин.
3) Почистите весь код вашего сайта от комментариев, данные комментарии вставляются с помощью тегов <!-код-> и /*код/. Оставьте только нужное, так как сайту приходится тратить лишние силы на их загрузку…
4) Старайтесь размещать все скрипты в конце страницы перед закрвающим тегом </body>, чтобы сперва загружался основной сайт, а уже потом загружались скрипты.
5) Все дополнительные коды на подобии счетчика сайта от Live Internet, либо Google Analytics стоит размещать в подвале сайта, что бы они так же как и другие скрипты грузились только в самую последнюю очередь.
8. WordPress плагины — для ускорения скорости загрузки сайта
Несколько советов по работе с плагинами, чтобы оптимизировать их нагрузку на сайт.
1) Удалите ненужные плагины. Ненужные плагин Со временем работающие плагины накапливаются, и можно насобирать много ненужных пагинов которые помимо занимаемого места будут создавать ненужную нагрузку на сайт.
2) Деактивируйте ненужные плагины. Постарайтесь использовать как можно меньше Активированных плагинов. Некоторым плагинам не обязательно давать работать постоянно.Например плагин для оптимизации БД можно включать только на период работы с ним.
10. Ускорение сайта с помощью кэширования
Кэширование — от слова кэш, то есть сохранение определенных данных, которые следует постоянно загружать. То есть сайт сохраняет определенные данные, и при переходе на страницу, браузер пользователя просто скачивает сохраненные данные в виде страницы. Сайту не приходится обращаться к серверу и базе данных, потом ждать отклика, собирать нужную информацию и отдавать их монитору вашего читателя.
1) WP Super Cache – лучший и бесплатный плагин для кэширования в WordPress. Рекомендую его установить и использовать. Также хорошие плагины WP Total Cache, WP Rocket.
2) Плагин Autoptimize – рекомендуют использовать вместе с Wp Super Cache. Никаких сверх настроек делать не нужно, просто активируйте плагин, в разделе «Настойки» → «Autoptimize» поставьте галочки, и плагин будет работать. Будьте осторожны, проверьте работоспособность сайта после изменения настроек, что бы предостеречь себя от неприятностей.
3) Плагин WP Widget Cache – позволяет кэшировать виджеты, с чем не справляется плагин Wp Super Cache.
11. Используйте CDN сети для более быстрой загрузки контента
Еще один способ ускорить загрузку сайта — использовать CDN сети, Content Delivery Networks. Каждый раз когда пользователь открывает ваш сайт, он загружает всю информацию с вашего сервера, на котором расположен сайт. Если регион пользователя и регион расположения сервера с вашим сайтом одинаковы, скажем Москва Россия — то все олично. Но если пользователь заходит на Ваш сайт скажем с Азии, или США, то доставка контента к нему уже будет происходить с меньшей скоостью, т.к. тут влияет расстояние. Использование CDN сетей дает возможность загружать файлы вашего сайта (изображения, скрипты, стили) не только с вашего хостинга, а с дата-центров по всему миру. Таким образом заходя на сайт, пользователь автоматически загрузит файлы сайта из наиболее близкой для него точки с серверами CDN сети, что значительно ускорит загрузку сайта.
Можно исюпользовать плагин Jetpack Photon который дает возможность использовать CDN сеть WordPress для загрузки изображений вашего сайта.
Можно использовать другие CDN сети, например MaxCDN, NGENIX или Amazon CloudFront. Я CDN сети не использовал, поэтому в этом пункте ограничися лишь кратким ознакомительным описанием этой технологии.
Подключая свой сайт к CDN сети, все файлы сайта будут загружаться с мощнейших дата-центров по всей планете. Обычно такие услуги платные, стоимость начинается от 9$, и используют их очень популярные сайты с огромной посещаемостью.
Несколько мелочей, которые в также помогут вам ускорить загрузку сайта:
- На главной странице сайта выводите только анонсы статей, не нужно выводить полные статьи.
- Очень большие статьи разделяйте на страницы с помощью тега <!-nextpage->.
- Не стоит выводить на главной странице больше 5-6 статей.
- Не стоит выводить под статьей больше 50 комментариев, пользуйтесь так же переключением страниц между комментариями.
- Установите поиск по сайту от Google или Yandex. Сайт будет искать информацию быстрее.
На этом у меня все дорогие друзья, спасибо за ваше огромное терпение, надеюсь вам понравилось, до скорых встреч.
rightblog.ru
Вводные факты
В первую очередь скорость загрузки влияет на поведенческие факторы: глубину просмотра и количество отказов. У быстрых сайтов выше показатель конверсии. Также от скорости косвенно зависит успех поискового продвижения: при прочих равных Google учитывает время загрузки страницы.
- Инженеры Google выяснили, что пользователь замечает даже пустяковую задержку загрузки — 0,4 секунды;
- Пользователь с большой вероятностью покинет страницу, если та загружается 3+ секунд;
- Мобильные пользователи готовы ждать немного дольше — 6-10 секунд;
- 79% пользователей интернет-магазинов не сделают повторную покупку, если в первый раз сайт загружался долго.
Эксперимент Financial Times
Представители деловой газеты провели эксперимент с новым сайтом издания.
Участников поделили на две группы. Первая, контрольная, просматривала страницы с обычной скоростью загрузки, а вторая — с задержкой в пять секунд. Во втором этапе приняли участие уже четыре группы: контрольная и ещё три, участникам которых «досталась» задержка в одну, две и три секунды. Глубину просмотра в течение сессии взяли за коэффициент конверсии (рассматривали пользователей, которые посетили хотя бы две страницы) и посчитали разницу между конвертированными пользователями в каждой из групп.
При посещении двух страниц разница между графиками не бросается в глаза, но при посещении трёх и более страниц заметно постепенное снижение по всем вариантам задержки загрузки — и чем больше глубина просмотра, тем значительнее разница. При самых низких скоростях, с задержкой в три и пять секунд, коэффициент конверсии оказался на 7,5% и 11% ниже по сравнению с контрольной группой.
Чем больше задержка загрузки, тем меньше просматривается страниц за сессию. Результат исследования говорит о том, насколько скорость загрузки важна для вовлечённости пользователей и, в конечном счёте, конверсии.
Скорость загрузки можно измерить с помощью этих сервисов:
- Проверка скорости сайта PR-CY,
- GTmetrix,
- PageSpeed.
Как увеличить скорость загрузки сайта
1. Уменьшите объем загружаемых страниц
Используйте сжатие gzip, это сократит время передачи файлов браузеру. Объём передаваемых данных уменьшится в 4-5 раз, а скорость загрузки — увеличится.
Nginx
Для включения сжатия gzip в Nginx, измените конфигурацию сервера и добавьте эти строки:
server {
….
gzip on;
gzip_disable «msie6»;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
}
Apache
Сначала убедитесь, что подключен модуль mod_deflate. После этого нужно добавьте в файл .htaccess следующие строки:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Уровень сжатия
Gzip поддерживает уровень сжатия от 1 до 9. В Nginx его можно регулировать таким образом:
gzip_comp_level 5;
Оптимальный уровень сжатия — 5.
2. Уменьшите объём графики
Удалите ненужные изображения. Там, где это возможно, используйте текст вместо заведомо более тяжёлой графики.
Формат JPG лучше всего подходит для фотографий. PNG предпочтительнее для остальных элементов сайта — иконок, иллюстраций и пр., при условии, что изображения правильно сжаты. Учитывайте, что сайт будет просматриваться на разных устройствах и в разных браузерах.
Вы можете использовать одно масштабируемое изображение, но оно будет занимать много места и тормозить загрузку страницы. Лучше использовать несколько изображений, адаптированных под разные устройства, чтобы браузер загрузил нужное — это можно сделать при помощи плагина Imager. Он заменяет плейсхолдеры прозрачными изображениями, подтягивает к каждому атрибут src и назначает нужный размер, после чего вам остаётся только загрузить несколько вариантов изображения разных размеров.
Как это работает:
<div style=»width: 240px»>
<div class=»delayed-image-load» data-src=»httр://placehold.it/{width}» data-alt=»alternative text»> </div>
</div>
<script>
new Imager({ availableWidths: [200, 260, 320, 600] });
</script>
Сжать изображения можно при помощи функции сохранения веб-страниц в графических редакторах или сервисов PunyPNG, TinyPNG и других.
3. Уменьшите количество запросов браузера
Этот пункт перекликается с предыдущим. Один из способов уменьшить количество запросов браузера — удалить со страницы часть элементов.
Используйте CSS-спрайты — графические файлы, содержащие сразу несколько изображений. Это оптимальный способ, если на сайте много маленьких изображений и иконок. Объедините несколько CSS- и JS-файлов в один, это сократит количество HTTP-запросов.
Чтобы посмотреть количество запросов браузера в Chrome, войдите в «Инструменты разработчика» (Настройки → Дополнительные инструменты) и перейдите во вкладку Network.
4. Включите кэширование данных
Настройте сервер так, чтобы браузер пользователя кэшировал данные — в этом случае при первом посещении сайта некоторые элементы страниц (изображения, CSS- и JS-файлы) сохранятся автоматически. В следующий раз браузер не потратит время на их загрузку.
Однако такой способ помогает увеличить скорость загрузки только при повторных посещениях сайта.
Как включить кэширование?
Используйте модуль headers веб-сервера Apache, который контролирует и изменяет заголовки HTTP-запросов и HTTP-ответов. Браузер загружает с сервера в локальный кэш данные, которые редко изменяются, и при посещении сайта загружает их уже из кэша. Также можно кэшировать файлы определённых типов на заданное время, по истечении которого они будут загружены с сервера заново.
Это можно сделать так:
<FilesMatch «.(gif|jpeg|png|swf|js|css|pdf|ico)$»>
Header set Cache-Control «max-age=1234000»
</FilesMatch>
Укажите нужные расширения файлов в конструкции FilesMatch, где для них устанавливается заголовок Cache-Control и переменная max-age, с помощью которой указывается время хранения файлов в секундах. Те файлы, которые не нужно кэшировать, просто не включайте в список.
Также можно запретить кэширование файлов. Добавьте приведённый ниже код в .htachess, предварительно указав, какие типы файлов кэшировать не нужно:
<FilesMatch «.(pl|php|cgi|fcgi|scgi)$»>
Header unset Cache-Control
</FilesMatch>
Вы также можете управлять кэшированием с помощью модуля expires. Он контролирует установку HTTP-заголовков для кэширования со стороны браузера. Укажите период хранения данных в зависимости от времени, от последнего изменения файла или от времени доступа клиента.
Например, так:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault «access plus 2 month»
ExpiresByType image/png «access plus 4 months»
ExpiresByType image/swf «access plus 4 months»
</IfModule>
Или так:
ExpiresByType text/html «access plus 2 month 14 days 7 hours»
ExpiresByType image/gif «modification plus 8 hours 3 minutes»
www.cossa.ru