Оптимизация под Google Page Speed. Инструкция для профессионалов.

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

На настоящий период SEO ранжирование страниц находится в зависимости от нескольких сотен показателей, но скорость загрузки вашего сайта для поисковиков — один из главных показателей. И не зря, ведь даже если у вас очень продвинутый сайт но среднее время загрузи 15 секунд то пользователь просто не станет дожидаться пока же раскроется страничка вашего вебсайта и пойдет дальше по выдаче. Как результат — утрата значительного процента возможных посетителей и значительное снижение поведенческих факторов. В этой статье мы расскажем вам о том как улучшить свои показатели в самом популярном сервисе по тестированию скорости сайта — Google Page Speed.

Самый простой инструмент оценки технической оптимизации проекта - Google PageSpeed Insights

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

Оптимизируйте изображения. Эту задачу мы предлагаем решить с помощью разработанного нами модуля оптимизации изображений под Битрикс
Включите сжатие.
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Самый неоднозначный, на наш взгляд, пункт.
Используйте кеш браузера. Решаем настройкйо сервера.
Сократите JavaScript. Битрикс нам в помощь
Сократите время ответа сервера. Как можно ускорить наш хостинг.
Сократите CSS. Битрикс помогает в решении этой задачи.
Сократите HTML Битрикс помогает в решении этой задачи.

Теперь рассмотрим каждый пункт оптимизации подробнее:

Шаг 1. Оптимизация изображений

CMS Bitrix

Заходим на сайт MarketPlace Bitrix;
Нажимаем на кнопку "Установить"
https://marketplace.1c-bitrix.ru/solutions/artrix.imageoptimizer/
В появившееся диалоговое окно вбиваем адрес сайта
https://marketplace.1c-bitrix.ru/solutions/artrix.imageoptimizer/
Нажимаем кнопку "Установить"
https://marketplace.1c-bitrix.ru/solutions/artrix.imageoptimizer/
MarketPlace перебрасывает нас в административную часть сайта.
https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer
Нажимаем кнопку "Загрузить"
https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer
В появившемся диалоговом окне отмечаем галочку "Я принимаю лицензионное соглашение" и нажимаем на кнопку "Принять"
https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer
После окончания загрузки модуля на сайт, нужно его установить. Для этого в появившемся окне нажимаем "Установить"
https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer
После окончания установки модуля Модуль сжатия изображений, автоматическая оптимизации картинок под Google PageSpeed Insights
https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer
https://www.artrix.ru/bitrix/admin/optimizer_artrix.php?lang=ru

Шаг 2. Сжатие стилей и скриптов

ВНИМАНИЕ! В статье представлен последний вариант скрипта для сжатия стилей. Работа скрипта зависит от настроек сервера. Необходимо проверить работу скрипта после установки

ВНИМАНИЕ! Все стили и скрипты на сайте должны быть подключены с помощью API битрикс

В файлах стилей должны быть прописаны ПОЛНЫЕ пути к файлам (картинкам, шрифтам и т.д.)

Добавим в корень сайта папку /compress/
Откроем файл .htaccess в корне сайта и добавим туда следующий текст:
```
AddType text/css cssgz
AddType image/svg+xml svgz
AddType text/javascript jsgz
AddEncoding x-gzip .cssgz .jsgz .svgz
```
Здесь мы добавляем новый тип файлов. Теперь тип файлов с разрешением svgz будет обрабатываться как файл с типом данных text/css, jsgz - файл с типом данных text/javascript и т.д.
Откроем файл footer.php в шаблоне сайта.
Для начала мы должны получить html-страницу из буфера вывода. Для этого в самом конце файла footer.php добавим строку:
```
$data = $APPLICATION->EndBufferContentMan();
```
Теперь в переменной $data содержится вся наша html-страница
Удалим из нашей страницы лишние символы переноса строки и символы табулящии
```
$data = preg_replace(array('/\r+/', '/\t+/'), '', $data);
```
Далее нам нужно найти все скрипты и стили на странице. Для этого воспользуемся библиотекой DOMDocument. С её помощью будет проще искать и работать с нужными тегами на странице
```
$DATA_DOM = mb_convert_encoding($data, 'HTML-ENTITIES', "UTF-8");
$dom = new DOMDocument;
$dom->loadHTML($DATA_DOM);
```

Далее обработаем все теги <script> на странице. Все скрипты <script> занесем в переменную $all

foreach ($dom->getElementsByTagName("script") as $script){
$is_remove = true;
if ($script->getAttribute('src')){
$src = $script->getAttribute('src');
if (strpos($src, ".jsgz") === false){
if (strpos($src, "http") === false || strpos($src, $domain) !== false){
$arUrl = explode("?", $src);
$arPath = explode("/", $arUrl[0]);
$arInfo = pathinfo($arUrl[0]);
if ($arInfo["basename"]){
$arUrl[0] = str_replace($domain, "", $arUrl[0]);
$content = file_get_contents($_SERVER["DOCUMENT_ROOT"].$arUrl[0]);
$content .= ";";
$content = preg_replace('#/\*(?:[^*]*(?:\*(?!/))*)*\*/#', '', $content);
$all .= "\n\n" . $content;
}
} else {
$arUrl = explode("?", $src);
$arPath = explode("/", $arUrl[0]);
$content = file_get_contents($src);
$all .= "\n\n" . $content;
}
}
} else {
$text = implode(array_map([$script->ownerDocument,"saveHTML"], iterator_to_array($script->childNodes)));
$text = mb_convert_encoding($text, "UTF-8", 'HTML-ENTITIES');
$text .= ";";
$all .= "\n\n" . $text . "\n\n";
}
if ($is_remove)
$remove[] = $script;
}

Зададим имя файла для текущей страницы
```
$file_name = "script_" . md5($_SERVER["REQUEST_URI"]) . ".jsgz";
```

Удалим все теги <script> со страницы

foreach ($remove as $item){
$item->parentNode->removeChild($item); 
}

Содержимое переменной $all пересем в файл $file_name и сохраним его в папку /compress/
```
file_put_contents($_SERVER["DOCUMENT_ROOT"]."/compress/" . $file_name, gzencode($all));
```

Подключим файл в конце тега <body>

foreach ($dom->getElementsByTagName("body") as $body){
$element = $dom->createElement('script');
$element->setAttribute('src', "/compress/" . $file_name . "?" . time());
$body->appendChild($element);
}

Аналогично собирает все стили на странице в один файл, сжимаем его содержимое и подключаем в исходном html

$css = "";
$remove = array();
$file_name_css = "style_" . md5($_SERVER["REQUEST_URI"]) . ".cssgz";
foreach ($dom->getElementsByTagName("link") as $script){
if ($script->getAttribute('href')){
$src = $script->getAttribute('href');
$type = $script->getAttribute('type');
if ($type != "text/css")
continue;
if (strpos($src, ".cssgz") === false){
if (strpos($src, "http") === false || strpos($src, $domain) !== false){
$arUrl = explode("?", $src);
$arPath = explode("/", $arUrl[0]);
$arInfo = pathinfo($arUrl[0]);
if ($arInfo["basename"]){
$arUrl[0] = str_replace($domain, "", $arUrl[0]);
$content = file_get_contents($_SERVER["DOCUMENT_ROOT"].$arUrl[0]);
$content = preg_replace(array('/\+/', '/\t+/', '/\n+/'), '', $content);
$content = str_replace(array('  '), '', $content);
$content = preg_replace('#/\*(?:[^*]*(?:\*(?!/))*)*\*/#', '', $content);
$css .= $content;
}
} else {
$arUrl = explode("?", $src);
$arPath = explode("/", $arUrl[0]);
$content = file_get_contents($src);
$content = preg_replace('#/\*(?:[^*]*(?:\*(?!/))*)*\*/#', '', $content);
$css .= $content;
}
}
}
$remove[] = $script;
}
foreach ($remove as $item){
$item->parentNode->removeChild($item); 
}
foreach ($dom->getElementsByTagName("head") as $head){
$link = $dom->createElement('link');
$link->setAttribute('href', "/compress/" . $file_name_css . "?" . time());
$link->setAttribute('type', "text/css");
$link->setAttribute('rel', "stylesheet");
$head->appendChild($link);
}
file_put_contents($_SERVER["DOCUMENT_ROOT"]."/compress/" . $file_name_css, gzencode($css));

Выведем полученную html

$data = $dom->saveHTML();
$data = html_entity_decode($data);
echo  $data;

Шаг 3. Кеширование

В файл .htaccess в корне сайта добавляем следующие строки:

<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|svg|cssgz|jsgz)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\.(js|css|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpeg "access plus 60 day"
ExpiresByType image/svg+xml "access plus 60 day"
ExpiresByType image/gif "access plus 60 day"
ExpiresByType image/png "access plus 60 day"
ExpiresByType text/css "access plus 60 day"
ExpiresByType application/javascript "access plus 60 day"  
</IfModule>

Если есть возможность, то в настройках хостинга устанавливаем http://prntscr.com/gpfio3

Возврат к списку