Все статьи

Как добавить сайту пару десятков баллов в Google Pagespeed

Есть прием, который применим буквально везде - и он один из самых действенных.

Частая задача, которую приходится нам решать - увеличение скорости сайта по показаниям Google Pagespeed Insights. Каждый проект в этом плане, конечно, уникален, но есть прием, который применим буквально везде - и он один из самых действенных.

В зависимости от проекта, применение приема, о котором пойдет речь дальше, может давать прирост от 5 до нескольких десятков баллов. Самый большой прирост в нашей практике составил 24 балла, и был получен на проекте с legacy-кодом 10-летней давности.

Ближе к делу. Речь про замену всех изображений на сайте на их webp-копии. Суть данного подхода изложена в статье https://ruhighload.com/Оптимизация+изображений+с+webp.

Пошаговая инструкция по применению на примере проекта на 1С-Битрикс:
— на сервере необходимо установить пакет cwebp (для конвертации картинок в webp)
— разместить в проекте скрипт, который будет осуществлять конвертацию, и настроить его автоматический запуск (например, раз в сутки)
— пример кода скрипта: https://pastebin.com/bHLnveCb. Разместить его можно в папке /local/cron/ проекта. Данный скрипт создает webp копии для всех картинок из папки upload. Если у картинки уже есть копия, скрипт на ней не срабатывает: запускать его можно часто без ущерба производительности сервера.
— настроить nginx на автоматическую подмену всех картинок на webp-копии. Отработанный и проверенный пример конфигурации: https://pastebin.com/2AEi1xWN

Читайте также

Внедряем DevSecOps в процесс разработки. Часть 5. Этап Deploy-time Checks, обзор инструментов
Внедряем DevSecOps в процесс разработки. Часть 5. Этап Deploy-time Checks, обзор инструментов
В предыдущей части рассказали о тестировании функционала на уязвимость до его попадания на продакшн. По итогам предыдущих статей мы можем проверить код на безопасность, собрать безопасные билды, проверить функционал на наличие уязвимостей. Теперь можно разворачивать приложение на продакшне.
Внедряем DevSecOps в процесс разработки. Часть 4. Этап Test-time Checks, обзор инструментов
Внедряем DevSecOps в процесс разработки. Часть 4. Этап Test-time Checks, обзор инструментов
В предыдущих статьях разобрали три этапа DevSecOps — Pre-commit Checks, Commit-time Checks, Post-build Checks. В четвертой статье поговорим о следующем этапе — Test-time Checks.
Внедряем DevSecOps в процесс разработки. Часть 3. Этап Post-build Checks в DevSecOps, обзор инструментов
Внедряем DevSecOps в процесс разработки. Часть 3. Этап Post-build Checks в DevSecOps, обзор инструментов
В этой части материала рассмотрим, что же такое Post-build Checks, и как на этом этапе используется такой класс инструментов, как Container Cheсks
Внедряем DevSecOps в процесс разработки. Часть 2. Обзор инструментов, Commit-time Checks
Внедряем DevSecOps в процесс разработки. Часть 2. Обзор инструментов, Commit-time Checks
Мы продолжаем публикацию цикла статей, где делимся опытом и наработками и рассказываем, из чего состоит DevSecOps и как его внедрить в процесс разработки.