Цель:

показать направления для улучшения производительности сайта daddy.casino

Общая статистика

GTmetix отчет Из отчета следует что по-прежнему наибольший вклад создают картинки.

Картинки, 404

Сейчас при загрузке главной происходит попытка загрузки отсутствующих изображений Ожидается что сайт не будет пытаться загрузить не существующиеизображенияя (и в целом не будет лишнее загружать)

Картинки, размер

На сайте есть большое количество больших изображений. К примеру: https://daddy.casino/static/images/jackpot_desktop.jpg весит 270кб https://daddy.casino/content/wp-content/uploads/2024/03/new_content-6.png весит 730кб https://daddy.casino/content/wp-content/uploads/2024/03/new_content-4.png весит 456кб суммарно это уже больше мегабайта из 3х мегабайт всех картинок. Ожидаемое поведение: все картинки весом до 100кб. Часто для картинок можно уменьшить количество цветов (с 32бит цвета на 16бит цвета, что уже уменьшает размер картинки в два раза сразу), без потери качества визуального.

Картинки, формат

Сейчас на сайте много картинок в формате jpg. К примеру https://agstatic.com/games/pragmaticplay/315/zeus_vs_hades_gods_of_war.jpg На данный момент браузеры поддерживают более компактные форматы, к примеру avif и webp. Активировать поддержку webp можно просто установив галочку на cloudflare polish. Он автоматически будет отдавать webp, если бразуер его подрреживает и размер картинки после пережатия уменьшится. Для поддержки avif конечно уже нужно внести изменения в код, либо использовать внешний cdn провайдер. Вы уже используете его для части картинок, к примеру https://imagedelivery.net/KH9e6eXO0sUMxqDn6m28jA/3352793c-71d6-4ed2-7073-59e543ee5c00/BannerCat возвращает avif, если браузер его поддерживает. Возможно его стоит использовать для всех изображений на сайте. При наличии ресурсов разработчиков можно перейти на использование https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture, чтобы бразуер сам выбирал лучший формат и размер из списка предоставленных.

Картинки, CORS

Сейчас при загрузке каждой картинки с cdn https://agstatic.com делается дополнительный OPTIONS запрос. То есть вместо загрузки картинки, делается сначала блокирующий OPTIONS http запрос, а вслед за ним, в случае успеха, делается уже запрос на скачивание картинки. Решается этот вопрос установкой правильных CORS заголовков для CDN домена

Шрифты, формат

На данный момент оптимально использовать только woff2 шрифты, остальные уже не нужны и места woff2 меньше занимает (процентов на 30) Ожидается что сайт не будет использовать старый форматы шрифтов.

Полифилы

В целом полифилы это хорошо, но конкретно в нашем случае с ними есть проблемы - время на обслуживание полифилов весьма большое, имеет смысл загружать их только по необходимости (к примеру в случае отсутствие поддержки type="module" сигнал к тому что полифилы нужны, в противном случае они наверняка не нужны). Либо просто пересмотреть содержимое этих полифилов, возможно часть из них уже не актуальны

cache police для ассетов

Для домена agstatic забыты cache-policy заголовки, стоит добавить

GTM место установки

GTM откровенно говоря в странном месте стоит, до charset Я бы предположил что meta заголовки должны быть все же до установки GTM.

Отложенная загрузка GTM

на данный момент внутри GTM подгружаются достаточно тяжелые clarity, ga, fb. И их подгрузка идет параллельно с запуском приложения. Я бы рекомендовал вынести подключение GTM на момент после загрузки основного кода приложения.

<script lang="ts" context="module">  
  let gtmLoaded = false;  
</script>  
  
<script lang="ts">  
  import { onMount } from 'svelte';  
  import { PUBLIC_GTM_TAG_ID } from '$env/static/public';  
  
  function setUpDataLayer() {  
    window.dataLayer = window.dataLayer || [];  
    window.dataLayer.push({  
      'gtm.start': new Date().getTime(),  
      event: 'gtm.js'  
    });  
  }  
  
  function setUpScript() {  
    if (!PUBLIC_GTM_TAG_ID) return;  
    let gtmScript = document.createElement('script');  
    gtmScript.src = `https://www.googletagmanager.com/gtm.js?id=${PUBLIC_GTM_TAG_ID}&l=dataLayer`;  
    document.head.appendChild(gtmScript);  
  }  
  
  onMount(() => {  
    if (gtmLoaded) return;  
    setUpDataLayer();  
    setUpScript();  
    gtmLoaded = true;  
  });  
</script>

Отложенная загрузка чата хелпдеска

Чат хелпдеска достаточно тяжелый, его имеет смысл подгружать после начала взаимодействия пользователя со страницей (первый клик, скролл и т.п.). Либо к примеру вообще по клику на иконку открытия чата загружать код самого чата. Он тяжелый.

Отложенная загрузка картинок

Обычный тег img уже имеет поддержку lazy load

<img loading="lazy" src="image.jpg" alt="..." />

рекомендуется его добавить для картинок за пределами первого экрана

FLOG

у нас есть какой-то не понятный запрос на POST /Flog, он совершается многократно, ничего вроде не делает, но выполняется долго и много раз. Ожидается что он либо будет вызван один раз, либо что не будет вообще вызван

Собрать отчеты о неиспользуемых библиотеках и удалить их

Reporting instruments:

• https://www.npmjs.com/package/dependency-cruiser
• для vite: https://github.com/btd/rollup-plugin-visualizer, для webpack есть альтернатива: https://www.npmjs.com/package/webpack-bundle-analyzer

Увы я не могу сгенерировать отчеты на уже собранном сайте, так что если вы могли бы сформировать эти отчеты и выслать - было бы хорошо посмотреть что внутри проекта сейчас лежит.

Предположительно у вас используется несколько библиотек которые уже не актуальны в 2024м году, к примеру судя по всему у вас используется moment.js. Его можно успешно заменить на https://day.js.org/

Уменьшить количество DOM элементов.

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

Установить background на body

Всем понятно что сложно победить количество DOM элементов не переверстывая сайт, но уменьшить негативный эффект можно заинлайнив в body цвет на background отличный от белого. К примеру

<body style="background-color: red;">page content</body>

В этом случай вместо белой подложки при недостаточной скорости скрола будет показываться хотя бы монотонная заливка (лучше выбрать цвет и брендовых для проекта)

Блок recent wins

Очень большую нагрузку создает блок RecentWins - 21 layer на ровном месте Большая часть этих блоков не видима, но все они постоянно рендерятся и двигаются в отдельных скрытых layers.

Убрать лишние layers

Собственно recent wins просто очень заметен, но в целом у вас используется много больших, и часто не видимых слоев.

Slider-swiper

Так же повсеместно используется swiper, часто для блоков которые никогда не свайпаются (поддерживаемые платежки), c предварительным рендером всего контента. К примеру 15мб в памяти на блок, который никогда особо не скролиться.

Я бы рекомендовал, если нет прямо сильной необходимости, делать слайдеры на CSS без swiper, либо хотя бы присмотреться более адекватным альтернативам (https://splidejs.com/ или что-то еще). На данный момент можно обойтись CSS в большинстве случаев.