Повесть о том, как я сайт оптимизировал. Бесплатный кейс с бесценными знаниями
Привет тебе, всякий читающий! Сегодня расскажу о том, как я проводил оптимизацию одного из своих сайтов с нуля, чего в результате добился, и для чего это вообще всё надо.
Результат оптимизации сайта
Вводные данные
Есть сайт на PHP 8.1, Laravel. Под базу взят PostgreSQl. На фронте нативный JS. За основу взят шаблон от Metronic, дабы не делать всё с нуля.
Страниц на сайте больше 2 миллионов. Контент собирался в результате сбора информации с множества источников.
Первоначальная оценка по Google Page Speed была не очень - 36 на мобильных устройствах и 80 на компьютере.
Это мобилки
Это компьютер
Вроде бы на компьютерах выглядит всё адекватно, но не тут то было. Сейчас все поисковики смотрят скорость именно по мобильным устройствам и акцент делают именно на них.
Наша цель - довести показатели на мобилках до максимума.
Поехали проводить аналитику по шагам.
Шаг 1. Ставим расширение на Laravel для оптимизации запросов.
Идём на гитхаб и устанавливаем через композер расширение. Там всего пару кликов, каждый уважаемый программист сделает самостоятельно.
После успешной установки при заходе на страницу (не забудьте в настройках в файле .env поставить APP_DEBUG=true) внизу слева страницы появится иконочка, при клике на которую откроется панель с кучей вкладок.
Шаг 2. Тюнинг базы и запросов.
Залазим во вкладку Queries и смотрим все запросы, которые есть на странице. Получается что-то такое.
Красным отмечена суммарная продолжительность выполнения.
Я использую PHPStorm для работы с базой. Вы же можете использовать что-то иное, это не принципиально.
На этой вкладке нужно проанализировать вызов запросов. Для начала я увидел, что при выводе списка статей в цикле вызывается ещё один дополнительный запрос. Сделал всё в 1 запросе. Это практически минус 12 запросов со страницы. Такие моменты нужно анализировать глазками и оптимизировать под каждый проект самостоятельно.
Далее я взял КАЖДЫЙ запрос и проанализировал план его выполнения. Вот пример:
Смотрим здесь Total Cost
Как видим здесь нет никаких индексов. Лечится это легко. Смотрим по каким полям у нас происходят условия и с какой сортировкой. Затем создаём индекс по этим полям и смотрим результат. Вот что получилось у меня:
А вот результат после создания индексов
Мы оптимизировали запрос с 17к до 207. И это только один пример.
Вот пример простейшего запроса без индекса
А вот результат после создания индекса
Так мы должны пройти по каждому запросу на каждой странице и проанализировать их работу. Вполне возможно, что можно отказаться от каких-то таблиц, лишних джоинов и т.д.
Ещё я советую проанализировать таблицы, которые можно было бы разбить на партиции.
Пример: у нас есть аналитика по годам в одной таблице с 1 миллионом записей. Вы постоянно забираете аналитику на текущий год и выводите пользователю. Здесь так и напрашивается деление таблицы по годам, а может даже и по месяцам. В результате запрос будет идти по ограниченному набору данных, а не по всем данным за всё время.
Результат после оптимизации запросов
Как видим уже есть сподвижки. Работаем дальше.
Шаг 3. Подрубаем кеширование.
Сайт грузит очень большое количество различных картинок, css'ов и js'ов. Пришла мысль всё это дело закешировать, чтобы быстро отдавать из оперативной памяти, а не лезть на жёсткий диск.
Для своих проектов я использую VarnishCache, т.к. уже привык и у него очень гибкая настройка.
Если вы используете Laravel, то есть вот такое расширение, чтобы подружить варниш с ларкой:
А вот здесь есть классное руководство по настройке:
А вот ещё ссылочка с конфигом. Если у вас другая версия варниша - поменяйте в урле версию и будет вам счастье.
Я добавил в кеш все js, css и картинки. Будьте крайне внимательны с настройкой. Можно, например, закешировать POST-запросы с формами или какие-то JSON-Ответы. Советую прогонять тестами сайты после добавления таких модулей.
Шаг 4. Анализируем сервер.
Здесь шаг очень простой. Нужно проанализировать утилизацию ресурсов на вашем сервере. Посмотрите сколько используется процессора, памяти, места. Я на этом этапе просто взял и купил сервер в 2 раза мощнее, дабы мне хватило ресурсов с лихвой.
Шаг 5. Анализируем JS + CSS.
У меня в проекте использовался дефолтно сборщик webpack и правила на нём были крайне простыми - берём все файлы и засовываем в единый файл bundle.
Представьте, что на КАЖДОЙ странице забираются все js-библиотеки и css. Это очень сильно усложняет вывод страницы, при этом делает работу программиста легче. Не надо думать что и когда подрубить. Просто подключаешь любую компоненту и она работает! Ну не прелесть ли. Но не для поисковиков.
Пришлось переписать сборку. В результате теперь вместо одного большого файла у меня будет парочка сотен небольших. При этом нужно следить за последовательностью их подключения, переписать все страницы и т.д. Да, переписывать готовый проект очень сложно, и очень велика вероятность ошибки. Но на то мы и специалисты, чтобы делать всё качественно, не правда ли?
Шаг 6. Поднимаем пул коннектов к базе.
Классным дополнением будет пул коннектов к базе. Для PostgreSQL я использую PgBouncer. Можете скачать по ссылке ниже.
Пул коннектов позволяет держать постоянные соединения с базой данных для уменьшения потерь при подключений к ней. Вот здесь можете почитать официальную документацию:
Шаг 7. Оптимизация вёрстки для мобилок.
Я установил расширение на Laravel для отлова мобильных устройств. качал отсюда:
Далее в коде для мобилок сделал другую вёрстку, более простую, чем в версии для компьютеров. Вырезал половину анимации, блоки с картой, ненужные слайдеры. Такой вариант поможет уменьшить DOM страницы и ускорит её отображение.
Результат оптимизации
Смотрим полученный результат
Можно ещё пытаться оптимизировать файлы и запросы. Я не использовал Reddis для кеширования запросов, но вы можете тоже использовать этот метод.
По капельке можно легко оптимизировать большинство страниц. Благодаря такому подходу ваши сайты смогут быстро улучшить свои позиции в выдаче и увеличить конверсию.
Буду благодарен за подписку на мой tg-канал, если материал был полезен.