• Главная
  • uCoz
  • Как ускорить работу сайта под PageSpeed Insights для uCoz и uWeb ?
Как ускорить работу сайта под PageSpeed Insights для uCoz и uWeb ?

Как ускорить работу сайта под PageSpeed Insights для uCoz и uWeb ?

О чем материал ?

Сегодня мы обсудим очень частый вопрос от пользователей uCoz и uWeb, о том как ускорить работу своего сайта под: PageSpeed Insights. Отметим заранее, что это не быстрый процесс и для этого требуется много терпения, чтобы завершить все корректно и не сломать работу функционала сайта.

Что нужно сделать, чтобы ускорить сайт uCoz и uWeb для PageSpeed Insights

Настройте подходящий размер изображений

Основное с чего бы стоило начать, это оптимизация изображений. Вам нужно на уровне шаблона, проверить страницы шаблона вида материалов, материала и комментариев, шаблоны информеров, там где вы выводите фото с помощью кода: $IMG_URL1$ нужно заменить на $IMG_SMALL_URL1$ данная оптимизация уменьшит вес ваших страниц сайта и прибавит процент в загрузке, ускорит сайт и уменьшит общий вес страницы.

Отложите загрузку скрытых изображений

В данной ситуации советуется использовать прочие плагины, могу выделить такие как: lazysizeslozad.jsBlazyyall.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

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

Уменьшите размер кода JavaScript

Выполнить идентичные рекомендации как и с CSS, если есть много разных файлов js, попробуйте их объединить все в одних общий если это в вашей ситуации возможно.

Удалите неиспользуемый код CSS

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

Удалите неиспользуемый код JavaScript

Идентично как и в 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 – для статического.

Удалите повторяющиеся модули из пакетов JavaScript

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

Не отправляйте устаревший код JavaScript в современные браузеры

Нам предлагают при написании 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 мб.

Сокращение размера структуры DOM

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

Метки и промежутки пользовательского времени

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

Время выполнения кода JavaScript

В данном пункте нам отображает скрипты, которые используются у вас на сайте и который максимально большие по весу и существенно замедляют скорость загрузки сайта. Обычной такие скрипты можно сжать с помощью: 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, вам ничего не придется настраивать.

Метод document.write() не используется

Постарайтесь не использовать на страницах сайта устаревшую конструкцию js подобно:

<script type="text/javascript">document.write();</script>

если будет использование, тогда у гугла будут замечания.

Избегайте некомбинированных анимаций

Данный пункт взаимосвязан с пунктом "Устраните большие смещения макета", если вы решите проблемы  в рамках пункта больших смещений, решится и этот вопрос, как решить описано немного ниже (указать фиксированные размеры для блоков контента и других элементов).

Для изображений явным образом заданы атрибуты width и height

Если у вас в шапке сайта или где-то в шаблоне имеются фото фиксированных размеров, обычно это небольшие фотографии, которые заданы как для полной версии сайта так и для мобильной, лучше прописать для фото размеры фиксировано напрямую, пример:

<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 так как если ее асинхронно грузить создает проблемы в работе функционала меню сайта или других опций на сайте.

Устраните большие смещения макета

На данном этапе важно следующее, на большинстве сайтов можно избежать всех неожиданных сдвигов макета благодаря основным правилам:

  • Всегда включайте атрибуты размера в свои изображения и видео. Либо как-то по-другому резервируйте нужное им пространство, к примеру, с помощью полей соотношения сторон CSS. Так браузер сможет выделить правильный объем места в документе во время загрузки изображения.
  • Не вставляйте контент поверх загруженного контента, за исключением ответа на взаимодействие пользователя. Тогда все изменения на странице будут ожидаемы для него.
  • Используйте анимацию и плавные переходы, чтобы подготовить пользователя к изменениям на странице.

Важно! Что я извлек с данного пункта, у меня в блоге для 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 можно по кнопке немного ниже:

Скачать Speed js / css

только не забудьте в коде выше поправить пути к файлам на свои.

Примечание! После отключения системных скриптов может сломаться работа операторов:

  1. $LOGIN_LINK$ стоит вручную вместо него прописать ссылку на форму входа /index/1
  2. $REGISTER_LINK$ вручную заменить на свою ссылку /register при уид авторизации и при локальной на /index/3
  3. $LOGIN_VK$ $LOGIN_OK$ $LOGIN_YANDEX$ $LOGIN_GOOGLE$ $LOGIN_FB$ $LOGIN_TWITTER$, в форме добавления комментариев данные кнопки лучше удалить и прописать условие: <?if($USER_LOGGED_IN$="0")?>Для добавления комментариев нужно зарегистрироваться: <a href="/register" style="font-size: 14px;">Регистрация</a> / <a href="/index/1" style="font-size: 14px;">Войти</a> <?endif?> делается все это для того, чтобы пользователь все-же зашел и оставил комментарий и не ушел. 

Для модуля Интернет-магазин вовсе рекомендую не отключать системные скрипты так как сломаете функционал.

Заказать ускорение PageSpeed Insights

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

Перед тем как что-то пытаться, обязательно создавайте резервную копию шаблона: https://www.ucoz.ru/help/design/rezervnaya-kopiya-shablona

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
A
Очень полезная статья. Периодически у себя на сайте нахожу старый код/скрипты/стили, которые уже не актуальны, удаляю вычищаю. за 14.5 лет чего уже только не было в коде)))
А объясните пожалуйста, что значит Отложите загрузку скрытых изображений. Это какие изображения? Которые спрятаны под спойлер? Или изображения которые пока не видны на экране? Тобишь, проматываешь страницу и изображения начинают подгружаться?
avatar
Нет не под спойлером, во время промотки страницы в браузере фото, что находятся ниже становится видимыми лишь когда к ним доходит скрол.

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

Но что еще стоит добавить, лучше стилями их не делать замутненными или не отображаемыми так как на мобильных будет проблема просмотра. Скрипт выполняет необходимую работу, гугл это понимает, больше ничего не нужно.
A
Понял, спасибо. Но я фото прячу под спойлер, есть некоторые материалы где фото очень много и страница получается слишком длинная...
avatar
Если конечно много фото в одном месте друг возле друга, я так же иногда практикую спойлеры.
A
А по поводу стилизации появления фоток считаю в принципе это лишним.
avatar
1. По классу, название нужно смотреть в шаблоне в данный <div> обычно оборачивают $MESSAGE$. 

2. Достаточно ли просто добавить loading="lazy", это нужно проверять на практике так как плагинов отложенной загрузки развелось достаточно много и не ясно какие именно поддерживает гугл.

3. Вам скачивать скрипт не нужно чтобы не сломать уже все что было настроено и соответственно в yandex-manifest.json добавлять ничего не нужно.

4. Да, сжатие js не всегда легко и нужно все проверять.

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

6. Пробел не нужен так как будет сломана ссылка на фото.

7.  В статье: /how-make-ad-between-text-material не используется метод document.write().

8. Как писал выше, вам лучше ничего не добавлять и не ломать уже существующие настройки.
a
Добрый день

не совсем понятно какое название класса нужно написать в скрипт

у меня на сайте весь материал класс <section class="content">

класс content прописываю, отложенная загрузка не происходит, можете посмотреть на странице https://www.pra3dnuk.ru/news/den_rozhdenija/1-0-10
avatar
Название класса у вас .eMessage значит в скрипте писать: .eMessage img
a
или может нужно контент обернуть в
<div data-toggle-class="active" class="lozad">
<!-- content -->
</div>
?
avatar
Можно просто поправить:

<section class="content">

и сделать:

<section class="content lozad">
a
Спасибо

Может у вас есть информация....

Реклама сильно снижает скорость загрузки, даже АДсенс от гугл.... может у вас есть рекомендации как это исправить не удаляя скрипт адсенс
avatar
Некоторые умельцы умудряются засунуть код в гугл тег менеджер, но это еще то извращение. Увы, идеального решения нет, все скрипты вместе взятые замедляют скорость, реклама, статистика и прочие виджеты.
a
Нашел вашу статью про манифест... позновательно

может у вас есть информация как подключить на ucoz PWA, а точнее как зарегистрировать на сайте service worker
avatar
Нет, нужно будет вникнуть в данную тему что и как и можно ли.
avatar
Вы не используете document.write, а вот uCoz все еще использует sad
https://prnt.sc/1yra25g
avatar
Кстати PWA очень очень интересная тема. На Ucoz легко реализуемая и здорово ускоряет сайт, только надо подобрать правильную стратегию кэширования. Было бы интересно узнать поподробнее и попроще в описании.
avatar
Почитайте пост: /uskoren....anifest
avatar
Уже стоит. Более расширенный. Использую для Яндекса и для Service Worker. Не хочется ограничиваться Яндекс браузером.
avatar
На каком сайте и какой используете ? Пример сайта приведите, интересно посмотреть.
avatar
Пока на тестовом. Готовим к запуску. Плюс кнопка для добавления сайта на экран устройств. От Windows до мобильных. https://wrestling-russia.com/forum/. И отказался от bootstrap. Сейчас переделываю на Grid. Скорость ответа в разы возрастает и CSS намного меньше. Ссылку на ресурсы откуда взял могу в личку скинуть.
avatar
Кстати, за Сloudflare отдельное спасибо. Не знал.
avatar
Если вы сами не используете какие скрпты для этого, прописываться ничего не должно. Нужно смотреть конкретный сайт если проблема еще актуальна.
avatar
По поводу загрузки шрифтов. Вот классное решение https://medium.com/high-technologies-center/%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B6%D0%B0%D0%B5%D0%BC-%D0%B2%D0%B5%D0%B1-%D1%88%D1%80%D0%B8%D1%84%D1%82%D1%8B-%D0%B0%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%BE-3e83dd29bb7e
Это перевод статьи.