Нужно оптимизировать скорость загрузки сайта https://linkifyo.com/ по результатам Google PageSpeed Insights (Lighthouse 13.6.0). Текущие результаты: Мобильная версия: Performance: 89/100 FCP: 2,7 секунды LCP: 2,7 секунды TBT: 60 мс CLS: 0 Компьютер: Performance: 92/100 FCP: 0,4 секунды LCP: 1,3 секунды TBT: 180 мс CLS: 0,001 Хочу исправить две потенциальные проблемы. 1. Анимация текста на первом экране На мобильной версии Lighthouse определил следующий элемент как LCP: Текст начинается с: "I can do it for you, or teach you and your team to do it yourselves." В отчёте указана задержка отрисовки LCP-элемента 2330 мс. Предполагаю, что задержка может быть связана с анимацией появления текста (reveal-up), реализованной через CSS или JavaScript/GSAP. Что нужно сделать: Проверить CSS и JavaScript, отвечающие за reveal-up, а также остальные анимации первого экрана. Определить, что именно задерживает отрисовку LCP: анимация, ожидание JavaScript, шрифты или другая причина. Если анимация действительно задерживает LCP, убрать эту задержку. Важный текст первого экрана должен быть видим без ожидания завершения JavaScript-анимации. По возможности сохранить анимации в остальных секциях сайта. Не менять визуальный дизайн, расположение элементов и содержимое. Главная цель — сократить LCP на мобильных устройствах. 2. Оптимизация Google Fonts Сейчас сайт загружает Roboto через Google Fonts: https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap По данным Lighthouse: На мобильной версии запрос к Google Fonts блокирует отрисовку примерно на 750 мс. На компьютере — примерно на 200 мс. Дополнительно загружаются три WOFF2-файла общим объёмом около 90 КиБ. Что нужно сделать: Проверить, какие начертания и наборы символов Roboto действительно используются. Скачать необходимые WOFF2-файлы и разместить их локально на сайте. Настроить @font-face с font-display: swap. Удалить ненужные обращения к fonts.googleapis.com и fonts.gstatic.com, включая устаревшие preconnect. Если это ускорит первую отрисовку, добавить preload для критически важного шрифта. Не загружать заранее все шрифты без необходимости. Сохранить прежний внешний вид текста, включая размеры, толщину и переносы строк. Требования к результату Не менять дизайн сайта. Не ломать существующие анимации и интерактивность. Не добавлять новые библиотеки ради оптимизации. Сначала проверить причины проблем, а не просто удалять код по предположению. После изменений проверить мобильную и десктопную версии. По возможности провести несколько повторных тестов Lighthouse и сравнить медианные результаты. Целевой результат: LCP мобильной версии ниже 2,5 секунды, желательно Performance 90+, без ухудшения других показателей. Внеси исправления в код и объясни, какие именно изменения были сделаны и почему они должны улучшить загрузку.
LinkedIn Strategist, фаундер агентства B2B контент-маркетинга в Тель-Авиве
· 3 ч0 комментов