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

Другие статьи

17/11/2017

Яндекс Метрика: если не работает плеер вебвизора

При попытке открыть плеер вебвизор в Яндекс Метрике - открывается новое окно, в котором отображается ваша страница, а посерёдке надпись "Невозможно воспроизвести посещение"

читать далее

25/10/2017

Какой сервис колл-трекинга выбрать?

Каждый предприниматель понимает, что повышение конверсии является одной из приоритетных задач развития своего интернет-проекта. Неоценимую помощь в изучении потока входящих звонков сегодня оказывают сервисы «call tracking». До появления новой технологии получать информацию о пользователях приходилось при помощи телефонных опросов.

читать далее

28/09/2017

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

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

читать далее

19/09/2017

Адаптация сайта под мобильные устройства

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

читать далее

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

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

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

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

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


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

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

CMS Bitrix

  1. Заходим на сайт MarketPlace Bitrix;
  2. Нажимаем на кнопку "Установить"

    https://marketplace.1c-bitrix.ru/solutions/artrix.imageoptimizer/

  3. В появившееся диалоговое окно вбиваем адрес сайта

    https://marketplace.1c-bitrix.ru/solutions/artrix.imageoptimizer/

  4. Нажимаем кнопку "Установить"

    https://marketplace.1c-bitrix.ru/solutions/artrix.imageoptimizer/

  5. MarketPlace перебрасывает нас в административную часть сайта.

    https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer

  6. Нажимаем кнопку "Загрузить"

    https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer

  7. В появившемся диалоговом окне отмечаем галочку "Я принимаю лицензионное соглашение" и нажимаем на кнопку "Принять"

    https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer

  8. После окончания загрузки модуля на сайт, нужно его установить. Для этого в появившемся окне нажимаем "Установить"

    https://www.artrix.ru/bitrix/admin/update_system_partner.php?addmodule=artrix.imageoptimizer

  9. После окончания установки модуля Модуль сжатия изображений, автоматическая оптимизации картинок под 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 битрикс
В файлах стилей должны быть прописаны ПОЛНЫЕ пути к файлам (картинкам, шрифтам и т.д.)
  1. Добавим в корень сайта папку /compress/
  2. Откроем файл .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 и т.д.
  3. Откроем файл footer.php в шаблоне сайта.
  4. Для начала мы должны получить html-страницу из буфера вывода. Для этого в самом конце файла footer.php добавим строку:
    $data = $APPLICATION->EndBufferContentMan();
    Теперь в переменной $data содержится вся наша html-страница
  5. Удалим из нашей страницы лишние символы переноса строки и символы табулящии
    $data = preg_replace(array('/\r+/', '/\t+/'), '', $data);
  6. Далее нам нужно найти все скрипты и стили на странице. Для этого воспользуемся библиотекой DOMDocument. С её помощью будет проще искать и работать с нужными тегами на странице
    $DATA_DOM = mb_convert_encoding($data, 'HTML-ENTITIES', "UTF-8");
    $dom = new DOMDocument;
    $dom->loadHTML($DATA_DOM);
  7. Далее обработаем все теги <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;
    }
    
  8. Зададим имя файла для текущей страницы
    $file_name = "script_" . md5($_SERVER["REQUEST_URI"]) . ".jsgz";
  9. Удалим все теги <script> со страницы
    foreach ($remove as $item){
    $item->parentNode->removeChild($item); 
    }
  10. Содержимое переменной $all пересем в файл $file_name и сохраним его в папку /compress/
    file_put_contents($_SERVER["DOCUMENT_ROOT"]."/compress/" . $file_name, gzencode($all));
  11. Подключим файл в конце тега <body>
    foreach ($dom->getElementsByTagName("body") as $body){
    $element = $dom->createElement('script');
    $element->setAttribute('src', "/compress/" . $file_name . "?" . time());
    $body->appendChild($element);
    }
  12. Аналогично собирает все стили на странице в один файл, сжимаем его содержимое и подключаем в исходном 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));
  13. Выведем полученную html
    $data = $dom->saveHTML();
    $data = html_entity_decode($data);
    echo  $data;

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

  1. В файл .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>
  2. Если есть возможность, то в настройках хостинга устанавливаем http://prntscr.com/gpfio3

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

Заказ расчета

Это обязательное поле
Это обязательное поле
* - поля обязательные к заполнению
Нажимая на кнопку «Заказать»,
Вы соглашаетесь на обработку персональных
данных
ЗАКАЗАТЬ