Очень медленно открывается сайт на смартфоне. Как оптимизировать?

спасибо ) то есть два варианта:

1. Раз в какое то время скриптом обходить все страницы и загрузить превьюхи ко мне на сайт.

2. Загружать через API на лету.

>  рисовать кнопку

Не совсем понял кнопка это треугльник сверху картинки типа Play?

Зачем 100500 раз загружать превью? Один раз загрузили вместе со ссылкой на видео - и пусть лежит.

Да.

Но видео то регулярно добавляю новые, поэтому придется 100500 )

Зачем 100500? Вы ссылку на новое видео один раз ставите? А превью зачем постоянно менять, если ссылка та же самая?

Вы немного не так поняли смысл работы подобных скриптов.

У вас на сайте видео встроено через фрейм и при каждой загрузке сайта посетителем, он вынужден ожидать полной загрузки контента во все фреймы на странице.

Вот, посмотрите пример работы подобного скрипта, сразу станет все понятно.

Там основной смысл в том, что в помощью JS фрейм подменяется на тег с картинкой и подобием плеера Ютуб.

Картинка превью забирается по API Ютуб через идентификатор видео-ролика (он у всех роликов уникальный).

В итоге, когда посетитель загружает страницу сайта, JS отрисовывает вместо фреймов легкую версию плеера с превью конкретного ролика.

А по нажатию кнопки воспроизведения уже грузится фрейм с роликом.

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

Все новые ролики, добавленные позже, будут работать по такому же принципу, вытягивая по API нужный контент по ID конкретного ролика.

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

Насчет вашего движка не подскажу. Это только кажется, что заказал под себя кастомную цмсину, и в дамках, скорость в небеса. Обычно ровно наоборот, а дописывание того что в том же вордпресс бесплатно, стоит как крыло от самолета. Во многих вордпресс плагинах кеширования, есть опция замены превьюшки картинкой, как писали тут выше, по такому же принципу. Одно нажатие кнопки в настройках - и конкретно эта страница похудела на 1,5 мб.

Но это еще не все. Там же гуглспид ругается на виджет вконтакте. Мелкая кнопка с несколькими аватарками, а навесила суммарно еще на 1,5 мб. 

Хит сезона, конечно же - яндекс метрика. Нет ни одного отчета пейджспид, где бы это не фигурировало. Разговоры про то что оно там асинхронное, синхрофазотронное и проч, можно оставить для бедных. Каждый наблюдательный человек в момент подвисания страницы в браузере может иногда видеть снизу слева служебное сообщение о том что ожидается загрузка яндекс метрики. Особенно если слушать всякие глупости и поставить это прямо в шапку, как у вас.
Решается установкой кода, который грузит метрику с задержкой, после основного контента.

Картинки. Гуглу нужен WEBP или AVIF. В вордпресс миллион плагинов которые конвертируют жпег и пнг прямо на сервере. Что касается вашего движка - здесь нужно уточнять у тех, кто вам его написал / продал и проч.

Также изображения желательно подрезать до того реального размера, в каком оно грузится в браузере. А то мне попадалось когда в квадратик 100*100 всобачивали картинку 5 мб, в разрешении 3000*3000. И таких 10 штук было на сайте )

Шрифты лучше грузить со своего сайта, а не с гуглобиблиотеки. Тогда гугл перестанет ругаться на то, что вы неправильно грузите шрифты. Вот такая вот загогулина.

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

Кэш на хостинге нужно настраивать, для статических объектов. Или в htaccess, если хостинг поддерживает. Не на 4 дня как у вас, а на 365.

<script>
function play() {
document.getElementById("video").innerHTML = '<iframe width="787" height="525" src="https://www.youtube.com/embed/111111111111?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
}
</script>

<div class="video" id="video" onclick="play();">
<img src="//img.youtube.com/vi/111111111111/maxresdefault.jpg" width="787" height="525" border="0" alt="0">
</div>

Берем блок, по клику на который заменяем содержимое на фрейм с видео. Тут 111111111111 - это уникальный URL видео, который обычно идет после /watch?v=111111111111 Единственное, делал для одного видео на странице, но поправить не сложно.

Дальше, шрифты загружаются с Гугла. Что Гугл не любит. Или хоть настроить   font-display (прямо на странице Гугла есть инструкция).

У изображений нет  width  и height . Будет ругаться.

Виджет ВК нужно переделывать на асинхронную загрзку. Как минимум. Или менять на картинку со ссылкой.

Кнопки поделиться тоже лучше асинхронно или переделать на свои. Это довольно просто.

Аналитику и счетчики - правда лучше в подвал.

Если есть специалист под рукой, то скрипты можно тоже в подвал. Но ОЧЕНЬ осторожно. Стили... не советую. Будет грузиться косо криво. Там сложнее все.

Потом править всякое вроде " В документе нет метаописания " И " Для элементов изображений не заданы атрибуты [alt] ".

А дальше видно будет.

Вот это, кстати, дебилизм, кмк. Лично я ругаюсь, когда у изображений есть  width  и height.

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

За небольшим исключением  размеры нужно указывать. Если нет размеров - невозможно рассчитать положение окружающих элементов. От этого пляски во время загрузки и развал вёрстки. Неужели никогда такого не видел? В прошлом это довольно часто встречалось и я даже останавливал загрузку чтобы прочитать текст. Ибо не возможно было как всё прыгало.

Аж интересно - и чем они тебе мешают?

Нечего добавлять. Просто надо выполнять по пунктам рекомендации и искать как это делают другие. Экспериментировать и тестировать вновь.