Устраните ресурсы, блокирующие отображение (PageSpeed Insights)

[alinalessioYandex]

PageSpeed Insights показывает низкие значения попугаев.

В разделе "Устраните ресурсы, блокирующие отображение" показывает такие файлы:

…jquery/jquery-2.1.1.min.js
…css/bootstrap.min.css
…css/font-awesome.min.css
…mmenu/jquery.mmenu.all.css
…css/twentytwenty.css
…stylesheet/stylesheet.css
…0/colorbox.css
…image/seocms.css
…javascript/common.js
…colorbox/jquery.colorbox.js
…blog/blog.color.js
…blog/blog.comment.js
/widget/cbk.css

Может у кого-то уже есть опыт и поделитесь в каком порядке вы выставили загрузку этих файлов, чтобы и скорости чуток прибавить, но и чтобы пользователь не мучился, что на сайте все "прыгает"?

[SiteMix]

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

Allow: /catalog/view/*js*
Allow: /catalog/view/*css*
Allow: /image/icons/*png*
Allow: /assets/css*
Allow: /assets/js*

Естественно, пути (маски) поставить свои.

[Yesvik]

1 час назад, SiteMix сказал:

Нужно в конце роботс добавить разрешение для этих файлов

При чем тут robots.txt?

[upsound]

2 минуты назад, Pascha сказал:

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

<link rel="preload" href="/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2" as="font" crossorigin="anonymous">

<link rel="preload" href="catalog/view/theme/default/stylesheet/stylesheet.css" as="style" onload="this.rel='stylesheet'">
<noscript><link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet"></noscript>

<link href="catalog/view/javascript/bootstrap/js/bootstrap.min.js" rel="preload" as="script">
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" ></script>

Так же не помешает:
+ сжатие и кеширование прописать в .htaccess
+ настройка индексов в БД
+ настройка сервера

а поможете с этим платно? я не * в коде ничего с кожалению)

[upsound]

37 минут назад, Pascha сказал:

у меня нет на это времени, но думаю многие тут по этой минимальной инструкции смогут это сделать...

Понял, тогда что бы не плодить тем, может кто-то тут откликнется)

[spectre]

да забейте вы болт на этот пейджспид, он не влияет на ранжирование

[alinalessioYandex]

1 час назад, Pascha сказал:

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

<link rel="preload" href="/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2" as="font" crossorigin="anonymous">

<link rel="preload" href="catalog/view/theme/default/stylesheet/stylesheet.css" as="style" onload="this.rel='stylesheet'">
<noscript><link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet"></noscript>

<link href="catalog/view/javascript/bootstrap/js/bootstrap.min.js" rel="preload" as="script">
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" ></script>

Можете опустить 

onload="this.rel='stylesheet'

если не ставите специальный для этого скрипт cssrelpreload.js

Так же не помешает:
+ сжатие и кеширование прописать в .htaccess
+ настройка индексов в БД
+ настройка сервера

Ух ты! Спасибо! 

Про дополнительные пункты в поиске поищу, думаю найду. Но по поводу "настойки сервера", можете подсказать что конкретно нужно искать? Чтобы можно было поисковой запрос как-то сформулировать. Дело в том что настройка сервера действительно меня занимает, так как проверка скорости показала, что ответ от сервера ждем 2-5 сек. Это очень долго.

[florapraktik]

39 минут назад, spectre сказал:

да забейте вы болт на этот пейджспид, он не влияет на ранжирование

Попугаи сами по себе олицетворяют успех.

...

Ранжирование ведь тоже не так уж сильно конвертируется в трафик.

А трафик не всегда конвертируется в продажи. 

А продажи очень не всегда конвертируются в прибыль.

Прибыль не обязательно конвертируется в хорошую жизнь.

 

Пейджспид для вебмастера, как марки для филателиста. А место в Топе гугла, как похвала строгого отца.

[markimax]

Уже не актуально

[SiteMix]

4 часа назад, Yesvik сказал:

При чем тут robots.txt?

При том, что в pagespeed запускается бот который не может получить доступ к указанным файлам из-за

Disallow: /catalog

[Asmadian]

3 часа назад, SiteMix сказал:

При том, что в pagespeed запускается бот который не может получить доступ к указанным файлам из-за

 Disallow: /catalog

Оцените всю глубину идеи.

Чтобы увеличить "попугаев", нужно чтобы "контролер попугаев", не смог прийти в к вам и все посчитать )))) 

Змінено 25 вересня 2019 користувачем Asmadian

[Yesvik]

В 25.09.2019 в 21:21, SiteMix сказал:

При том, что в pagespeed запускается бот который не может получить доступ к указанным файлам из-за

Disallow: /catalog

Так это легко проверяется. Открой access.log и посмотри, обращается Pagespeed к robots.txt или нет... сильно удивишься )

[SiteMix]

Зачем мне проверять? Когда была проблема описанная топикстартером я сделал то что написал и проблема была закрыта. А как это работает мне не интересно.

[Jozzeff]

В 25.09.2019 в 18:35, spectre сказал:

да забейте вы болт на этот пейджспид, он не влияет на ранжирование

У Google узнавал?

[alinalessioYandex]

В 25.09.2019 в 19:23, Pascha сказал:

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

<link rel="preload" href="/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2" as="font" crossorigin="anonymous">

<link rel="preload" href="catalog/view/theme/default/stylesheet/stylesheet.css" as="style" onload="this.rel='stylesheet'">
<noscript><link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet"></noscript>

<link href="catalog/view/javascript/bootstrap/js/bootstrap.min.js" rel="preload" as="script">
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" ></script>

Можете опустить 

onload="this.rel='stylesheet'

если не ставите специальный для этого скрипт cssrelpreload.js

Так же не помешает:
+ сжатие и кеширование прописать в .htaccess
+ настройка индексов в БД
+ настройка сервера

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

Ну, например стили:

было:

<link href="catalog/view/theme/remteh/stylesheet/stylesheet.css" rel="stylesheet">

стало:

<link rel="preload" href="catalog/view/theme/remteh/stylesheet/stylesheet.css" as="style">
<noscript><link href="catalog/view/theme/remteh/stylesheet/stylesheet.css" rel="stylesheet"></noscript>

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

[alinalessioYandex]

4 минуты назад, Pascha сказал:

так как что и как Вы там делаете мне не ведомо, просто дам практически готовый пример тыц
открываете сайт и "Просмотр кода страницы" или Ctrl+U (у меня  Хром)   
Весь код шапки прям перед глазами... 
далее идем на PageSpeed Insights  и смотрим
все работает?...

Это дефолт, что бы Вы не увидели там на сайте )))

Спасибо. Буду еще пытаться. Я бы не парился, если бы PageSpeed Insights показывал, ну хотя бы 70-80 попугаев, но у меня сейчас 37(!) попугаев на мобилках:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fxn--e1aauomt.xn--p1ai%2Fchlb%2Fremont-varochnyh-panelej

 

И более 3 секунд уходит как раз на загрузку этих скриптов. Вот список. Первые 5 скриптов бы как-то угомонить и будет сносно, я думаю.

[alinalessioYandex]

56 минут назад, Pascha сказал:

магия не только в этом, но и еще в нескольких строках кеширования и сжатия в .htaccess, пригласить на "романтик" Гугл бота в robots.txt
Я называю  это - легкая первоначальная оптимизация....
Ну а уж потом можно и "тяжелую артилерию" запускать в виде простановки индексов в БД и настройке сервера.
То есть в любом случае это комплекс мер, а не "волшебная строчка кода" 

 

В .htaccess добавил следующее:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

Часть скриптов и файлов стилей удалось оформить, как в вашем примере. Все ,вроде работает.

Но теперь криво работает мобильное меню. Ошибок в консоли нет. Не пойму, что ему надо. Может кто увидит ошибку?

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

 

[Artemkos88]

Можете подсказать путь к файлам js и css, что бы можно было прописать rel="preload"?