План статьи
Для Google, Яндекса и других поисковых систем скорость загрузки сайта является важным фактором ранжирования. Рассмотрим ускорение загрузки и работы сайта на CMS WordPress. Результаты работы можно увидеть в конце поста.
Цель: Ускорить загрузку и работу сайта на CMS WordPress плагинами (без правки кода).
Шаг 1. Анализ текущей ситуации со скоростью загрузки.Ускорение этого блога я делал еще в феврале 2015 года, поэтому скриншота прошлого состояния не сохранилось. По памяти помню, что сервис PageSpeed Insights показывал скорость загрузки 50/55 для мобильных/ПК. Состояние было плачевное и я задумался про ускорение.
Проанализируйте свой сайт на WordPress с помощью сервиса Google PageSpeed Insights и если результат загрузки сайта меньше 85 — читайте дальше.
Шаг 2. Устанавливаем плагины для ускорения.WP Fastest Cache
Плагин для кэширования сайта, сжатия файлов, минимизации и объединения css, js, очень широкий функционал. Плагин в нужной комплектации бесплатный.
Зайдите в админке сайта на WP в «Плагины» -> «Добавить новый». Впишите название плагина, нажмите «Поиск». Первый плагин с изображением животного кошачьего типа — наш плагин. Устанавливаем.
EWWW Image Optimizer
Плагин для оптимизации изображений. Сжимает существующие и загружаемые картинки без потери качества.
Зайдите в админке сайта на WP в «Плагины» -> «Добавить новый». Впишите название плагина, нажмите «Поиск». Первый плагин с изображением молотка, который бьет по картинкам — наш плагин. Устанавливаем.
Шаг 3. Настройка ускорения сайта на WordPressНастроим кеширование и минимизацию css, js файлов. В панели администратора новым пунктом меню у вас появился WP Fastest Cache. Зайдите по ссылке, внизу вы увидите поле language, установите русский язык. Установите галочки во всех пунктах, как на скриншоте ниже. В другие вкладки плагина можете не заходить — там платные функции, за которые вам вряд ли захочется отдавать деньги.
После этого сожмём картинки на сайте. В панели админки WP наведите на медиафайлы, выберите пункт «Оптимизировать». В выбранном окне воспользуйтесь двумя функциями — оптимизацией картинок из библиотеки и оптимизация других картинок (шаблона, движка и т.д.). Этими действиями вы сжимаете уже существующие изображения на сайте, загружаемые после установки плагина картинки будут сжиматься автоматически при загрузке на сервер.
Всего 2 этих шага существенно ускорит загрузку страниц, что увеличит лояльность поисковых машин и улучшит отношение людей к вашему сайту на WordPress.
Шаг 4. Результаты ускорения сайта.Результаты шикарные. С 50 сразу стало 81 (опять-таки, по памяти). Почитав рекомендации Гугла нашел множество проблем загрузки, связанной с плагином, который предназначен для красивого вывода программного кода на блоге. После того, как я его снес — это значение поднялось до 91! Вот, что показала Яндекс Метрика — отчет по загрузке страниц:
По скриншоту четко видно, что скорость загрузки страниц снизилась с 1 секунды от 0.1 . Отмечу, что улучшились позиции в Google и даже в Яндексе, уменьшилось число отказов (некоторые люди, особенно с мобильным интернетом, не желают долго ждать и покидают сайт, если после перехода на сайт он сразу не начинает загружаться).
ДополнительноНе используйте оригиналы изображений, если необходимо вывести картинку в маленьком размере.
Это заметно снижает скорость загрузки и отношение Google к сайту. Простой пример — в моем блоге на главной вы увидите над лентой последних постов текст и небольшое фото. Если бы я поставил в атрибут src тега img ссылку на изображение оригинал разрешением ~1000×2000 и вывел картинку 100×100, серверу пришлось бы загружать изображение 1000×2000, браузер сжал бы ее до нужных размеров, которые я прописал в стилях отображения, но реально-то загружался оригинал. Поэтому я не поленился отресайзить её в Photoshop и только после этого использовать в шаблоне. Загружайте изображения ровно в таком разрешении, в котором хотите её отобразить.
Меньше графики — быстрее сайт.
Графика занимает в сотни и тысячу раз места больше, чем несколько строк в CSS и HTML. Старайтесь делать элементы сайта при помощи этих языков разметки во всех случаях, где это возможно.
Меньше плагинов — меньше запросов к базе данных.
Не ставьте плагины-пустишки, которые нужны для каких-то сомнительных целей, без которых можно обойтись. Поставив всего лишь десяток лишних плагинов, вы заметно увеличите нагрузку на базу данных, а соответственно и снизите скорость работы сайта.
Если у вас возникли проблемы с ускорением сайта на WordPress или возникли вопросы по теме — пишите в комментарии или на почту через форму слева — постараюсь помочь.
- Перевод
Скорость и отказоустойчивость – одни из тех факторов, что неизменно влияют на популярность вашего ресурса, ведь даже с лучшим в мире контентом медленно работающий сайт будет раздражать читателей и рано или поздно вы их потеряете. В этой статье мы будем оптимизировать самый популярный блоговый движок - Wordpress, работающий на PHP. А заодно рассмотрим несколько общих моментов в оптимизации сайтов.
1 Тестируем текущую скорость Чтобы узнать изменилось ли что-нибудь после нашей оптимизации, не помешает замерять для начала текущую скорость загрузки страниц блога, чтоб было с чем сравнивать. Есть несколько инструментов, которые помогут сделать это:Не забудьте обновить до последней версии PHP и Apache .
3.1 Отключите неиспользуемые сервисы Вы можете получить больше доступной оперативной памяти, отключив неиспользуемые службы и оптимизировав MySQL и Apache.- Удалите ClamD;
- Настроить SpamD на использование только 1 дочернего процесса;
- Удалите Mailman, если, конечно, вы не собираетесь запускать почтовый сервис.
query_cache_type = 1
query_cache_limit = 2M
query_cache_size = 20M
Чтоб настройки вступили в силу придется перезапустить сервис MySQL сервис.3.3 Кэш компилятора: XCache или Eaccelerator? Кэш компилятора увеличивает производительность откомпилированных скриптов на сервере, кэшируя их – это поможет сократить время выполнения PHP скриптов. Стоит попробовать и то и другое решение, однако по результатам опытов увеличение производительности при использовании Xcache на 5% выше, чем с Eaccelerator.3.4 Увеличьте максимальное число соединений на Apache Увеличение максимального количества соединений в httpd.conf повысит производительность, т.к. сервер сможет обрабатывать большее количество подключений за раз. Однако, следует изменять этот параметр осторожно, дабы не исчерпать весь объем оперативной памяти и не замедлить работу сервера, потому всегда тестируйте новые настройки прежде чем запускать их в работу. Установим к примеру 150 коннектов:
max_connections = 150
Не забудьте рестартить сервис Apache, чтоб применить настройки.4 Оптимизация кода и графики Итак, сервер заработал и теперь настало самое время поиграть с кодом Wordpress.4.1 Отключите хотлинки Каждый раз когда вы используете свой сервер для хранения изображений вы существенно больше используете его ресурсов. Довольно часто люди заимствуют ваши изображения, ставя хотлинки на своих серверах. Это не только занимает канал, но и создает определенную нагрузку на сервер.
Добавьте следующий код в .htaccess файл, заменив example.com на имя вашего домена, чтобы отключить использование хотлинков:
< IfModule mod_rewrite .c >
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example\.com/.*$
RewriteRule .*\.(gif|jpg|png|ico)$ -
4.2 Используйте внешний хостинг для хранения изображений Хостинг изображений на внешних серверах поможет значительно снизить нагрузку на сервер. В примере ниже вы можете видеть снижение объема используемой оперативной памяти на одном из блогов после переноса изображений на сервис Amazon S3 .
4.3 Сжимайте java-скрипт код
Сжатие javascript довольно простая задача. Поскольку он выполняется при каждом просмотре страницы, вы можете уменьшить размер Javascript, удалив все незаполненное пространство. Вот простой инструмент, который поможет сделать это за вас - JavaScript Compressor .4.4 Javascript в начале страницы
Часто случается так, что сайт начинает загружаться медленно или вообще останавливается, т.к. другой ресурс, с которого вызывается javascript(на пример Digg badges, Tweetmeme и т.д.), не доступен или оффлайн. Чтобы избежать этого вынесите весь javascript код в конец страницы, а то что по каким-то причинам вынести не удалось – попробуйте заключить в iFrame.4.5 Используйте кэш браузера
Сам по себе кэш браузера, конечно не сделает ваш блог быстрее, однако поможет снизить нагрузку на сервер, кэшируя часто загружаемые объекты(стили, элементы интерфейса и т.п.).Попробуйте вставить следующий код в .htaccess файл:
FileETag MTime Size
< ifmodule mod_expires .c >
< filesmatch "\.(jpg|gif|png|css|js)$" >
ExpiresActive on
ExpiresDefault "access plus 1 year"
4.6 Сжимайте статические данные Вы можете уменьшить размер загружаемой страницы позволив браузеру принимать и передавать данные в сжатом виде. Это также снизит загрузку канала и количество загружаемых данных.
Следующий код в .htaccess может помочь вам в этом:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0 no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
4.7 Используйте CDN для статических файлов Если хранить все изображения на одном и том же домене, то браузер будет ожидать их загрузки одного за другим. Допустим на странице их у вас есть 12 штук, если вы разделите их между тремя поддоменами, они будут загружаться одновременно из трех «разных» источников вместо того, чтоб загружаться браузером по очереди из одного.
Можете попробовать перенести все css & javascript файлы на files.yoursite.com , а изображения и временные файлы на static.yoursite.com . Или же просто использовать CDN (Content Delivery Network) – большая сеть серверов, расположенных по всему миру, которые позволят не только хранить ваши файлы на разных поддоменах, а значит загружать их параллельно, но и доставлять пользователю данные с самого близкого к нему сервера. Все это позволит загружать данные намного быстрее.5 Wordpress В этой части статьи мы рассмотрим приемы для улучшения производительности, которые можно применить непосредственно к Wordpress.5.1 Обновитесь до последней версии Обновления до более новых версий позволяют не только устранять обнаруженные уязвимости, но и улучшают производительность. Для примера в wordpress 2.8 была существенно оптимизирована работа с БД.5.2 Отключите Post Revisions Во всех версиях wordpress, начиная с 2.6, редакции ваших статей каждый раз во время правки автоматически сохранялись. Это замедляет работу БД и увеличивает ее размер без особой надобности.
Чтоб отключить post revisions, добавьте следующую строку в wp-config.php :
define("WP_POST_REVISIONS", false);
Чтобы удалить сохраненные ранее ревизии текста, выполните следующий запрос в PHPmyadmin:
DELETE a,b,c
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)
WHERE a.post_type = "revision" 5.3 Сократите количество запросов Уберите ненужные запросы, чтоб ускорить генерацию страницы. Например, следующий типичный код, встречающийся во всех темах для wordpress:
< meta http-equiv ="Content-Type" content ="< ?php bloginfo ("html_type" ); ?> ; charset= " />
Мы запросто можем переписать в:
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
Уже на два запроса меньше. Довольно просто, не правда ли?6 Wordpress Plugins И на последок предлагаю вашему вниманию несколько плагинов, которые могут повысить производительность wordpress. Как только все, описанное выше, будет выполнено, эти плагины помогут добиться еще более высокой производительности.
Привет друзья. Это моя первая заметка в 2011 году и в ней я расскажу вам как вы можете ускорить свой блог на wordpress благодаря нескольким простым секретам. Да, кстати, всех с Новым Годом! Счастья вам и всех всех при всех благ!
Итак к делу. Сейчас я расскажу вам 10 фишек ускорения блога на wordpress. Лично я ускорил свой блог в три раза после того, как проделал все те действия о которых я сейчас вам поведаю.
Для начала пройдите на вот этот сервис и проверьте скорость загрузки вашего блога. Вбейте в поле формы адрес вашего блога (сайта), поставьте в 2-х остальных формах по «5» и жмите «Time It». Вот моя скорость (картинка снизу) после проделанной работы по ускорению блога. Вначале было 6,88 — что мне очень не понравилось, на самом деле это очень долго.
1. Самое главное. Установите плагин кэширования блога (советую Hyper Cache). Есть еще WP Super Cache, но если честно почему-то мне он не нравится. Hyper Cache намного лучше, проще и эффективнее. Почитать про установку и настройку данного плагина вы можете в этой статье -
Данный плагин сохраняет копии всех страниц вашего блога в отдельной папке и когда любой пользователь запрашивает в браузере ту или иную страницу вашего блога, она выдается ему уже готовая, без всякого формирования, запросов к базе данных и т.д. В общем нагрузка на сервер минимальная.
2. Установите плагин - Optimeze DB . Это тоже не мало важный плагин для ускорения работы блога. Этот плагин оптимизирует всю вашу базу данных блога. После того как установите его, зайдите в него в админке. Инструменты - Optimeze DB и примерно 1-2 раза в месяц нажимайте на кнопку " optimize" . Когда оптимизировали, выключайте плагин, чтобы не нагружал блог!
3. Установите плагин CSS Compress . Тоже не мало важный плагин для ускорения блога. Этот плагин сжимает файл стилей вашего блога и ускоряет его. У меня этот плагин не стоит, потому что к моей теме блога он по ходу дела не подходит, поэтому если после установки плагина CSS Compress у вас возникнут какие-то проблемы в работе блога, отображение картинок, искривление текста, не правильное отображение виджетов и т.д., то деактивируйте данный плагин и все, ни чего страшного...
4. Оптимизируйте свой файл style.css темы вашего блога. Обычно он лежит по этому адресу: wp-content/themes/тема/style.css
Для этого загрузите его с сервера на ваш компьютер, пройдите на сайт styleneat.com , зайдите на вкладку File Upload и загрузите уже туда ваш файл style.css. Загрузили? Ок. Жмите — Organize CSS. После этого система выдаст вам уже готовый оптимизированный style.css файл который вам нужно перезалить на сервер в тему вашего блога.
ВНИМАНИЕ!!! Перед этим обязательно сделайте копию вашего старого style.css файла, так как вполне возможно возникновение проблем в отображении содержимого вашего сайта после оптимизации этого файла. Но обычно проблем не возникает.
5. Отредактируйте файл header.php темы вашего wordpress блога, а именно нужно будет немного заменить кое какой php-код. Это ЗНАЧИТЕЛЬНО ускорит ваш блог, так как вы уменьшите количество запросов к базе данных. Я думаю, что многим из вас может быть много чего не понятно, поэтому буду говорить по русски.
Вот смотрите. Человек в интернете проходит по ссылке на ваш блог и происходит формирование html страницы (появление текста в нужном месте, отображение картинок, вывод заголовка блога, его описания, ключевых слов и т.д. и т.п.) я думаю это понятно. Но как это происходит?
А происходит это потому что основной файл нашего блога header.php посылает запросы к базе данных. Это вроде этого, — «Эй база, тут человеку вот эта страница нужна, говори мне, что нужно отобразить на странице блога, а что не нужно».
База принимает запрос и вот только потом отправляет нужные данные файлу header.php благодаря чему отображается содержимое блога. Ну в общем это элементарный php.
Откройте сейчас header.php файл темы вашего блога. Вот допустим мой бывший файл header.php, давайте посмотрим что в нем было с 1 по 18 строку:
Что мы видим. Вот допустим одна из строк:
Это запрос к базе данных. header.php посылает запрос базе данных типа: «База надо формировать html страницу человеку. Что в этом месте нужно вывести?». А вывести нужно кодировку.
База обрабатывает запрос и отсылает блогу другой код. Зайдите сейчас на главную страницу вашего блога и нажмите ctrl + U. (исходный код страницы). Что мы видим? Вместо нашего кода уже стоит другой — обработанный. У меня такой:
Наверняка у вас такой же.
Так вот. Таких запросов к базе в файле header.php много. Получается, когда пользователь запрашивает в браузере страницу вашего блога, то происходит соответственно много запросов к базе данных, а это уже нагрузка на сервер и замедление работы блога. Представьте как нагружается сервер, когда одновременно 1000 человек запрашивают страницы вашего блога. Думаю вы все понимаете.
Давайте облегчим задачу нашему серверу и ускорим работу блога просто заменив некоторые запросы к базе данных на уже готовые ответы. Для этого просто посмотрите ваш файл header.php и замените в нем код запросов к базе данных на код, который вы видите на странице после нажатия ctrl + U.
Теперь я просто копирую этот код и вставляю в файл header.php вместо того что был до этого. Зачем нам в шаблоне лишние запросы? Вот в принципе все в таком духе. Так что меняйте ваши коды и ускоряйте блог. ВНИМАНИЕ!!! Все запросы которые находятся между тегами менять не нужно!!!
Вообще можно и нужно удалить, об этом я писал в статье — « ».
6. Перенесите все коды скриптов из файла header.php в файл footer.php. Смотрите. Человек заходит к вам на блог, загружается страница и посылаются не только различные запросы к базе данных, но еще и начинают подгружаться различные скрипты, поэтому человеку нужно ждать пока все это дело загрузится.
Наверняка у вас есть много кодов скриптов в файле header.php между тегами , которые замедляют загрузку страницы, так что советую вырезать эти коды и поместить их в файл footer.php.
Теперь когда посетителю будет загружаться страница вашего блога, сначала будет грузиться верстка и стили, а потом уже все остальные скрипты, что не заставить человека изнурительно ждать и нервничать...
Так же добавьте в файл footer.php вот этот код:
7. Установите плагин DB Cache Reloaded . Этот плагин просто СУПЕР!!! Он уменьшает в несколько раз количество запросов к базе данных блога. Установили, активировали, все!!!
8. СОВЕТ НЕ АКТУАЛЕН!
9. Защитите блог от спама. Существует множество различных плагинов для этого. Если спамеры будут атаковать ваш блог изо дня в день, то это создаст очень большую нагрузку на сервер и значительно снизит скорость работы блога.
10. При загрузке картинок в заметки блога используйте их как можно меньшего размера — это раз. А во-вторых — всегда в настройках картинки указывайте их ширину и высоту, чтобы при загрузке страницы робот сразу видел их размер, а не искал в базе — это дополнительная нагрузка как ни как.
Вот мои вам советы друзья. Ну и конечно же по чаще обновляйте свой блог, предварительно сделав бекапчик, а так же обновляйте плагины. Кстати просмотрите все те плагины, которыми вы пользуетесь, если есть те которые в принципе и не нужны, то смело удаляйте их.
Ну вот и все, на этом я заканчиваю. У кого есть еще идеи и различные способы и фишки по ускорению блога отписывайтесь в комментариях. Очень интересно! Успехов друзья!
C уважением, Александр Борисов
Скорость работы сайта очень важна не только для пользователей, но и для поисковых систем, которые в свои алгоритмы включили и данный показатель. Если ваш ресурс грузится, к примеру, секунд 10 и страница «весит» много, есть все шансы, что сайт или определенная продвигаемая страница не попадет в ТОП-10. По мнению Googleи любых других крупных поисковых систем этот показатель очень важен, особенно сейчас – в 2014 году, когда у вебмастеров имеется куча инструментов для «облегчения» сайта в пару кликов и быстрый интернет повсюду.
Самыми легкими являются сайты на голом HTML, но их функциональность оставляет желать лучшего. Используются ресурсы подобного рода уж в очень специфических ситуациях, когда предполагается, что контент менять в ближайшие годы не придется. Например – сайт какой-то фирмы с описанием услуг и телефоном, сдает хозяин 3 квартиры, их фото поместил на 1-2 страницы и оставил свои телефоны. Что ещё нужно потенциальному клиенту, особенно, если речь идет о небольшом городе…
Когда же речь заходит о серьезных ресурсах, новостных или статейных, да том же личном блоге, есть крайняя необходимость в наличии полноценной CMSс возможностью установить туда нужные плагины для управления сайтом и контентом, а также модифицировать шаблон под свои цели. Наиболее популярным «движком» на сегодня является WordPress.
Эта CMS полностью бесплатна и имеет огромное сообщество, сможет любой человек, даже если ранее HTML в глаза не видел. Инструкция проста до безобразия, а некоторые хостинг-провайдеры и вовсе устанавливают этот и другие CMSв один клик из панели управления хостингом. При должной настройке WordPress-ресурс будет просто летать, но у большинства людей с этим возникает проблема. Казалось бы – сайт выглядит совершенно обычно и ничего сверхъестественного на его просторах не происходит, а грузятся страницы долго, причем с любой точки мира.
С этой проблемой сталкивался и я. Сегодня расскажу вам, каким образом можно настроить и ускорить WordPress для того, чтобы страницы «весили» минимально и открывались практически моментально. Эта статья по ускорению ВордПресса рассчитана на новичков, есть методы с копанием в коде, настройкой баз данных и отдельных элементов, но люди, разбирающиеся в этом, не нуждаются обычно в наглядных инструкциях. Я расскажу все поэтапно для тех, кто только-только начал осваивать WordPress.
Начнем с «проверки» ресурса. Для начала я определю – сколько времени требуется «в среднем» для загрузки главной страницы. Если у вас есть необходимость проверить другую страницу на скорость загрузки – это тоже можно сделать без проблем.
Проверка скорости работы сайта сервисом WebWaitАдрес сервиса webwait.com
Этот сервис делает определенное количество «посещений» указанной страницы за указанное время, по умолчанию стоит 5 в обоих полях, этого хватает. После чего выдает «среднее» значение.
Как видите, я проверил 2 ресурса. Первый – известный в кругах «вордпрессеров» ресурс, на котором распространяют модули, темы и многие другие полезные «плюшки» для данной CMS, второй сайт – одностраничный сайт на WordPress с минимумом графики и текстом. Показатели хорошие у двоих – 2.45 считается нормальным временем, если у вас 3-4 и более секунды, тогда читайте далее, на что же обратить внимание и как ускорить WordPress с помощью специальных инструментов.
Переходим к «ускорению» WordPress:Для начала просто посмотрите, какие у вас установлены плагины на данный момент. Есть сборки, идущие с набором плагинов, которые вам не нужны, но они активированы и «тянут» ресурсы. Их, естественно, следует отключить или вовсе удалить. В случае, если позже один из них вам понадобится, на его установку уйдет несколько минут времени, так что не критично!
Больше всего «грузят» систему всевозможные эффекты и «бирюльки» у шаблонов, иногда эти самые эффекты просто выполнены «кривым» способом, так что обратите свое внимание на то, чтобы шаблон был с минимумом таких элементов, а за большую часть «красоты» отвечал CSS. В случае с моим «пациентом», которого я привел выше, можно заметить – просто «левый» сайт на этой CMSс минималистичным шаблоном грузится куда быстрее, чем «папа» wordpress.org, вы можете добиться того же с минимальными усилиями, просто скачав подходящий шаблон и вырезав из него все лишнее.
Мой данный сайт грузится вот так
Как видите меньше двух секунд это хороший показатель и советую вам стремится к нему.
