Ускорение сайтов по Google PageSpeed

21 ноября 2017, Пётр Мишаков

Transcript

1. Ускорение сайтов по Google PageSpeed
2. О сервисе • Устройства: мобильное (iPhone 5) и десктоп (1024×768); • Зеленая зона — 85 баллов; • Основные метрики: ◦ Время загрузки первого экрана, ◦ Время полной загрузки страницы; • Скорость скачивания содержимого не учитывается; • Анализируется: конфигурация сервера, структура HTML, использование внешних ресурсов (изображений, JavaScript и CSS). https://developers.google.com/speed/docs/insights/about
3. Загрузка первого экрана Цель — показать первый экран пользователю смартфона через сеть 3G в пределах 1 секунды. https://developers.google.com/speed/docs/insights/mobile
4. У нас есть 400 мс на отображение первого экрана: 1. Ответ сервера в пределах 200 мс; 2. Без редиректов; 3. Необходимо уменьшить количество циклов, необходимых для первичной обработки (первый цикл 14КБ «TCP Slow start») *; 4. Не используйте внешние CSS и JS файлы для отображения верхней части (CSS Critical Path); 5. Отрисовка в браузере за 200 мс; 6. Оптимизируйте код JavaScript, чтобы он обрабатывался быстрее. https://developers.google.com/speed/docs/insights/mobile Загрузка первого экрана
5. Полная загрузка • Не используйте переадресацию (рекомендуйте убрать www из домена); • Включите сжатие; • Оптимизируйте время ответа сервера; • Используйте кеш браузера; • Сократите ресурсы; • Оптимизируйте изображения; • Оптимизируйте код CSS; • Оптимизируйте видимое содержание; • Удалите код JavaScript, препятствующий показу страницы; • Используйте асинхронные скрипты. https://developers.google.com/speed/docs/insights/rules
6. Не используйте переадресацию Проблема: между URL и целевой страницей выполняется более одной переадресации. Решение: • Переадресация без промежуточных страниц; • Адаптив; • <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.site.ru/page-1/"> в десктоп версии; • <link rel="canonical" href="https://site.ru/page-1/"> в мобильной версии. https://developers.google.com/speed/docs/insights/AvoidRedirects
7. Включите сжатие Проблема: сжимаемые ресурсы загружены без сжатия трафика. Решение: включить gzip сжатие в конфиге Nginx gzip on; gzip_proxied any; gzip_static on; gzip_http_version 1.0; gzip_types application/x-javascript application/javascript text/css image/svg+xml; # BX VM: /etc/nginx/nginx.conf http://nginx.org/ru/docs/http/ngx_http_gzip_module.html https://developers.google.com/speed/docs/insights/EnableCompression
8. Оптимизируйте время ответа сервера Проблема: время ответа сервера более 200 мс. Решение: • Композитный режим Битрикс; • Отдача файлов композита через Nginx; • Уменьшения количество компонентов на странице; • Оптимизация вызова и шаблонов компонентов; • Оптимизация динамических страниц (поиск, корзина, оформление заказа). https://developers.google.com/speed/docs/insights/Server
9. Оптимизируйте время ответа сервера Оптимизация вызова и шаблонов компонентов: • Меню: один кэш на все страницы CACHE_SELECTED_ITEMS => N; • Строка корзины: не выбирать товары, если не нужно SHOW_PRODUCTS => N • Запросы к бд: ◦ Используйте Fetch (htmlspecialchars и компиляция url-ов = медленно); ◦ Выбирайте данные заранее, если это возможно; ◦ Откажитесь от запросов в циклах; ◦ Не выбирайте данные повторно, изучите компонент. • GetOptimalPrice: не используйте на страницах каталога, эта функция для корзины и оформления заказа; • Кэш: размер данных, время жизни — 7 дней, сброс по изменениям.
10. Используйте кеш браузера Проблема: короткий период кэширования статических ресурсов Решение: добавить expires и etag для статических ресурсов в конфиге nginx expires 30d; etag on; # BX VM: /etc/nginx/bx/conf/bitrix_general.conf # комментарий — Static content http://nginx.org/ru/docs/http/ngx_http_headers_module.html https://developers.google.com/web/fundamentals/performance/optimizing-content- efficiency/http-caching?hl=en https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
11. Сократите CSS и JavaScript Проблема: отсутствие минификации CSS и JS Решение: автоматическая компиляция min файлов через gulp и включение опции главного модуля Битрикс «Подключать минифицированные файлы». Gulp - среда исполнения nodejs (ставим lts), менеджер пакетов npm. Подробнее позже. https://bitbucket.org/techdirector/techdir.stuff/src/master/optimization/min-css-js-by -gulp/ https://developers.google.com/speed/docs/insights/MinifyResources
12. Оптимизируйте изображения Проблема: размер изображений слишком велик. Можно уменьшить без серьезной потери качества. Решение: изменить размеры изображения под отображаемые и оптимизировать качество сжатия. https://developers.google.com/speed/docs/insights/OptimizeImages
13. Оптимизируйте изображения: Размер 1. Выбираем максимальный отображаемый размер, для большей плотности пикселей создаем отдельное изображение: <img src=”img.jpg” srcset=”img@2x.jpg 2x” width=”300” height=”300” alt=”” /> 2. Для адаптивных изображений используем picture: <picture> <source srcset=”mobile.jpg, mobile@2x.jpg 2x” media=”(max-width: 600px);” /> <img src=”img.jpg” srcset=”img@2x.jpg 2x” width=”300” height=”300” alt=”” /> </picture> https://css-tricks.com/responsive-images-css/
14. Оптимизируйте изображения: Сжатие Битрикс По умолчанию качество сжатия 95 для модуля main и каждого инфоблока. Рекомендуемое значение 75. Обновление изображений инфоблоков: 1. Установите значение в настройках главного модуля и каждого инфоблока; 2. Пересохраните изображений PREVIEW_PICTURE и DETAIL_PICTURE. 3. Удалите папку /upload/resize_cache и кэш сайта; 4. Пройдите страницы сайта скриптом fetch-pages.php. Примечание: * Убедитесь в наличии рез.копии изображений; * Проверьте наличие других способов оптимизации изображений на сайте. https://bitbucket.org/techdirector/techdir.stuff/src/master/optimization/image-compr ession-bitrix-way/
15. Оптимизируйте изображения: Сжатие Утилиты Для сжатия изображений применяются следующие техники: • Удаление комментариев и meta-информации; • Уменьшение количества цветов; • JPEG-сжатие. Рекомендуемые утилиты: - JPEG — jpegtran или jpegoptim (выполнять с параметром --strip-all); - PNG — OptiPNG или PNGOUT. Для интеграции с Битрикс используем модуль rci (Игорь Яковенко), который проходит по таблице b_file. Необходимо увеличить качество сжатия Битрикс до 100.
16. Оптимизируйте код CSS Проблема: для отображения первого экрана используются внешние CSS и JS файлы. Решение: конфигурация ngx_pagespeed. ngx_pagespeed - модуль nginx, который создает CSS Critical Path на хитах пользователей для каждого URL отдельно. Подробнее позже. https://bitbucket.org/techdirector/techdir.stuff/src/master/optimization/ngxpagespee d/ https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
17. Уменьшите объем контента в первом экране Проблема: для отображения первого экрана используется большой объем загружаемой информации. Решение: • Изображения шаблона в спрайты (компиляция gulp); • Отложенная загрузка изображений в слайдерах и других частях; • Уменьшение размера html (ngx_pagespeed). https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
18. Удалите код JavaScript, препятствующий показу страницы Проблема: для отображения первого экрана используется внешний javascript файл. Решение: • Перенос javascript вниз страницы (опция главного модуля); • Инлайн скриптов, которые нельзя переносить вниз (пример на epraktika: modernizr и eski); • Правильное отображение первого экрана без javascript; • Добавить атрибут async для скрипта. https://developers.google.com/speed/docs/insights/BlockingJS
19. Используйте асинхронные скрипты Проблема: используется синхронная версия скрипта, который зарегистрирован в тесте, что может использоваться как асинхронный. Решение: заменить на асинхронную версию. Список зарегистрированных скриптов: https://developers.google.com/speed/docs/insights/UseAsync
20. Используйте асинхронные скрипты Плохо: <script src=”// www.google-analytics.com/analytics.js ”></script> Хорошо: <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-73337727-1', 'auto'); ga('send', 'pageview'); </script>
21. Оптимизация удобства использования • Откажитесь от плагинов; • Настройте область просмотра; • Адаптируйте размер контента для области просмотра; • Увеличьте размер активных элементов на странице; • Используйте шрифты легко читаемого размера. https://developers.google.com/speed/docs/insights/rules
22. Примеры работ • https://www.mixtcar.ru/ - 97/98; • https://epraktika.ru/ - 94/96; • https://spikes-online.ru/ - 90/93; • https://www.svetomuz.ru/ - 56/89. Отправьте результаты.