С ростом скорости интернет соединения и увеличении мощности не только десктопных, но и мобильных устройств веб страницы стают более "тяжелыми". Количество и размер подключаемых файлов растет: JavaScript файлы, css файлы, изображения, виджеты сторонних сайтов, iframe. На данный момент специфика работы браузеров такая, что при загрузке js файла блокируется отривсовка до того момента, пока скрипт не выполниться. Современные браузеры в фоновом режиме будут парсить документ и скачивать скрипты и стили, но отрисовка будет заблокирована. Сравнение сетевых параметров для различных браузеров можно посмотреть на browserscope.org . Мы не можем устранить блокировку полностью, но можем оптимизировать серверную и клиентскую часть приложения, что бы блокировка отрисовки занимала наименьший промежуток времени.

Решения для серверной части:
- Уменьшить размер передаваемых файлов
- Использовать CDN
- Вынести статические файлы на отдельный домен или под домен, таким образом увеличить количество одновременных соединений браузера.
- Включить сжатие передаваемых файлов(gzip)

Решения для клиентской части:
- Уменьшить количество запросов.
- Кэшировать файлы на стороне клиента с помощью заголовков Expires и Etags.
- Использовать общедоступные CDN(Google CDN, Yandex CDN). Таким образом, существует вероятность, что файл с общедоступного CDN уже будет храниться в кеше браузера.

Одним из способов оптимизации скорости загрузки сайта является асинхронная загрузка файлов, которая не блокирует отрисовку.

Скрипт асинхронной загрузки JavaScript:

(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "URL файла"; document.getElementsByTagName("head").appendChild(script); })();

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

If (window.addEventListener) { window.addEventListener("load", async_load, false); } else if (window.attachEvent) { window.attachEvent("onload", async_load); }

Скрипт асинхронной загрузки JavaScript с учетом события onload (function() { function async_load(){ var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "URL файла"; document.getElementsByTagName("head").appendChild(script); } if (window.addEventListener) { window.addEventListener("load", async_load, false); } else if (window.attachEvent) { window.attachEvent("onload", async_load); } })();

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

Скрипт асинхронной загрузки множества подключаемых JavaScript файлов (function() { function async_load(){ [ "URL_файла_1.js", "URL_файла_2.js", "URL_файла_3.js" ].forEach(function(src) { var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = src; document.getElementsByTagName("head").appendChild(script); }); } if (window.addEventListener) { window.addEventListener("load", async_load, false); } else if (window.attachEvent) { window.attachEvent("onload", async_load); } })();

Но в такой реализации есть минус - скрипты будут загружаться в произвольном порядке и соответсвенно выполнятся они будут произвольно во времени. Данный скрипт асинхронной загрузки идеально подходит, если выполнение JavaScript файлов не зависят один от другого и не зависит от DOM. В обратном случае его использование может привести к ошибкам на странице или непредвиденному результату выполнения. Для последовательного выполнения, но асинхронной загрузки, нужно указать async=false, тогда файлы будут скачиваться в произвольном порядке, но выполняться по очереди.

HTML 5. Асинхронная загрузка JavaScript

Стандарт HTML 5 поддерживает асинхронную загрузку JavaScript. Это можно сделать путем добавления ключевого слова async или defer. Например:

Скрипт, который подключен с атрибутом defer выполнится не нарушая порядок выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но перед тем, как вызовется DOMContentLoaded.

Скрипт, который подключен с атрибутом async выполнится при первой возможности после полной загрузки, но при этом не ожидает окончания парсинга документа и до загрузки объекта window. Браузеры не гарантируют выполнение скриптов в том же порядке в котором они подключены.

Библиотеки для асинхронной загрузки JavaScript

RequireJS - модуль загрузки JavaScript. Оптимизирован под браузеры, но он может использоваться в других средах, таких как Node, Rhino.

Require(["script"], function(script) { console.log("start after load script.js"); });

extsrc.js - библиотека, которая запускает скрипты на выполнение после того, как страница загрузится и отобразится пользователю. Работает корректно с document.write.

yepnope.js - позволяет совершать асинхронную загрузку JavaScript и CSS файлов.

Yepnope([ "script.js", "style.css" ]);

Простой способ загрузки JavaScript скриптов

Оказывается, что на практике добиться оптимальной кросс браузерной загрузки JavaScript скриптов, которые не блокируют отображение сложно, а порой невозможно. Наиболее оптимальный способом является добавление в конец документа перед закрывающимся тегом body. Из за ограничения разных браузеров и самого HTML такой вариант загрузки, который не блокирует отображение, можно считать наиболее простой.

Я пытаюсь исключить 2 файла CSS, которые блокируют рендеринг на моем сайте, - они появляются в Google Page Speed ​​Insights. Я придерживался разных методов, ни один из которых не был успешным. Но недавно я нашел сообщение о Thinking Async и когда я применил этот код: он устранил проблему.

Однако после публикации страница потеряла стиль. Я не слишком уверен в том, что происходит, потому что код работает, но это стиль после загрузки, который не работает. Поблагодарите вашу помощь в этом. Благодаря

4 ответов

Уловкой запуска асинхронной загрузки стилей является использование элемента и установка недопустимого значения для атрибута media (я использую media = "none", но любое значение будет делать). Когда медиа-запрос оценивается как false, браузер все равно будет загружать таблицу стилей, но он не будет ждать, пока контент будет доступен до отображения страницы.

После того, как таблица стилей закончила загрузку, атрибут media должен быть установлен на допустимое значение, поэтому правила стиля будут применены к документу. Событие onload используется для переключения свойства media на все:

Этот метод загрузки CSS будет доставлять полезный контент посетителям намного быстрее, чем стандартный подход. Критический CSS все еще может быть использован с обычным блокирующим подходом (или вы можете встроить его для максимальной производительности), а некритические стили могут быть постепенно загружены и применены позже в процессе синтаксического анализа/рендеринга.

Этот метод использует JavaScript, но вы можете обслуживать не-JavaScript-браузеры, обертывая эквивалентные блокирующие элементы в элементе :

Вы можете увидеть операцию в www.itcha.edu.sv

вы можете попробовать получить его несколькими способами:

1. Использование media="bogus" и a на ноге

2. Включение DOM по-старому

(function(){ var bsa = document.createElement("script"); bsa.type = "text/javascript"; bsa.async = true; bsa.src = "https://s3.buysellads.com/ac/bsa.js"; (document.getElementsByTagName("head")||document.getElementsByTagName("body")).appendChild(bsa); })();

3.если вы можете попробовать плагины, которые вы могли бы попробовать loadCSS

// include loadCSS here... function loadCSS(href, before, media){ ... } // load a file loadCSS("path/to/mystylesheet.css");

Будущее представляется preload keyword для link элементов.

Версия синхронизации

Версия Async

К сожалению...

Известные браузеры, которые еще не поддерживают эту функцию включают Edge и iOS Safari.

Однако...

loadCSS представляется потенциальным решением, которое позволяет вам использовать preload сегодня (с резервными копиями).

Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style Sheets) может помочь в этом деле, сэкономив нам время и трафик.

1. Избегайте использования таблиц для разметки страницы

Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:

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

2. Не используйте картинки для отображения текста

Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример:

a:link.example, a:visited.example, a:active.example { color:#fff; background:#f90; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2em; border:4px #00f outset } a:hover.example { color:#fff; background:#fa1; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2em; border:4px #00f inset

Этот CSS определяет простую кнопку, которая меняет свой вид при наведении курсора. Таким образом можно создавать и более сложные объекты.

3. Загрузка картинок через CSS

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

И соответствующий CSS:

Pretty-image { background: url(filename.gif); width: 200px; height: 100px }

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

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

4. Использование контекстных стилей

Данный код неэффективен:

This is a sentence

This is another sentence

This is yet another sentence

This is one more sentence

.text { color: #03c; font-size:2em }

Вместо того, чтобы присваивать класс каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:

This is a sentence

This is another sentence

This is yet another sentence

This is one more sentence

.text p { color: #03c; font-size:2em }

Этот код указывает браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

Вы могли заметить, что цвет здесь указан всего тремя символами, а не шестью. В данном случае #03c является сокращённым написанием значения цвета #0033cc.

5. Использование сокращений

Шрифт

Лучше написать:

font: 1em/1.5em bold italic serif

font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif

Границы

border: 1px black solid

border-width: 1px; border-color: black; border-style: solid

Фон

background: #fff url(image.gif) no-repeat top left

background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;

Отступы и границы

Используйте:

margin: 2px 1px 3px 4px; (верх, вправо, низ, влево)

Аналогично:

margin: 5em 1em 3em; (верх, влево и вправо, низ)

margin: 5% 1%; (верх и низ, влево и вправо)

Эти правила применяются к атрибутам margin, border и padding.

6. Минимизирование пробелов, переводов строк и комментариев

Каждый символ - буква или пробел - занимают один байт. Каждый лишний символ только увеличивает размер страниц. Поэтому старайтесь поменьше нажимать Enter и Tab в процессе вёрстки. Кроме того, не забывайте объединять CSS-стили.

7. Используйте относительные ссылки

Абсолютные ссылки занимают намного больше места, чем относительные. А кроме того, создаёт дополнительную нагрузку на браузер, что более важно. Пример абсолютной ссылки: . Гораздо правильней будет написать < a href=»filename.htm»> . Но что если нужный файл находится в другом каталоге? Вот несколько примеров, которые помогут вам разобраться в этом вопросе:

• — Вызов корневой страницы сайта http://www.URL.com
• — Вызов страницы в корневом каталоге http://www.URL.com/filename.html
• — Файл в подкаталоге «корня» http://www.URL.com/directory/filename.html
• — Обращение к текущему каталогу и index.html
• — Каталог-родитель текущего и index.html
• — То же самое, с указанием файла
• — index.html в двух каталогах выше текущего

8. Не увлекайтесь применением тегов META

Большинство тегов META соврешенно ненужные. Если интересно, можно взглянуть на все существующие варианты . Самые важные теги (keywords и description) используются для оптимизации поисковых машин. При использовании атрибута content в теге META старайтесь не превышать размера в 200 символов. Большие описания и множество ключевых слов могут быть восприняты поисковыми машинами как спам.

9. Выносите CSS и JavaScript в отдельные файлы

Все это знают, но не всегда пользуются. Вот так выглядит вызов CSS из внешнего файла:

И соответственно JavaScript:

Любой внешний файл грузится всего один раз и затем сохраняется в локальном кэше. Ограничений на количество «подключаемых» внешних файлов не существует.

10. Ставьте / (слэш) в конце ссылок на каталоги

Необходимо писать так.

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

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег в заголовке страницы (пример 1).

Пример 1. Подключение таблицы связанных стилей

Стили Hello, world!

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

Достоинства данного способа

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

Можно изменять таблицу стилей без модификации веб-страниц.

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

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

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом (пример 2).

Пример 2. Использование таблицы глобальных стилей

Стили H1 { font-size: 120%; /* Размер шрифта */ font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */ color: #336; /* Цвет текста */ } Hello, world!

В данном примере показано изменение стиля заголовка . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

Стили Hello, world!

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

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

Пример 4. Сочетание разных методов подключения стилей

Стили H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } Hello, world! Hello, world!

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

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

Обычная загрузка CSS на сегодня …содержание…

CSS блокирует отрисовку, заставляя пользователя смотреть на белый экран до полной загрузки all-of-my-styles.css .

Обычно принято объединять весь CSS сайта в один-два ресурса, что значит, что пользователь скачивает много правил, которые не применяются к текущей странице. Это потому, что сайт включает в себя разные типы страниц со множеством «компонентов», а отдача CSS на уровне отдельных компонентов в HTTP/1 ухудшает быстродействие.

Это не проблема в случае SPDY и HTTP/2, где можно передавать много небольших ресурсов с минимальными издержками, и кешировать их независимо.

…содержание…

Это решает вопрос избыточности, но для этого вам нужно уже при выводе знать, что будет на странице, что может мешать потоковой отдаче. Кроме того, браузеру всё еще приходится загружать весь CSS до того, как он может что-либо отобразить. Медленная загрузка /site-footer.css задержит отрисовку всего .

Современный подход к загрузке CSS // https://github.com/filamentgroup/loadCSS !function(e){"use strict" var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all" return t?d=t:(r=(f.body||f.getElementsByTagName("head")).childNodes,d=r),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e() setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s} "undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this) /* Стили для «шапки» страницы, плюс: */ .main-article, .comments, .about-me, footer { display: none; } loadCSS("/the-rest-of-the-styles.css");

В этом коде мы заготовили немножко встроенных стилей, которые дают нам быструю начальную отрисовку и скрывают те элементы, для которых у нас еще нет стилей, а остальной CSS мы потом подгружаем асинхронно с помощью JavaScript. Этот остальной CSS переопределит display: none для.main-article и т.п..

Более приближенный к жизни пример - моя оффлайновая вики , где это сработало на ура:

На 3G первая отрисовка на 0,6 секунды быстрее. Полные результаты до и после .

Но есть и пара недостатков:

Нужна (небольшая) JavaScript-библиотека

К сожалению, это из-за реализации в WebKit. Как только добавляется на страницу, WebKit блокирует отрисовку до загрузки файла стилей, даже если его добавили скриптом.

В Firefox и IE/Edge, файлы стилей, добавленные скриптом, грузятся полностью асинхронно. Стабильная версия Chrome пока еще ведет себя как WebKit, но в Canary мы перешли на поведение Firefox/Edge.

Вы ограничены двумя фазами загрузки

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

«Скачущий» контент бесит пользователей почти наравне со всплывающей рекламой . Сжечь бы эту гадость.

Раз вы ограничены двумя фазами загрузки, вам приходится выбирать, что будет по-быстрому рисоваться сразу, а что будет «всем остальным». Конечно, вы захотите сразу отобразить содержимое первого экрана, но размер этого «первого экрана» у всех разный. Да, ёлки-палки, вам придется найти одно решение для всех размеров.

Способ проще и лучше … … … … …

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

Допустим, CSS для «шапки» сайта, статьи и «подвала» загрузился, а всё остальное только грузится, вот как тогда будет выглядеть страница:

• «Шапка»: отобразилась
• Статья: отобразилась
• Комментарии: не отобразились, CSS перед ними еще не загрузился (/comment.css)
• Раздел «обо мне»: не отобразился, CSS перед ним еще не загрузился (/comment.css)
• «Подвал»: не отобразился, CSS перед ним еще не загрузился (/comment.css), даже несмотря на то, что его собственный CSS уже загружен

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

Нужно быть внимательными при использовании систем раскладки, где она определяется содержимым (напр. таблиц и флексбоксов), чтобы избежать «скачков» контента по ходу загрузки. Это не новая проблема, но с постепенной отрисовкой натыкаться на нее придется чаще. Можно исправить поведение флексбоксов хаками, но CSS-гриды - гораздо лучшая система для раскладки всей страницы (флексбоксы при этом великолепны для небольших компонентов).

Изменения в Chrome

Нынешнее поведение Chrome/Safari обратно совместимо, они лишь блокируют отрисовку дольше, чем нужно. С поведением Firefox всё чуточку сложнее, но есть обходной путь…

Фикс для Фокса

Поскольку Firefox не всегда блокирует отрисовку в случае в , нужно немного повозиться с ним, чтобы избежать мелькания «голого» контента. К счастью, это очень легко, поскольку блокирует парсинг, но также дожидается загрузки стилей:

…

Чтобы это сработало, элемент должен не быть пустым, пробела в нем вполне достаточно.

Firefox и Edge с IE покажут вам чудесную постепенную отрисовку, тогда как Chrome и Safari будут показывать белый экран до полной загрузки всего CSS. Нынешнее поведение Chrome и Safari не хуже, чем при размещении всех стилей в , так что можно начать применять этот метод уже сейчас. В ближайшие месяцы Chrome перейдет на подход Edge, и быструю отрисовку увидит больше пользователей.

Так что вот вам гораздо более простой способ грузить только нужный CSS и заодно получить более быструю отрисовку. Пользуйтесь на здоровье!