Повесть о том, как я сайт оптимизировал. Бесплатный кейс с бесценными знаниями.

Привет тебе, всякий читающий! Сегодня расскажу о том, как я проводил оптимизацию одного из своих сайтов с нуля, чего в результате добился, и для чего это вообще всё надо.

Есть сайт на PHP 8.1, Laravel. Под базу взят PostgreSQl. На фронте нативный JS. За основу взят шаблон от Metronic, дабы не делать всё с нуля.

Страниц на сайте больше 2 миллионов. Контент собирался в результате сбора информации с множества источников.

Первоначальная оценка по Google Page Speed была не очень - 36 на мобильных устройствах и 80 на компьютере.

Вроде бы на компьютерах выглядит всё адекватно, но не тут то было. Сейчас все поисковики смотрят скорость именно по мобильным устройствам и акцент делают именно на них.

Наша цель - довести показатели на мобилках до максимума.

Поехали проводить аналитику по шагам.

Идём на гитхаб и устанавливаем через композер расширение. Там всего пару кликов, каждый уважаемый программист сделает самостоятельно.

После успешной установки при заходе на страницу (не забудьте в настройках в файле .env поставить APP_DEBUG=true) внизу слева страницы появится иконочка, при клике на которую откроется панель с кучей вкладок.

Залазим во вкладку Queries и смотрим все запросы, которые есть на странице. Получается что-то такое.

Я использую PHPStorm для работы с базой. Вы же можете использовать что-то иное, это не принципиально.

На этой вкладке нужно проанализировать вызов запросов. Для начала я увидел, что при выводе списка статей в цикле вызывается ещё один дополнительный запрос. Сделал всё в 1 запросе. Это практически минус 12 запросов со страницы. Такие моменты нужно анализировать глазками и оптимизировать под каждый проект самостоятельно.

Далее я взял КАЖДЫЙ запрос и проанализировал план его выполнения. Вот пример:

Как видим здесь нет никаких индексов. Лечится это легко. Смотрим по каким полям у нас происходят условия и с какой сортировкой. Затем создаём индекс по этим полям и смотрим результат. Вот что получилось у меня:

Мы оптимизировали запрос с 17к до 207. И это только один пример.

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

Ещё я советую проанализировать таблицы, которые можно было бы разбить на партиции.

Пример: у нас есть аналитика по годам в одной таблице с 1 миллионом записей. Вы постоянно забираете аналитику на текущий год и выводите пользователю. Здесь так и напрашивается деление таблицы по годам, а может даже и по месяцам. В результате запрос будет идти по ограниченному набору данных, а не по всем данным за всё время.

Как видим уже есть сподвижки. Работаем дальше.

Сайт грузит очень большое количество различных картинок, css'ов и js'ов. Пришла мысль всё это дело закешировать, чтобы быстро отдавать из оперативной памяти, а не лезть на жёсткий диск.

Для своих проектов я использую VarnishCache, т.к. уже привык и у него очень гибкая настройка.

Если вы используете Laravel, то есть вот такое расширение, чтобы подружить варниш с ларкой:

А вот здесь есть классное руководство по настройке:

А вот ещё ссылочка с конфигом. Если у вас другая версия варниша - поменяйте в урле версию и будет вам счастье.

Я добавил в кеш все js, css и картинки. Будьте крайне внимательны с настройкой. Можно, например, закешировать POST-запросы с формами или какие-то JSON-Ответы. Советую прогонять тестами сайты после добавления таких модулей.

Здесь шаг очень простой. Нужно проанализировать утилизацию ресурсов на вашем сервере. Посмотрите сколько используется процессора, памяти, места. Я на этом этапе просто взял и купил сервер в 2 раза мощнее, дабы мне хватило ресурсов с лихвой.

У меня в проекте использовался дефолтно сборщик webpack и правила на нём были крайне простыми - берём все файлы и засовываем в единый файл bundle.

Представьте, что на КАЖДОЙ странице забираются все js-библиотеки и css. Это очень сильно усложняет вывод страницы, при этом делает работу программиста легче. Не надо думать что и когда подрубить. Просто подключаешь любую компоненту и она работает! Ну не прелесть ли. Но не для поисковиков.

Пришлось переписать сборку. В результате теперь вместо одного большого файла у меня будет парочка сотен небольших. При этом нужно следить за последовательностью их подключения, переписать все страницы и т.д. Да, переписывать готовый проект очень сложно, и очень велика вероятность ошибки. Но на то мы и специалисты, чтобы делать всё качественно, не правда ли?

Классным дополнением будет пул коннектов к базе. Для PostgreSQL я использую PgBouncer. Можете скачать по ссылке ниже.

Пул коннектов позволяет держать постоянные соединения с базой данных для уменьшения потерь при подключений к ней. Вот здесь можете почитать официальную документацию:

Я установил расширение на Laravel для отлова мобильных устройств. качал отсюда:

Далее в коде для мобилок сделал другую вёрстку, более простую, чем в версии для компьютеров. Вырезал половину анимации, блоки с картой, ненужные слайдеры. Такой вариант поможет уменьшить DOM страницы и ускорит её отображение.

Смотрим полученный результат

Можно ещё пытаться оптимизировать файлы и запросы. Я не использовал Reddis для кеширования запросов, но вы можете тоже использовать этот метод.

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

Буду благодарен за подписку на мой tg-канал, если материал был полезен.