ускорение блогаДавайте вместе определимся для начала для чего вообще делать ускорение на блоге / сайте? Какие плюсы это даст для посетителей на сайте и для поисковых систем yandex, google. Высокая скорость загрузки блога / сайта естественно дает ТОЛЬКО ПЛЮСЫ , минусов здесь нет.

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

схема оптимизации

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

Советую подписаться на обновления блога впереди еще много интересных плюшек и полезных фишек

1. Анализ сайта на скорость загрузки, выявляем слабые места сайта
2. Оптимизация стилей .css и файлов .js ( javascript )
3. Сжатие изображений ( jpeg, png и другие)
4. Исключаем лишние запросы к базе данных
5. Очищаем файлы шаблона от мусора, ускоряем загрузку
6. Плагины для ускорения WordPress
7. Несколько слов о хостинге
Анализ сайта на скорость загрузки, выявление слабых мест

Воспользуемся отличным сервисом, который покажет нам всю поднаготную нашего подопытного сайта, весь анализ и рекомендации по улучшению, вы сможете увидеть сразу после завершения теста. Все бесплатно! Вводите свой адрес сайта , вот например я ввожу свой адрес http://vpluce.ru , и нажимаю кнопку «Начать тест»

анализ сайта на ошибки

Сразу прокомментирую что будет показывать вам данный тест Штрафные очки — чем их меньше тем лучше! Зеленым цветом отмечено — хорошо, красным — плохо. Все приемы по улучшению читайте далее в посте, стараюсь для Вас описать все подробно и доходчиво.

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

отчет анализа сайта

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

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

Сжатие стилей .css и javascript

резервные файлы шаблона

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

сжатие css

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

Теперь остается только скопировать этот код и вставить в любой текстовый файл, я обычно использую «Блокнот». Создаю файл в любом месте — открываю этот файл — вставляю код — сохраняю данный файл — переименовываю с расширением .css — закидываю в папку шаблона

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

Еще порекомендую хороший сервис по оптимизации файла стилей style.css . Покажу на примере как работать с этим сервисом

сжатие css файла

Когда вы вставите или загрузите свой файл и нажмете кнопку «Organize Css» Вас перебросит на новую страницу, где Вы сможете либо сохранить файл себе на компьютер или скопировать готовый оптимизированный код. Вот она страница выбора сохранения

сохранение css

Javascript сжатие

Из теста, который Вы делали вначале, Вы уже видите слабые места — верно! Хорошо, теперь займемся сжатием файлов, которые относятся к скриптам и имеют расширение .js ( javascript ). Эти расширения в основном присутствуют в плагинах, а так же в самой популярной библиотеке jquery.

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

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

Будет полезно сделать оптимизацию файлов javascript, у которых расширение .js О том какие файлы отредактировать и оптимизировать, Вы можете посмотреть из анализа, который мы делали выше.

сжатие js

Ускорение блога — Сжатие изображений

Всегда пользуюсь этим сервисом и Вам советую, вот он  Поможет уменьшить размер ( «вес» ) картинки. Зачем мы это делаем? Чтобы грузились картинки меньше по времени.

Допустим я зашел вот на свой блог, и страница сначала загружается, а это время! Посетитель ждет, когда все элементы загрузятся и уже затем начинает читать, смотреть и т.д. Это как раз касается и тех же стилей .css и файлов .js . А иначе зачем мы все стараемся уменьшить, а для того чтобы сократить время загрузки. За счет этих оптимизаций мы ускоряем wordpress.

Смотрите на примере — сжатие изображений

сжатие изображений

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

Впрочем для сайта большие файлы картинок обычно и не используют, так как это сильно повлияет как на ускорение блога — только обратный эффект,. После окончания процесса внизу вы увидите ссылки на скачивания, можете скачать архивом, если у вас много файлов. Что же нам показывают? Original Size — оригинальный размер, Kraked size — сжатый размер, Savings — сколько сэкономили, % Savings — экономия в процентах.

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

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

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

Смотрим, вот оригинальный код файла header.php , между тегами

1
2
3
4
5
6
7
8
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width" />
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
	<?php wp_head(); ?>
</head>

Теперь что Вы делаете, открываете сайт в браузере http://название_вашего_сайта.ru  и открываете исходный код странице. Как это сделать? Если Вы пользуетесь Google Chrome — нажимаете комбинацию клавиш ( Сtrl + U ) или Правая кнопка мыши — Исходный код страницы.

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

Вот код исходной страницы

1
2
3
4
5
6
7
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Блог Александра Лукьянова | Как заработать в интернете, заработок от А до Я</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://vpluce.ru/xmlrpc.php" />
</head>

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

Если в чем-то сомневаетесь, то лучше оставьте как было. Все что остается это перезаписать наш файл с header.php и проверить работоспособность ускорения блога.

Очищаем файлы шаблона от мусора, ускоряем загрузку

Принцип есть и остается — уменьшение размера обрабатываемых и загружаемых файлов. Теперь займемся файлами нашего шаблона. Что будем делать? Убирать лишние пробелы, отступы в файле шаблонов, тем самым уменьшать их размер. Возьмем небольшой кусок кода, я взял произвольно из файла page.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the wordpress construct of pages
 * and that other 'pages' on your wordpress site will use a
 * different template.
 *
 */
?>
<?php get_header(); ?>
<div class="clear"></div>
 
<div class="page-content">
    <h1 class="page_title"><?php the_title(); ?></h1>
    <div class="grid_512 alpha">
        <div class="content-bar">  
            <?php if (have_posts()) : the_post(); ?>
                <?php the_content(); ?>          
            <?php endif; ?>
            <div class="clear"></div>
 
        </div>
    </div>
 
</div>
</div>
<?php get_footer(); ?>

Видите сколько мы имеем лишнего и ненужного в этом коде, а это комментарии, которые отмечены /** комментарии  */ , и лишние пробелы между кодом, теперь вручную убираем лишние комментарии и отступы, что у Вас должно получится

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
?>
<?php get_header(); ?>
<div class="clear"></div>
<div class="page-content">
    <h1 class="page_title"><?php the_title(); ?></h1>
    <div class="grid_512 alpha">
        <div class="content-bar">  
            <?php if (have_posts()) : the_post(); ?>
                <?php the_content(); ?>	
            <?php endif; ?>
            <div class="clear"></div>            
        </div>
    </div>    
</div>
</div>
<?php get_footer(); ?>

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

Плагины ускорения блога / сайта

Я представлю список, который Вам пригодится.

Hyper Cache — плагин для кеширования вашего блога / сайта

DB Cache Reloaded — этот плагин уменьшат количество запросов к базе данных.

Optimeze DB - оптимизирует вашу базу данных

Не перегружайте ваш блог / сайт большим числом сторонних плагинов, больше плагинов — больше времени требуется на загрузку сайта. Поэтому проверьте у себя, возможно присутствуют совсем ненужные плагины. То дополнительных приростом к скорости загрузки блога будет — Удаление НЕНУЖНЫХ плагинов, которые только засоряют сайт.

Несколько слов о хостинге

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

На этом заканчиваю свою писанину об оптимизации скорости блога, уверен Вы сделали и применили все пункты, о которых я говорил. Тем самым разогнали wordpress блог. Интересно узнать а как Вы ускоряете свой блог / сайт , какие используете приемы

С уважением, Александр Лукьянов