Зі зростанням швидкості інтернет з'єднання та збільшення потужності не тільки десктопних, а й мобільних пристроїввеб-сторінки стають більш "важкими". Кількість і розмір файлів, що підключаються зростає: 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) .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); )); "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.2 em; 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) використовуються для оптимізації пошукових машин. У разі використання атрибуту вмісту в тезі 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і заразом отримати більш швидке відмальовування. Використовуйте на здоров'я!