Удалите JS и css препятствующей загрузки страницы.

Katerina1993

Сообщений: 134 Регистрация: Мар 2018

27 Октября 2018 00:37

Вот такое сообщение мне выдаёт cy-pr анализ сайта: "Удалите код подключения JavaScript и CSS, блокирующий отображение верхней части страницы. Страница начинает отображаться, только после загрузки этих файлов.". Как мне быть я не могу удалить CSS и js, так как часть функционала сайта перестанет работать и вся графика и вёрстка без css пропадёт?

Федор Рашпиль

Сообщений: 588 Регистрация: Янв 2018

27 Октября 2018 03:02

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

Хватит ерундой страдать на SEO
ИДИ пахать на буксы
БЕСПЛАТНЫЙ ХОСТИНГ на 30 дней

sharkson

Сообщений: 5425 Регистрация: Янв 2014

27 Октября 2018 05:50

Katerina1993,

js - если они у вас загружаются с другого сайта - перезалейте на свой хостинг. Ссылки на скрипты и css разместите сразу после </head> с новой строки. Так вы оптимизируете их загрузку и это всё.

НАДЕЖНЫЙ И НЕДОРОГОЙ ХОСТИНГ ТУТ
НЕДОРОГОЙ ХОСТИНГ
ПРОДАМ БЛОГ ЖЖ
СОЗДАНИЕ И НАСТРОЙКА MediaWiki и phpbb3

Katerina1993

Сообщений: 134 Регистрация: Мар 2018

27 Октября 2018 11:50

Я перенесла все JavaScript'ы и CSS, после </head>, но в google page speed, всё равно отображается эта рекомендация.

Цитата

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Количество блокирующих скриптов на странице: 9. Количество блокирующих ресурсов CSS на странице: 3. Они замедляют отображение контента.

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

Eye

Сообщений: 22172 Регистрация: Май 2011

27 Октября 2018 13:25

Цитата
Katerina1993 пишет: Я перенесла все JavaScript'ы и CSS, после </head>

перенесите перед </body> и добавьте async defer, CSS также возможно подгружать после загрузки страницы, в начале просто оставить минимальный встроенный <style> в head, чтобы основная вёрстка выглядела более-менее до загрузки всех стилей. Но это не так просто сделать, не быстро.

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

Katerina1993

Сообщений: 134 Регистрация: Мар 2018

27 Октября 2018 15:45

Я нашла статью в сети, где рассказывается как разместить css и js внизу страницы. Вот код:

Код

</body>
//Вместо точек дополнительные js скрипты
<script src="/js/jquery-1.11.0.min.js"></script>
...
<script>
$(document).ready(function() {
$("head").append("<link rel='stylesheet' href='/styles.css' />");
//Стили для галереи карусели
$("head").append("<link rel='stylesheet' href='/slick/slick.css' />");
$("head").append("<link rel='stylesheet' href='/slick/slick-theme.css' />");
});
</script>
</html>

Только при переходе на сайт у меня сначала загружается страница, без стилей, а потом через секунду загружаются стили, как это можно исправить? Вот видео моего сайта, посмотрите пожалуйста. Сайт тестовый, видео сделано на Camtasia Studio.

Eye

Сообщений: 22172 Регистрация: Май 2011

27 Октября 2018 15:56

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

так и должно быть, поскольку теперь стили подгружаются после загрузки страницы. Чтобы было красиво, пока не загрузились все стили

Цитата
Eye пишет: в начале просто оставить минимальный встроенный <style> в head, чтобы основная вёрстка выглядела более-менее до загрузки всех стилей.

Katerina1993

Сообщений: 134 Регистрация: Мар 2018

27 Октября 2018 16:50

Вообщем, я решила javascript'ы записать снизу css стили slick для галереи то же снизу, а основные стили styles.css сверху. Скажите 92 % для мобильных устройств и пк, через google speed это нормально?

Eye

Сообщений: 22172 Регистрация: Май 2011

27 Октября 2018 17:32

Цитата
Katerina1993 пишет: Скажите 92 % для мобильных устройств и пк, через google speed это нормально?

Нормально. Но в топе и с 60% попадают сайты, и с 70%, и часто они выше тех, у кого 100%, иногда на пару страниц smile;)

masterrabot

Сообщений: 1752 Регистрация: Янв 2016

#10

27 Октября 2018 20:18

Цитата
Eye пишет: Но в топе и с 60% попадают сайты, и с 70%, и часто они выше тех, у кого 100%, иногда на пару страниц

Верно, поэтому вам сразу посоветовали забить на эту проблему и не выносить себе мозг... smile:)

lol_cp

Сообщений: 4751 Регистрация: Май 2012

#11

27 Октября 2018 22:10

А вообще, все легко, если правильно читать те самые рекомендации.Где сказано, кратко: не ставить скрипты (джава особенно) в верх части сайта. Оптимизировать стили, вынести некоторые элементы (для ленивых весь CSS файл меж тегами <style></style> в тело - да, это убивает кэширование этих кодов, но делает загрузку быстрее) в теле, особенно если это подгрузка доп стилей или картинок и так далее.

Просто вы даже не пытаетесь вникнуть и прочитать все эти рекомендации. Делов то 5-10 минут, понять все это еще 20-30 минут. И около 1 часа (живого времени) чтобы внедрить все это без ошибок.

SEO ПРОДВИЖЕНИЕ САЙТА В ЯНДЕКСБ ГУГЛЕ. SEO АУДИТ, ПОДНЯТЬ ИКС САЙТУ. * ПЕРЕД ЗАКАЗОМ УСЛУГИ, ОЗНАКОМИТЬСЯ FAQ

Katerina1993

Сообщений: 134 Регистрация: Мар 2018

#12

27 Октября 2018 22:17

Проблема так и осталась, только пишет что один css документ блокирует загрузки верхнего контента, только это уже не важно. Так уровень оптимизации сервера (анализ cy-pr) стоит на максимуме оптимизация для смартфонов то же на максимум. Теперь осталась внутренняя оптимизация (шкала на половина оптимизирована) и внешняя оптимизация (шкала на самом дне). Как выполнить оптимизацию для этих двух параметров? Так же время ответа сервера для пк 1.23, для телефона 1.16, а рекомендуется 0.2. Сколько тестировала чужие сайты не у кого 0.2 нет, стоит ли заморачиваться по этому поводу?

lol_cp

Сообщений: 4751 Регистрация: Май 2012

#13

27 Октября 2018 22:23

У меня 0.2 - киносайт, 0.4 блог. smile:)

Но не суть.

Причем здесь супр? Вы же вкурсе, что эти данные показываются по API с сайта PageSpeed Insights (гугл)? Проверяйте там, скачивайте готовые материалы для оптимизации, также там снизу при проверке.

Другой момент на загрузку влияет сколько у вас символов в HTML коде (лишние символы, пробелы, табуляции и так далее). Сколько раз вы используете дубли кода, например "<center>121</center> через предложение еще <center>121</center>".

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

Katerina1993

Сообщений: 134 Регистрация: Мар 2018

#14

29 Октября 2018 18:01

Цитата
У меня 0.2 - киносайт, 0.4 блог.

У вас, что нет не одной картинки на ваших сайтах. Просто не разу не видела, чтобы сервер отвечал так быстро. Может кинете мне ссылки в личку, чтобы я посмотрела?

Eye Сообщений: 22172 Регистрация: Май 2011	#15 29 Октября 2018 18:11 Время ответа не зависит от картинок, они подгружаются дополнительными запросами. Если CMS не тупит и не считает там что-то при генерации ответа секундами, подтормаживать ответ может ssl, например

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
19:29 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 17:29 Как продвигать сайт с неуникальным контентом 14:50 Индексация страниц 12:36 У кого новостник, дайте пару советов плиз 13:53 AviTool - мощный инструмент для автоматизации работы с Avito 17:01 Absence в Армении 23:19 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения?	13:23 Продам аккаунты Gmail USA IP \| Gmail MIX IP \| Outlook Old 04:12 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 21:35 Продвижение YouTube видео в топ поиска \| Любой тип контента \| Гарантия результата 20:21 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 18:30 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 16:09 Установка\|Настройка\|Доработка\|Наполнение сайтов\|Дизайн\|3D\|Видеомонтаж 12:15 [MOBILE 4G/LTE PROXY] Приватные Мобильные Прокси 30 Дней 10$ Безлим/ Подходят для всех сайтов	22:06 Добро пожаловать в цифровой мир... 19:42 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор 22:08 Накрутка поисковых подсказок 05:04 Точные прогнозы на футбол 14:01 Union Pharm - топовая фарма-партнерка для профессионалов! 10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 12:23 150+ хакерских поисковых систем и инструментов