Урок 99. Как ускорить WordPress? Правка кода и сжатие стилей CSS (часть 3)

Как ускорить WordPress?Приветствую! В этом уроке рассмотрим, как ускорить wordpress путем правки кода. Многие коды в шаблоне блога дают запросы к базе данных, которые вовсе не обязательны. Подкорректировав некоторые файлы шаблона, можно добиться лучшей скорости загрузки. Как я писал в прошлом уроке, загрузка страниц влияет на выдачу в поисковых системах. Блог, который загружается медленно, имеет меньше посещаемость и большее количество отказов.

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

Как ускорить WordPress? Оптимизация шаблона

Теперь перейдем к правке кода. В файле шаблона header.php надо подправить коды, которые создают дополнительные запросы к базе.

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

Перед тем, как править коды в шаблоне, установите следующей код в footer.php:

<?php echo get_num_queries(); ?> Запросов <?php timer_stop(1); ?> Секунд

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

Правка кода header.php

Подключитесь к серверу, где находится Ваш блог, найдите файл header.php в теме Вашего блога и скопируйте его на компьютер. Откройте этот файл в редакторе Notepad++ и найдите строку:

<html <?php language_attributes(); ?>>

замените ее на код

Эта функция возвращает атрибут для тега HTML

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

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Замените эту строку на

Теперь найдите в этом же файле header.php строку:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

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

Если в Вашем файле header.php присутствуют похожие коды:

<link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/reset.css" type="text/css" media="screen, projection" />

и

<link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/defaults.css" type="text/css" media="screen, projection" />

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

Теперь Вы знаете, как поменять динамические коды в файле header.php на статические.

Найдите в файле header.php код, который выводит фавикон, и замените его, как показано в видео.

<link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

Что такое фавикон, Вы можете почитать в уроке 26.

Замените следующий код на статический:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed"href="<?php bloginfo('rss2_url'); ?>" />

Этот код указывает путь к RSS ленте.

Найдите в файле следующие два кода, которые отвечают за вывод заголовка и описания Вашего блога:

<?php bloginfo('name'); ?>

и следующий код:

<?php bloginfo('description'); ?>

Замените эти два кода статическими.

Возможно у Вас в файле header.php имеется описание для верхнего меню. Можно самому прописать описание через URL на главную страницу. Код может выглядеть так:

<a href="<?php echo get_option('home'); ?>/">Главная</a>

Можно его заменить на следующий код:

<a href="http://dvpress.ru/" title="Уроки WordPress для начинающих | Настройка и раскрутка блога. Книги по заработку в Интернете, бесплатные видео-курсы">Главная</a>

Перенос Java Scripts в Footer.php

При загрузке блога, первым делом загружается файл header.php а потом все остальное. Наша задача, сделать так, чтобы этот файл загружался как можно быстрее. Header.php содержит в себе скрипты, которые можно перенести в footer.php. Footer.php - это низ (подвал) Вашего блога, и загружается в последнюю очередь. Если перенести скрипты в подвал, то страницы блога будут загружаться быстрее.

Откройте файл header.php Вашей темы и найдите там скрипты. Скрипты имеют теги <script></script>. Скрипт может выглядеть так:

<script src="<?php bloginfo('template_directory'); ?>/jdgallery/mootools-1.2-more.js" type="text/javascript"></script>

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

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

Установка кэша в браузере посетителей

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

Установите в файле .htaccess следующий код:

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

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

Оптимизируем таблицы стилей CSS

Таблицы стилей находятся у нас в шаблоне блога, а если точнее, то в файле style.css и других файлах. Подключитесь к серверу через FTP и найдите в шаблоне Вашего блога файл style.css. Сделайте резервную копию этого файла в виде архива zip или rar.

В будущем, если Вы захотите отредактировать файл стилей, то Вам понадобиться оригинал этого файла. После сжатия, этот файл потеряет нормальный вид, поэтому в кодах CSS разобрать что-либо будет невозможным.  Перейдем теперь к самому процессу сжатия CSS. Откройте файл style.css редактором Notepad++ и скопируйте все содержимое этого файла.

Перейдите по этой ссылке http://www.cssdrive.com/index.php/main/csscompressor/ и вставьте скопированный код файла стилей style.css в окно, как показано на скриншоте:

 

После того, как Вы нажмете кнопку "Compress-it" (сжать), в окне код уже будет выглядеть в сжатом виде. Скопируйте его и вставьте в файл style.css. Теперь файл stylee.css и style.zip скопируйте на сервер в тему Вашего блога.

На этом все. В следующем уроке установим плагин WP-Super Cache.
___________________________
К уроку 100. Ускорение WordPress: плагин WP Super Cache — настройка (часть 4)

17 Comments

  1. Юрий, а когда в этом толком не понимаешь, наверное, не стоит в коды и лезть? Мне, например, страшновато. Пускай будет как есть. Здесь уже нужны знания программиста

    • Людмила, поэтому и надо всегда делать резервную копию того, что редактируете

  2. Да, мне тоже что то страшновато всё это делать.

  3. Спасибо за полезную информацию,я вот почему то любопытная и мне хочется самой полазить в кодах. Но на это нужно время и чтобы ни кто тебе не мешал. Но я попробую. Хотелось бы освоить программу Notepad++

  4. Я хотел обратится к тем, кто боится лезть в коды. Если туда не лезть, то рано или поздно проблемы возникнут. Ведь никто темы не делает бесплатные просто так. А убирать ссылки на сторонние ресурсы придется. Конечно, с дорогим тарифом не чувствуешь нагрузки на сайт, особенно если посетителей немного.
    Но все равно придется знакомиться с HTML,CSS, PHP, если хочешь заниматься сайтом или блогом. Или прослушать нужные курсы. А уж как Юрий хорошо объясняет, так это вдвойне легче делать становиться. Только не забывать копии сохранять файлов, чтобы в случае неприятности быстро восстановить. Если не получиться сделать, можно у хостеров попросить, и они всегда откатят Вам версию назад на нужное вам время.
    Главное, не паниковать. Сам через это проходил не раз.

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

  5. Здравствуйте! “Скопируйте его и вставьте в файл style.php. Теперь файл stylee.php и style.zip скопируйте на сервер в тему Вашего блога.” вы не ошиблись? Может stylee.CSS? У меня php файла нет. Я новичок в этом деле, но точно говорю – style.php у меня нет. Спасибо за статью, но последнее не понял.

    • Рустам, приветствую!
      Конечно же это ошибка. Нет в теме wordpress такого файла style.php, но только style.css! Странно, тысячи людей прочитало статью, и никто не заметил этой ошибки. Спасибо, Рустам! Я уже исправил.

  6. Спасибо! А-то я уже голову сломал :), теперь все понятно!

  7. Кстати, style.zip – каким образом получается? Откуда он вообще берется? Спасибо заранее!

  8. А, понял, это сохраненный оригинал файла. Вопрос снят!

  9. Не раскрыта тема удаления или объединения screen.css print.css . Куда их девать?

    Артур
  10. все сделал, ничего не сломалось, но и никаких результатов, к сожалению, не принесло: количество обращений к базе и время загрузки не сократилось…а щастье было так близко и так возможно)) 😐

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

    Владимир
  12. Лучше открутите плюшки и плагины типа падающего снега, бегающего кота за указателем мыши и крутящихся меток – толку будет больше. 90% плагинов кроме тормозов и сомнительных красивостей ничего не несут.

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

    Ивашка

Leave a Reply

Яндекс.Метрика