techstop-ekb-ru, Екатеринбург, Россия

Способ оптимизации загрузки CSS.

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

Вторым принципиальным моментом, не относящемуся к скорости загрузки страницы, но также снижающим общую оценку сайта - является ограничение на количество символов в тегах TITLE и H1, которых рекомендуется держать в районе 70 символов - для более точного описания страницы ... Хорошо, если страничка о : мытье кошек и собак под душем - 29 символов, включая пробелы ... Точно и емко ...

Однако, как описать краткими словами главную страничку многопланового информационного сайта, чтобы дать возможность посетителю емко понять главную цель и задачи всего сайта, и побудить совершить переход со страницы результатов поиска поисковой машины интернета ... Требуемая информативная составляющая описания может превышать 130 символов, что изначально является ошибкой ... Порой - это тяжелая и мучительная задача ))) ... Но, со временем - решаемая ...

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

Основной путь указания универсального / общего стиля - это добавление связанных таблиц стилей подключением файла CSS внутри
HEAD
link rel=stylesheet href=site_name/style.css"
/HEAD

Решение проблемы быстроты загрузки основного контента страницы вынуждает отклоняться от рекомендуемых путей создания сайта, однако, все еще оставаясь в рамках спецификации ... Один из таких путей - указание импорта стиля со страницы в связанную таблицу стилей сайта, с явным указанием URL адреса расположения style.css - но, без внесения каких-либо реальных изменений в структуру CSS записей ...

Слева пример без указания CSS, справа пример без указания CSS, но с указанием style @import ...

Пример кода сайта без CSS стиля Пример кода сайта с CSS стилем, подключенным способом @import

Пример слева (верхний для мобильного просмотра)- это стандартное отображение HTML кода сайта в браузере / на примере Chrome / без использования каких-либо CSS стилей вообще ... Смотрится неплохо на Desktop / ПК, но в качестве отображения контента на мобильных устройствах - расценивается, как слишком мелкий и неудобный шрифт ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Проверка HTML / validator.w3.org : 3 ошибки ...
- не указано Parse Mode
- не указано HTML Doctype
- не указано Character encoding
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Проверка jigsaw.w3.org/css-validator : Не найдено CSS = Ок! Ошибок не обнаружено ...

Пример справа - это, также - код без указания таблиц стилей CSS явным образом ... Однако, включение ниже основного контента тега style @import с указанием явного URL style.css - заставляет браузер отрисовать страничку на экране пользователя - только загрузив / импортировав и применив таблицу стилей ... В коде @import не добавляется никаких инструкций - пустой тег, но само явное указание URL для style.css заставляет браузер подгрузить CSS таблицу стилей и действовать далее уже с учетом ее правил отображения ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Проверка HTML / validator.w3.org : 3 ошибки ...
- не указано Parse Mode
- не указано HTML Doctype
- не указано Character encoding
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Проверка jigsaw.w3.org/css-validator : Ок! Ошибок не обнаружено ...
- 4 предупреждения о совпадении цветов background-color и border-???-color, не является ошибкой ...
- Вывод : тег @import вынуждает загружать style.css и применять ее для отображения документа ...

Этот козий или козлячий метод - трюк, как перенести загрузку CSS таблиц стилей ниже основного контента, все-таки не позволяет убить трех зайцев одновременно : снизить количество ошибок валидатором сайта, ускорить загрузку основного контента / кода страницы и при этом отображать содержимое в том стиле, как было задумано автором / вебмастером сайта ... Лишь немного ускоряет загрузку, но не более ... И, @import, и link rel="stylesheet" - оба эти метода ждут полного окончания загрузки для завершения рендеринга странички ...

Пример подключения CSS через @import ...
style
@import url("/style.css");
/style

Примечание : крайне не рекомендуется указывать оформление стиля сайта внутри HTML во избежание избыточного увеличения кода, повышения времени загрузки в браузере и усложнения редактирования веб-разработчиками ... Ну так, мы, внутри кода - ничего и не указываем ... 45 символов как-то не слишком увеличат код страницы, я думаю ...

Обнаруженный баг : если вы такой же, как я, любитель не закрывать теги - следует учесть, что код :
<p> бла-бла-бла
<p> бла-бла-бла
<p> бла-бла-бла
<style> - даст ошибку проверки валидатором HTML ... Дело в том, что парсеры браузеров - грамотные, и сами закроют незакрытый </p> перед новым <p> ...
Но, в случае <p> бла-бла-бла <style> - видимо парсер кода думает, что параграф еще не закрылся, а стиль должен быть изменен внутри параграфа - и это вызывает ошибку парсинга валидатора кода ... В этом случае надо позаботиться самому и правильный код будет :
<p> бла-бла-бла (закрывать /P необязятельно)
<p> бла-бла-бла </p> <style> - принудительное закрытие /P, ошибки не будет, Ок! ...

Примечание : м-да ... ситуация намного мразевее, чем ожидалось ... в общем, лично я не заметил большого ухудшения в результате проведенных модификаций - напротив, сайт стал работать слегка быстрее ... в среднем, тесты показали на 100 пунктов / миллисекунд быстрее ... валидаторы завопили : ой-е-ей, ошибка, не используйте @import - он тормозит загрузку страниц ... ну, у вас может и тормозит, а у меня - ускоряет ... и, что самое непонятное, что они подразумевают под верхней частью кода ? код от body до /body что-ли ? ладно, пусть потестится месяц / другой в этом режиме ... там, поглядим, что видно будет ...

Так, то, оно - так ... Вот именно, от body до /body ... И, конечно, память услужливо напоминает = async ... Но, что-то - нет и не видно большой и всеобщей радости по этому поводу ... Не только - невнятная поддержка браузерами, но и углубления в дебри кода / конструкторы : prototype (прототипы функций), promise (ожидание результатов) ... Жуть и муть ... В некоторых случаях async - это то, что надо, в других - может блокировать исполнение onload ...

Все-таки, некоторая ясность по вопросу загрузки JS и CSS - нет, нет, да и проблескивает ...
1) github.com/filamentgroup/loadCSS/releases - релиз v2.0.1 способа LoadCSS - асинхронной загрузки таблицы стилей - если, возможно ... Как, всегда - есть неподдерживаемые ситуации / варианты ...
2) developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content - продолжение изучения возможностей с Mozilla - тег link rel="preload" ... Предзагрузка требуемого кода для использования в дальнейшей обработке страницы ... Интересное пояснительное слово as = как ... как шрифт, как скрипт, как таблицу CSS стилей ...
3) smashingmagazine.com/2016/02/preload-what-is-it-good-for/ - еще одни размышления на тему целесообразности использования link rel="preload" as ... Круг замыкается, указывая на загрузку способом LoadCSS ...
4) learn.javascript.ru/external-script - на закуску : информация о внешних JS скриптах, загрузке и порядку исполнения ... Не async / await, но async defer ...

Давайте посмотрим на примере анализатора кода / работоспособности сайта sitechecker.pro как влияет оптимизация загрузки JS / CSS на общую оценку сайта ...
слева - до оптимизации, типа с ошибками ...
справа - после оптимизации, типа - исправлено ... Что было исправлено ? :
оптимизация загрузки JS - в тег скрипта добавлено = async defer ...
оптимизация загрузки CSS - добавлены строки / теги (в HEAD ... /HEAD) :
link rel=preload href=/style.css as=style type=text/css onload=this.onload=null ; this.rel=stylesheet
noscript link rel=stylesheet href=/style.css type=text/css /noscript
style @import /style - этот код был удален : стал не нужен, тем более, что при синтаксическом разборе кода страницы - стал выдавать ошибку ...
Примечание : связка операторов link rel=preload + onload - работает прекрасно, применяя таблицу стилей после первичной отрисовки документа, как и требовалось ...

Параметр До ... После ... Только без JS
Оценка 84 / 100 73 / 100 80 / 100
Ошибки 0 2 1
Замечания 4 5 3
Уязвимость URL Ок! НЕ ок! НЕ ок!
Mobile Скорость 83 98 90
Mobile Юзабилити 100 79 100
Mobile Вид Ок! НЕ ок! Ок!
Mobile Размер Ок! НЕ ок! Ок!
Desktop Скорость 92 96 96
Desktop % кода экрана 45% 27% 100%
Desktop блок JS 1 = НЕ ок! Ок! Ок!
Desktop блок CSS 1 = НЕ ок! Ок! 1 = НЕ ок!

Открыв небольшую завесу тайны - уточню, что отношение кода CSS к JS ( в моем случае ) = 1 кб : 143 кб, то есть смысла упираться за скорость в угоду качеству отображения - ну просто нет никакого : ересь и глупость ... Другое дело - объем скрипта - вот его действительно нужно грузить позднее ... Поэтому вернул CSS в HEAD как обычно рекомендуется, на загрузке JS скрипта отыграл примерно 10 пунктов скорости : с 83 до 93 ... Единственное, что не смог объяснить - откуда взялась ошибка : уязвимость / обработка URL параметров ... Для сравнения добавил этот тест в таблицу - в колонку под названием : Только без JS ...

Стал думать / припоминать и вспомнил, что уже видел странный запрос типа tmp5.htm?smi=23456781 - у меня нет адресов с ?smi=23456781 ... Теперь стало понятно, что такой запрос генерируют некоторые валидаторы кода сайта, чтобы выяснить : уязвим ли URL адрес ? Проверил вручную таким же методом и убедился, что страничка открывается в любом случае : без хвоста или с хвостом ... Это немного смутило, так как придется искать какое-то противодействие такому незапланированному поведению ... Еще более непонятно - почему при первом тесте эта ошибка не указана ? ... Может быть это async defer влияют / провоцируют такое поведение ?

Итоги теста ускорения загрузки JS и CSS + орг. выводы ...

Теоретически, ускорение загрузки 1 килобайт CSS с потерей стиля и работоспособности - не имеет смысла ...
- практически, дополнительное время на запрос загрузки CSS увеличивает общее время загрузки сайта : 400 мсек (HTML) + 400 мсек (CSS) + 500 мсек (рендеринг) = вот, уже и 1,5 секунды ...
- загрузка без CSS может привести к сваливанию дизайна сайта, что может повлечь глобальную реструктуризацию кода ...
- один из способов асинхронной загрузки CSS - это включение критичных участков стиля непосредственно в код страницы, а некритичных - после первой отрисовки страницы и окончательной загрузки CSS ...

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

Стиль отображения на мобильных устройствах, на который ориентируются крупнейшие игроки интернета, по умолчанию - точно такой же как на обычных компьютерах - не какой-то особенный ...
- следует изначально разрабатывать отображение сайта с удобством использования без CSS с упором отображения на мобильных девайсах, что в принципе невыполнимо из-за малых размеров экрана ...
- какое-то совмещение отображения на мобильных может дать тег viewport со значением scalable менее единицы, подобно эффекту псевдо-лупы, что немного расширит отображаемую информацию, обеспечив удобство просмотра ...
- тег viewport повлияет только на текст и межстрочный интервал; изображения придется делать резиновыми, а таблицы - часто вертикальными, в отличие от привычных горизонтальных на desktop версиях ...

В общем, куча проблем, но дорогу осилит идущий ...

16:36 04.09.2018

Поделиться ссылкой :

Интересы :

Метео / прогноз : Погода В Екб и области Калькулятор погоды по маршруту
Транспорт : Автомобили Программы Диагностика Тюнинг Статьи
Отдых : Досуг Компьютер Радио Фильмы Музыка Игры
Загрузки : торрент трекер лист русские и мировые announce стабильные / рабочие

Работа :

Aвто / перевозки : контейнерные грузоперевозки калькулятор стоимости грузоперевозок
Диагностика : автомобилей и грузовиков для друзей / питик (500) / Екатеринбург, Космонавтов / Артинская .

Быстрый поиск по сайту :


Главная / разделы сайта

= = = Меню раздела = = =


© techstop-ekb.ru / Екатеринбург / 2018