Как скрыть загрузку css?

Question

[Владислав Дмитрук]

Здравствуйте.
Посоветуйте пожалуйста, как скрыть от PageSpeed, загрузку CSS файлов, и сделать ее реально асинхронной или же отложить.
Или же просто, как асинхронно загрузить Bootstrap css ?
Спасибо.

Comments

[Сергей Попов]

По-сути, ты хочешь обмануть Google PS. Ммм.. Плохая идея. Это тебе не противник, а помощник.

[sim3x]

Что PS пишет конкретно?

[Владислав Дмитрук]

sim3x, требует скрыть или отложить загрузку CSS файлов, которые блокируют отображение контента, я уже из кожи вон лезу, а он ни на что не реагирует...

[zooks]

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

[sim3x]

Владислав Дмитрук, убрать ненужные инклуды в sass
Сжать и закешировать

[sim3x]

Владислав Дмитрук, Включать весь текст стилей в хтмл - не нужно и вредно

Answer 1

[Владислав Дмитрук]

Всем спасибо, решение получилось довольно костыльное, я склеил весь css код в один и разместил его в теге style перед закрывающим body, и получил по пейджспиду оценку в 96 / 100.

Comments

[sim3x]

Насколько увеличился вес всех страниц у сайта?

[Владислав Дмитрук]

sim3x, на 130 кб

Answer 2

[Tom Nolane]

я делаю так: (на php)

<?php
echo '<style>';
require 'css/bootstrap.min.css';
echo '</style>';
?>

и этого вполне достаточно. Google Page Speed перестаёт ругаться.

upd
для django наверно вот так:

<style>{% include "/static/css/style.css" %}</style>

Comments

[sim3x]

Те ваши стили не кешируются
Прекрасное решение заставить пользователя грузить 500кб+ на каждой странице

[Tom Nolane]

sim3x, вопрос про кеширование не стоял. А если стоит - то он решается легко - либо добавлением в .htaccess соответствующих строчек, либо

<meta http-equiv="Cache-control" content="public"> 
<meta http-equiv="Expires" content="Wed, 22 Mar 2018 00:20:05 GMT">

либо включением специальных директив в разных фреймворках (не во всех)

[Tom Nolane]

sim3x, суть не меняется - он все равно дозагрузит свои 500кб+
только сколько он запросов сделает? с (несколько), а так будет 1. Т.е. он за 1 раз будет загружать сразу всё! (и кешировать, если надо)
Каждый запрос стоит времени.....
(bootstrap.min.css весит около 118кб)

[Tom Nolane]

sim3x, у меня данный способ позволил снизить стоимость (затраты) привлечения трафика на сайты (через гугл) более, чем на 10%.

[sim3x]

Tom Nolane, те увас нет понимания, что происходит в require в пхп?

[Tom Nolane]

sim3x, require вставляет содержимое указанного файла (целиком) в PHP сценарий до выполнения всего сценария PHP. Это работа сервера. Сервер (если он правильно настроен) сжимает и отдает сжатую страницу (и ещё даже кеширует её иногда, если она не изменялась!). Через <link rel="stylesheet" href="css.css"> - вы заставляете клиента самим делать запрос и получать содержимое. (повторяю, что делать запрос и получить содержимое- потерять время (особенно при медленном интернете) бОльше, чем он дозагрузит целиком страницу.
И вопрос читали?

Как скрыть загрузку css?

Здравствуйте.
Посоветуйте пожалуйста, как скрыть от PageSpeed, загрузку CSS файлов, и сделать ее реально асинхронной или же отложить.
Или же просто, как асинхронно загрузить Bootstrap css ?
Спасибо.

слово кеширование есть?
опять же повторюсь:

у меня данный способ позволил снизить стоимость (затраты) привлечения трафика на сайты (через гугл) более, чем на 10%.

это всего лишь один из способов скрыть загрузку css. Лично я им пользуюсь и вполне доволен (особенно, когда смотрю на графики конверсий до/после использования). Вы праве указывать любой другой который знаете/пользуетесь, ну не праве тут разводить демагогию про мои знания в php, занимаясь троллингом. Не нравится этот способ - не вопрос, оставьте свой ответ ниже.

upd по поводу потери времени на запросы.. вы посмотрите ради интереса, сколько уходит (при каждом запросе) времени до получения первого байта....

[Владислав Дмитрук]

Tom Nolane, все классно, но у меня то Django....

[Tom Nolane]

sim3x, и ещё один камень...
Веб сервис для теста скорости (сторонний) :
webpagetest.org
две страницы:
test_link.html :

<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css2.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css3.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css4.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css5.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css6.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css7.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css8.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css9.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css10.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css11.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css12.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css13.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css14.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css15.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css16.map">
<link rel="stylesheet" type="text/css" href="bootstrap.css17.map">
</head>
<body>
</body>
</html>

и test_include.php

<?php
echo "<html>
<head>";
echo '<style>';
require "bootstrap.css.map";
echo '</style>';
echo '<style>';
require "bootstrap.css2.map";
echo '</style>';
echo '<style>';
require "bootstrap.css3.map";
echo '</style>';
echo '<style>';
require "bootstrap.css4.map";
echo '</style>';
echo '<style>';
require "bootstrap.css5.map";
echo '</style>';
echo '<style>';
require "bootstrap.css6.map";
echo '</style>';
echo '<style>';
require "bootstrap.css7.map";
echo '</style>';
echo '<style>';
require "bootstrap.css8.map";
echo '</style>';
echo '<style>';
require "bootstrap.css9.map";
echo '</style>';
echo '<style>';
require "bootstrap.css10.map";
echo '</style>';
echo '<style>';
require "bootstrap.css11.map";
echo '</style>';
echo '<style>';
require "bootstrap.css12.map";
echo '</style>';
echo '<style>';
require "bootstrap.css13.map";
echo '</style>';
echo '<style>';
require "bootstrap.css14.map";
echo '</style>';
echo '<style>';
require "bootstrap.css15.map";
echo '</style>';
echo '<style>';
require "bootstrap.css16.map";
echo '</style>';
echo '<style>';
require "bootstrap.css17.map";
echo '</style>';
echo '</head>
<body>
</body>
</html>';
?>

+ 17 файлов bootstrap.css.map по 380 кб каждый (в сумме 6.37Мб)
Делаем замер скорости:
http://site5.tomnolane.ru/test_include.php
и
http://site5.tomnolane.ru/test_link.html

думаю комментарии дальнейшие излишни.... а "всего лишь" 17 линков только...

[Tom Nolane]

Владислав Дмитрук, приветствую! возможно это поможет
п.с. я не силен в django

[sim3x]

Tom Nolane,
Хорошо, что вместо того, чтоб один раз рапросить 1-2 сжатых файла стилей, клиент их получает с каждой страницей
Особенно приятно такое делать на слабом инете

О мап файлах - упоминание о них вообще не требуется включать в текст хтмл

[Tom Nolane]

sim3x, я так понимаю 5-кратное улучшение скорости загрузки вам ни о чем не говорит... а также знания, что существует такая вещь как gzip, deflate и что через link - далеко не всегда приходит файл сжатый gzip/deflate. И ещё,
что при повторной загрузки отдается кеш страницы (который - ещё меньше,
чем при первой загрузки.

О мап файлах

- это быстрое и самое тяжёлое, что попалось под руку большого размера (лень было делать разные css большое размера). Дело не в мапах или бустрапе, суть в том - что при КАЖДОМ ЗАПРОСЕ LINK клиент ТРАТИТ СВОЁ ВРЕМЯ до ПОЛУЧЕНИЯ (Установления в т.ч. через dns соединения, рукопожатий и т.д.) 1 байта информации... это ПРОИСХОДИТ В сотни раз медленнее (если не в тысячи), чем тратит сервер чтобы встроить файл и отдать (сжатый по gzip, deflate). РАЗМЕР при передачи одной целиковой страницы меньше, чем через Link (читаем выше - они не всегда проходят через gzip/deflate + ping соединения отнимает кучу времени) - что ещё раз подтверждается тестами.
Более того, я лично слышал, как по одному федеральному каналу, в главных новостях диктор настойчиво рекомендовал не пользоваться javasript т.к. "это устаревшая технология" (это дословно, в середине 2017 года) и всякие умники отключают его, соответственно тем самым всякие асинхронные загрузки перестают работать.
по факту - этот метод работает, гугл не ругается, скорость загрузки страницы быстрее, чем при link + всякие плюшки от гугла становятся дешевле, т.к. сайт соответствует больше по "феншую", хотя и не по стандарту W3C
И опять же.. сторонние lib по css (и js) находятся в разных частях света - что способствует ещё дольшему соединению по времени (через link), а при повторной загрузки уже пофигу - отдается кеш (и там и там, но в моём случае всё равно быстрее)

[sim3x]

Tom Nolane,

подтверждается тестами

какими тестами?

Каким образом на медленном инете происходит ускорение?

[Tom Nolane]

sim3x, тут можно провести тест
ссылка 1
ссылка 2
разберетесь?

[Tom Nolane]

sim3x,

Каким образом на медленном инете происходит ускорение?

вы читать умеете?
причем тут ускорение? где я написал про "ускорение"???
я написал, что вес 1 страницы с include МЕНЬШЕ, чем с link

[sim3x]

Tom Nolane, мда

[Tom Nolane]

sim3x, мда? а это что? joxi.ru/J2bqRnDu4aeYem и joxi.ru/V2VONldi0nXVlA или это не вес страницы?
скорость соединения одинаковая (и не быстрая.. запрос идет с Польши). Можно считать это "медленным интернетом". Можно с Америки тестировать, суть останется - что через include будет передаваться быстрее (т.к. вес страницы с include меньше, чем через link). А там хоть 500 css файлов и 1 000 000 js файлов.