Оптимизация кода

Здравствуйте уважаемые начинающие веб мастера.

Продолжая тему внутренней оптимизации, займёмся оптимизацией кода сайта.

Оптимизацию кода можно разделить на 3 составляющие.

1. Коммутация — уменьшение нагрузки на сервер и увеличение скорости сайта.

2. Сжатие — ускорение обработки кода и увеличение скорости сайта.

3. Очистка кода от ошибок — повышение лояльности поисковых систем.

Рассмотрим по порядку.

Коммутация

Системы управления динамическими сайтами пишутся на php.

Это значит, что при формировании страницы и каждого её элемента отправляется запрос на сервер, ответ с которого и выводится на экран.

Теперь представьте сколько на странице элементов и сколько в связи с этим отправляется запросов, прежде чем та страница во всей красе отрисуется на экране монитора.

Значит наша задача, по возможности, уменьшить количество коммутаций между пользователем (браузер) и сервером.

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

Приступим.

Внешний вид страницы формируется в файлах шаблона, значит идём в Консоль — Внешний вид — Редактор.

Открываем файл header.php и первым делом смотрим область тега head

Как видите, с первой же строки идут запросы к базе данных, а ведь можно эту информацию из БД разместить прямо в head.

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

А теперь сравните код на странице, с кодом в файле. По сути ведь это одно и то же, но в коде страницы php уже отработал, и вывел из БД статические URL и тексты заголовка и описания.

Практически всё что до плагина All in One SEO Pack, кроме title, он для каждой страницы свой, можно перенести в файл, а запросы к БД убрать.

Значит оставляем в файле <!DOCTYPE html>, а дальше в области head файла header.php, меняем:

вместо

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

ставим

<html lang="ru-RU">

вместо

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

ставим

<meta charset="UTF-8" />

вместо

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

ставим

<link rel="stylesheet" type="text/css" media="all" href="Адрес вашего сайта/wp-content/themes/twentyten-child/style.css" />

вместо

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

ставим

<link rel="pingback" href="Адрес Вашего сайта/xmlrpc.php" />

То есть все рабочие теги, которые имеют отношение ко всему сайту, будь то RSS или Xml, или файлы стилей и Js, можно проставить с фактическими адресами, как в Коде страницы, а не с запросом к БД, как в файле header.php по умолчанию.

После области head с рабочими тегами, если спуститься немного вниз, то можно найти заголовок и описание сайта — site-title и site-description.

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

Итак, несколько тормозящих запросов убрали. Теперь займёмся сжатием.

Сжатие кода

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

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

Однако такой вариант мы тоже предусмотрим.

Итак, все вы наверно читали пожелание PageSpeed Insights оптимизировать файл стилей.

Style.css порой раздувается до огромных размеров, всё зависит от фантазии веб мастера, и его желания сделать свой сайт неповторимым.

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

Чтоб это время ощутимо сократить, будем сжимать код. Сначала css.

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

В нём выбираем CSS Minifi, вставляем в поле сервиса весь код файла, нажимаем Minifi и получаем результат — сжатый файл.

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

Ну вот и позеленело, хотя ещё не совсем. И зеленее видали. Но всё же не плохо.

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

Умный браузер эти ошибки пропускает, а вот сервис работает на сжатие жестко.

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

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

Почему следует попытаться сделать ещё раз?

Перекосы — результат ошибок, а ошибки — результат невнимательности веб мастера.

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

То же самое можно проделать с JS и html.

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

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

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

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

Очистка кода от ошибок

Оптимизация html кода сводится, главным образом к очистке его от ошибок.

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

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

Для исправления ошибок в html коде, существует сервис W3C validator.

Если ввести в поле Address: адрес страницы, то ниже будут показаны все ошибки html, имеющиеся на этой странице.

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

В описании ошибки показана строка кода и порядковый номер строки в коде страницы.

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

И даже если вы запросто найдёте кривую строку в коде страницы, то найти её в файлах сайта будет не просто.

Несколько советов на вопрос Где искать.

Первым делом просматриваются файлы header.php и footer.php, затем виджеты Текст, если вы таковые добавляли и писали там что-то на html.

И самые распространённые поставщики ошибок — рекламные баннеры и, в некоторых случаях, плагины.

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

Значит открываем все по очереди, и ищем указанную валидатором строку.

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

Вот пожалуй и всё. Желаю успехов в оптимизации кода сайта.


Запись опубликована в рубрике SEO. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *