Как удовлетворить и Google Mobile-Friendly Test PageSpeed Insights
реклама
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Как удовлетворить
Google Mobile-Friendly Test и
PageSpeed Insights
Антон Герасимюк
Ведущий разработчик, 1C-Битрикс
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Скорость сайта
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Письма от Google
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Mobile-Friendly Test
• Viewport
• Ширина контента
• Размер шрифтов
• Размеры активных элементов
• http://g.co/mobilefriendly
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Google Webmaster Tools
• http://goo.gl/TA2AFV
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Mobile-Friendly Test
• Проверьте свой robots.txt:
User-agent: *
Disallow: /bitrix/
User-agent: *
Disallow: /bitrix/
Allow: /bitrix/cache/
Allow: /bitrix/js/
Allow: /bitrix/templates/
Allow: /bitrix/components/
Allow: /bitrix/panel/
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Google PageSpeed Insights
• Измеряет скорость загрузки веб-страниц
• Двойная проверка – с помощью обычного и
мобильного браузера
• Оценка PageSpeed составляет от 0 до 100
баллов. Зеленая зона – от 85 баллов.
• Главная цель – максимально быстро
показать пользователю верхнюю видимую
часть страницы
• http://goo.gl/TA2AFV
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Демонстрация
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
JavaScript в конце страницы
• Настройка в главном модуле
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
JavaScript в конце страницы
Было
<html>
<head>
<title>Страница</title>
<link href="styles.css" type="text/css">
<script src="lib.js"></script>
</head>
<body>
<header></header>
<script>
executeSmthFromLib();
</script>
<footer></footer>
</body>
</html>
Стало
<html>
<head>
<title>Страница</title>
<link href="styles.css" type="text/css">
</head>
<body>
<header></header>
<footer></footer>
<script src="lib.js"></script>
<script>
executeSmthFromLib();
</script>
</body>
</html>
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
JavaScript в конце страницы
• С атрибутом data-skip-moving="true" тег не будет перенесен
• Поддержка композита
<html>
<head>
<title>Страница</title>
<link href="styles.css" type="text/css">
<script src="lib.js" data-skip-moving="true"></script>
</head>
<body>
<header></header>
<script data-skip-moving="true">
executeSmthFromLib();
</script>
<footer></footer>
</body>
</html>
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
JavaScript в конце страницы
• Перенос JavaScript происходит по тегам <script></script>
• Не учитываются сложные конструкции, например, HTML-комментарии
• document.write() будет работать неправильно
<script type="text/javascript">
document.write(VK.Share.button(
false,
{ type: "round", text: "Сохранить"}
));
</script>
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
JavaScript в конце страницы
• Динамическое отключение/включение
\Bitrix\Main\Page\Asset::setJsToBody(true); //включить
\Bitrix\Main\Page\Asset::setJsToBody(false); //выключить
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
JavaScript в html-атрибутах остается
• Если нажать до загрузки скриптов, будет JavaScript Exception
<html>
<head>
<title>Страница</title>
</head>
<body>
<header></header>
<div id="box" onclick="executeSmthFromLib()"></div>
<footer></footer>
<script src="lib.js"></script>
</body>
</html>
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
addEventListener и DomContentLoaded
<html>
<head><title>Страница</title></head>
<body>
<header></header>
<div id="box"></div>
<footer></footer>
<script src="jquery.js"></script>
<script src="lib.js"></script>
<script>
$("#box").on("click", executeSmthFromLib);
//BX.ready(function() { BX.bind(BX("box"), "click", executeSmthFromLib); });
</script>
</body>
</html>
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
CSS тоже блокирует отображение
• Inline CSS (<style></style>)
<html>
<head>
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue yellow big">
Hello, world!
</div>
</body>
</html>
<html>
<head>
<style>
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
</style>
</head>
<body>
<div class="blue yellow big">
Hello, world!
</div>
</body>
</html>
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
CSS тоже блокирует отображение
• Проблема: большой размер страницы
• TCP Slow Start
• Initial Congestion Window = 4 или 10
• Если cwnd = 10, это примерно 14.6 КБ
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
CSS тоже блокирует отображение
• Решение:
• Минификация
• Убрать неиспользуемые селекторы (инструмент Audits в Chrome Dev Tools)
• Оставить только тот CSS, отображающий первый экран страницы
• Остальное загрузить с помощью JavaScript
• Увеличить Initial Congestion Window
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Минификация
• Автоматическое подключение файлов *.min.css и *.min.js
• Если дата изменения min-файла меньше, чем у оригинала, будет подключен последний
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Оптимизация изображений
• PageSpeed сильно снижает баллы за большие картинки, которые
отображаются в маленьком размере
• Оптимизации
• Сжатие (jpegtran, optipng, pngquant, gifsicle, PageSpeed Insights)
• Спрайты
• Base64
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Новый CDN
• Сжимает картинки
• Минифицирует JavaScript и CSS файлы
• Поддерживает HTTPS
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Еще оптимизации
• Gzip-сжатие
• HTTP-кеширование (Expires/Cache-Control: max-age, Last-Modified/E-tag)
• Время ответа сервера
• Отказ от редиректов (site.ru/ –> site.ru/main.html)
• Вынос ресурсов на разные домены
• Объединение CSS и JavaScript файлов
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Бонус: Bitrix Composite Notifier
1
Расширение для Google Chrome
1. Индикация композитного сайта
2. Сообщает, когда композитный кеш изменился
3. Сигнализирует о различных ошибках
https://goo.gl/c6Nizv
2
3
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Что нужно для победы
• Mobile-Friendly Test
• Адаптивная верстка (шрифты, размеры, viewport)
• Правильный robots.txt
• Google PageSpeed Insights
• Блокирование отображения JS и CSS-файлами в <head>
• Размер HTML-страницы и внешних ресурсов
• Время ответа от сервера
• Битрикс
• Настройки оптимизации JavaScript и CSS
• Композит
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ
Задайте вопрос
на странице
трансляции
Официальный тег конференции в социальных сетях
#bitrixconf
