Содержание
Сегодня мы обсудим очень частый вопрос от пользователей uCoz и uWeb, о том как ускорить работу своего сайта под: PageSpeed Insights. Отметим заранее, что это не быстрый процесс и для этого требуется много терпения, чтобы завершить все корректно и не сломать работу функционала сайта.
Основное с чего бы стоило начать, это оптимизация изображений. Вам нужно на уровне шаблона, проверить страницы шаблона вида материалов, материала и комментариев, шаблоны информеров, там где вы выводите фото с помощью кода: $IMG_URL1$ нужно заменить на $IMG_SMALL_URL1$ данная оптимизация уменьшит вес ваших страниц сайта и прибавит процент в загрузке, ускорит сайт и уменьшит общий вес страницы.
В данной ситуации советуется использовать прочие плагины, могу выделить такие как: lazysizes, lozad.js, Blazy, yall.js. Я себе для примера попробовал плагин lozad.js, проверил на примере материала у которого 47 фотографий на странице, большой обзор и гугл оценил его с меткой, что отложенная загрузку корректна.
Реализуется отложенная загрузка примерно так, в шаблоне страницы материала и комментариев модуля перед тегом </body> ставим скрипт:
<script type="text/javascript">
$(".nameclass img").each(function() {
$('img[src$=".jpg"], img[src$=".jpeg"], img[src$=".gif"], img[src$=".png"]').addClass('lozad');
});
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
вместо nameclass нужно прописать название класса, внутри которого находится весь материал, далее скрипт автоматически проставит к фото класс lozad и все будет работать.
Если вы используете много файлов стилей, в данной ситуации рекомендуется собрать их все в один файл, это уменьшит количество запросов к разным файлам и уменьшит время, которое требуется для обработки каждого файла по отдельности в итоге будет + к скорости загрузки сайта.
Выполнить идентичные рекомендации как и с CSS, если есть много разных файлов js, попробуйте их объединить все в одних общий если это в вашей ситуации возможно.
Проверьте свою таблицу стилей на наличие ненужных параметров, часто у нас в стилях собирается ненужный мусор, который мы на сайте не используем. Рекомендую все стили оптимизировать и настроить отображение для каждого блока (класса) в 1 строку, это уменьшит размер таблицы стилей и время на ее обработку.
Идентично как и в CSS, проверьте свой шаблон на предмет мусорных скриптов, почистите шаблон от мусора и оптимизируйте использование js на минимум, лишь необходимое без украшений, миганий и сверканий.
Lighthouse собирает все изображения JPEG или BMP на странице, устанавливает уровень сжатия каждого изображения на 85, а затем сравнивает исходную версию со сжатой версией. Если потенциальная экономия составляет 4 КБ или больше, Lighthouse помечает изображение как оптимизированное.
То есть, в данное ситуации сравнивается уровень сжатия и сам вес изображений, если фото слишком большие по весу, придется заниматься сжатием. Рекомендую крепить к материалам фото jpeg без использования png так как они всегда больших размеров и с этим будут проблемы при оптимизации.
Гугл нам советует использовать современные форматы изображений, например JPEG 2000, JPEG XR и WebP, отмечу, что формат WebP в процессе реализации поддержки для прикрепления к материалам в uCoz и uWeb, на данный момент еще не поддерживается.
Чтобы уменьшить расход сетевого трафика, рекомендуем сжимать текстовые ресурсы (gzip, deflate или brotli). Нам в данной ситуации ничего делать не нужно, uCoz и uWeb на стороне серверов уже настроил сжатие gzip.
Чтобы быстро устанавливать соединение с необходимыми сторонними источниками, добавьте ресурсную подсказку `preconnect` или `dns-prefetch`. Подробнее об использовании, можно прочесть на Хабре.
Google оценивание насколько быстро отвечает сервер на котором расположен ваш сайт, в данной ситуации все зависит от вашего хостинга и хорошие ли там серверы.
На странице проверяется наличие редиректов, если их будет много, это минус в прохождении проверки по данному пункту.
Вместо изображений формата GIF, чтобы сэкономить сетевой трафик, используйте формат видео MPEG-4/WebM для анимированного контента и формат изображений PNG/WebP – для статического.
Проверьте шаблон сайта на наличие дублирований и подключений одних и тех же плагинов, если найдете дублирование, постарайтесь избавиться от мусора, это добавит прирост в скорости загрузки сайта.
Нам предлагают при написании js учитывать лишь современные функции, чтобы мы не использовали устаревшие функции так как это захламляет код. В большей части случаев данный пункт при проверке проходится автоматически.
В данной ситуации нам предлагают заранее сообщить о самом крупном фото на странице, то есть, в шаблоне страницы материала и комментариев модуля в блок хеад добавляем код вида:
<link rel="preload" as="image" href="$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?>" />
у меня первое фото с доп поля Изображения всегда основное и оно крупное, так я передам изображение для отрисовки крупного контента и мы этот пункт проходим успешно.
Дополнительно в шаблоне вида материалов модулей рекомендую в самый низ после всего кода прописать строку:
<link rel="preload" as="image" href="https://mybloga.com$IMG_URL1$" />
у меня на примере прописан мой домен перед $IMG_URL1$ вы же используйте свой домен. Так мы поможем заранее предзагрузить фото в архиве материалов модулей и уменьшить задержку для гугла.
Предлагается по минимуму использовать количество скриптов, файлов стилей, шрифтов и изображений на страницах сайта. Не делайте страницу мусоркой, которая для полной загрузки будет требовать 5-10 мб.
Рекомендуется по минимуму использовать на сайте количество скриптов и стилей и уровней их вложенности, чем меньше тем лучше. Обычно для сайтов uCoz и uWeb данный пункт проходит без проблем и ничего настраивать не нужно.
В данном пункте рекомендуется уменьшить время на загрузку вашего сайта, то есть, чем быстрее тем лучше. О том как ускорить свой сайт дополнительно, это будет рассмотрено в данном материале немного ниже.
В данном пункте нам отображает скрипты, которые используются у вас на сайте и который максимально большие по весу и существенно замедляют скорость загрузки сайта. Обычной такие скрипты можно сжать с помощью: https://jscompress.com/ но не все можно сжать так как иногда сжатие ломает работу скриптов.
Часто в данном пункте мы можем увидеть скрипт Яндекс Метрика или Google Analytics, но эти скрипты лучше не трогать так как статистику можно поломать.
Чем меньше вы будете использовать на сайте скриптов и стилей и будете их подключать у вас в шаблоне, тем больше тратится времени на обработку этих скриптов, если их будет мало, вы данный пункт пройдете без проблем.
Если гугл ругается и сообщает, что у вас к данному пункту есть вопросы и требуется исправление, вам нужно найти у себя на сайте подключенные вами веб-шрифты, обычно прописанные подобно:
@font-face{font-family:'шрифт';src:local(Lora),local(Regular),url(/fonts/шрифт.woff2) format("woff2"),url(/fonts/шрифт.woff) format("woff"),url(/fonts/шрифт.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap;}
Отметил синим цветом, если добавить к всем подключенным на сайте шрифтам значение ( font-display:swap ), этот вопрос будет решен, проверено на личном опыте.
Нас просят как можно меньше использовать скрипты на сайте, которые будет подгружаться с сторонних источников (сайтов), то есть, по возможности рекомендуем все свои скрипты загружать себе на фтп сайта, исключение сервисы статистики так как работу статистики можно сломать если себе загрузить скрипты.
Некоторые из сторонних встроенных объектов поддерживают отложенную загрузку. Замените их фасадными объектами до тех пор, пока они не понадобятся. Данный пункт при проверке сайта проходит без проблем для сайтов uCoz и uWeb, вам ничего не придется настраивать.
Чтобы повысить производительность при прокрутке страницы, используйте флаг `passive` для прослушивателей событий прикосновения и колеса мыши. Данный пункт при проверке сайта проходит без проблем для сайтов uCoz и uWeb, вам ничего не придется настраивать.
Постарайтесь не использовать на страницах сайта устаревшую конструкцию js подобно:
<script type="text/javascript">document.write();</script>
если будет использование, тогда у гугла будут замечания.
Данный пункт взаимосвязан с пунктом "Устраните большие смещения макета", если вы решите проблемы в рамках пункта больших смещений, решится и этот вопрос, как решить описано немного ниже (указать фиксированные размеры для блоков контента и других элементов).
Если у вас в шапке сайта или где-то в шаблоне имеются фото фиксированных размеров, обычно это небольшие фотографии, которые заданы как для полной версии сайта так и для мобильной, лучше прописать для фото размеры фиксировано напрямую, пример:
<img src="ссылка на фото" width="20" height="20">
вот так просто решается данный пункт, главное, чтобы вы вместо 20х20 прописали нужные вам размеры.
Увы, с кешем мы ничего поделать не сможем, максимально доступный функционал доступен лишь на стороне сервера к которому мы доступа не имеем, а нужен именно доступ к файлу htaccess в котором можно настроить правила кеширования.
Обычно в данном пункте мы можем увидеть скрипты статистики Яндекс Метрика и Google Analytics, но в нашей ситуации эти скрипты нам нужны и нам нужно мириться с тем, что они грузятся дольше других скриптов или отказаться от статистики на сайте вовсе, вам решать.
На предлагают по минимуму уменьшить количество запросов с страницы или использовать файл budget.json, только отмечу, снова этот файл настраивается на стороне сервера и мы не сможем в нем задать лимиты по запросам. Подробнее в материале: https://web.dev/use-lighthouse-for-performance-budgets/
Нам рекомендуют по минимуму на страницах сайте использовать цепочки вложенности по запросам, с того, что мне удалось раздобыть, чтобы разобраться в этом вопросе описано немного ниже.
В моей ситуации я решил вопрос с 13 запросов до 1. Мы будем работать с скриптами javascript, которые у вас подключены подобно:
<script type="text/javascript" src="/filename.js"></script>
и настроить асинхронную загрузку заменив скрипт выше на:
<script async type="text/javascript" src="/filename.js"></script>
как видите мы добавили атрибут async, это решит вопрос критических цепочек запросов.
Важно! После таких исправлений, проверять свой сайт на корректность работы скриптов, если атрибут async вредит функционалу сайта, не используйте его для отдельных скриптов. Лично я не трогал библиотеку query так как если ее асинхронно грузить создает проблемы в работе функционала меню сайта или других опций на сайте.
На данном этапе важно следующее, на большинстве сайтов можно избежать всех неожиданных сдвигов макета благодаря основным правилам:
Важно! Что я извлек с данного пункта, у меня в блоге для body в стилях не были заданы значения: width: 100%; height: 100%; в результате при сканировании сайта гугл видел внизу сайта большой блок с пустотой, задав фиксированные размеры ширины и высоты гугл показал, что проблема устранена и версия для ПК оптимизирована на 98%.
Важно кроме body в стилях задать width: 100%; height: 100%; и для блока каркаса внутри которого находится весь контент, у меня это блоки body и .wrapper
Если у вас в данном списке показывает ваши шрифты, что вы используете на сайте, подобно ( woff2, woff и ttf ), для решения данного вопроса, нужно в шаблоне в блок хеад прописать предварительную загрузку ваших шрифтов, делается это так:
<link rel="preload" href="/fonts/.../name.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/.../name.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="/fonts/.../name.ttf" as="font" type="font/ttf" crossorigin>
путь к файлам шрифтов пропишите свой.
Для файлов стилей так же важно настроить предварительную загрузку, то есть, находим ваши файлы стилей подобно:
<link type="text/css" href="/_st/my.css" rel="stylesheet"/>
или
<link type="text/css" href="/css/style.css" rel="stylesheet" />
и заменяем их на:
<link type="text/css" href="/_st/my.css" rel="preload stylesheet" as="style"/>
<link type="text/css" href="/css/style.css" rel="preload stylesheet" as="style"/>
В данном пункте нам предлагается убрать лишние скрипты и файлы стилей, которые у нас подключены в блоке хеад.
Отмечу, что не все скрипты нам нужны при работе под гостевым доступом, большая часть вообще не нужна для гостя и мы будем в данном пункте от этого отталкиваться. Мы отключим для гостя системные скрипты и оставим лишь необходимое.
В основных модулях: Страницы сайта, Блог, Новости, все Каталоги, в шаблоне страницы материала и комментариев находим код:
</title>
и заменяем его на следующий:
<?if($USER_LOGGED_IN$)?></title><?else?></<?'title'?>><?endif?>
Далее находим код:
</head>
и заменяем его на следующий код:
<?if($USER_LOGGED_IN$)?></head><?else?>
<link rel="stylesheet" href="/speed/speed.css">
<script src="/js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript" defer src="/speed/speed.js"></script>
<script defer src='https://www.google.com/recaptcha/api.js'></script>
<style type="text/css">.UhideBlockL {display:none}</style>
</<?'head'?>>
<?endif?>
Загрузить готовые собранные файлы js и css можно по кнопке немного ниже:
только не забудьте в коде выше поправить пути к файлам на свои.
Примечание! После отключения системных скриптов может сломаться работа операторов:
Для модуля Интернет-магазин вовсе рекомендую не отключать системные скрипты так как сломаете функционал.
Отмечу для слишком самоуверенных, в данной статье не описано все досконально от А - Я, это невозможно описать так как каждый сайт по своему уникальный и нельзя к всем применить шаблонное решение.
Если вы сломаете себе сайт или функционал сайта, восстанавливайте с резервной копии и не нужно в этом винить автора статьи.
Заказать ускорение PageSpeed Insights
Если вы хотите ускорить свой сайт, но не слишком в этом что-то понимаете, обращайтесь, помогу.
Перед тем как что-то пытаться, обязательно создавайте резервную копию шаблона: https://www.ucoz.ru/help/design/rezervnaya-kopiya-shablona
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!
| |
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.