Повышаем скорость загрузки сайта

Иван Акулов, EPAM

Повышаем скорость загрузки сайта

Иван Акулов, EPAM

Произво­дительность — это просто

Загрузка

<em>Hello</em>
Some more text
<img src="mars.jpg">

Парсинг

<em>Hello</em>
Some more text
<img src="mars.jpg">
                start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
            

Парсинг

<em>Hello</em>
Some more text
<img src="mars.jpg">
                start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
            

Парсинг

                start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
            
                <em>
  "hello"
            

Парсинг

                start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
            
                <html>
  <head>
  <body>
    <em>
      "Hello"
    "Some more text"  
    <img src="mars.jpg">
            

Рендеринг

                <html>
  <head>
  <body>
    <em>
      "Hello"
    "Some more text"  
    <img src="mars.jpg">
            
Hello Some more text

<script> и <style>

«Стили сверху, скрипты внизу»

Проблемы

Проблемы

<em>Hello</em>
<script>…</script>
Some more text
<img src="mars.jpg">

Проблемы

<em>Hello</em>
<script>document.write('<em>')</script>
Some more text
<img src="mars.jpg">

Проблемы

Проблемы

The New York Times с CSS
The New York Times без CSS

Проблемы

Проблемы

Правила

  1. Стили сверху, скрипты внизу

Картинки

Картинки

Картинки

Картинки

Картинки

Картинки

100%
2,48 Мбайт
70%
1,07 Мбайт
50%
0,76 Мбайт

Картинки

2560 × 1440
1280 × 720
2560 × 1440  ·  2,17 Мбайт
1280 × 720  ·  0,64 Мбайт

Картинки

Минификация

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

[2, 5, 9].forEach(logArrayElements);

Минификация

function f(q,w,e){console.log('a['+w+']='+q);}[2,5,9].forEach(f);

Минификация

<!DOCTYPE html><html><body><p>Look at me, I’m an HTML coder!</p>

Минификация

.block{border:1px solid #ccc;padding:20px;border-radius:12px}
20…40%
5 секунд

3 секунды

Минификация

Gzip

<!DOCTYPE html>
<html>
<head>
<title>Повышаем скорость загрузки</title>
<link rel="stylesheet" href="index.css">
</head>
</html>

Gzip

USBSBSјVPVNULVTNULMђ1OГ0DLE…gђшSIЖ3ЖDC2VT ЕYNULSOHEOTCETBFг\j«ЋDC3мKETXї’їDLEЃPЎBQУ.H0а6HtєУ»пЭ“^І~s6є»Ѕ —Јл«to7СXXbҐESCVTкkєQ@fqо$hРBъЬЅ|µoџ¤џw‹®_юђYыєXНжп¤o?–mВBELnн(NUL%QZъNUL(hЌ9;ЎяBEL'VTDLEtj ©JЏ”ЁТ!ёBS6&C-ЋOЏSOHGSАі ¤•чSYN„+·мSUB±bрP›© Џ¬–L•E%СDpл—SOHSOHЩCANACK
70…80%

Gzip + минификация

80…85%

Gzip

Настраивается на сервере

Правила

  1. Стили сверху, скрипты внизу
  2. Сжатие (картинки · минификация · gzip)
12 → 5,6
Ядро Content Улучшения Enhancements Остаток Leftovers

Что входит

Разбивайте страничку

…и загружайте по частям

DOMContentLoaded

load

                start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
            
                <html>
  <head>
  <body>
    <em>
      "Hello"
    "Some more text"  
    <img src="mars.jpg">
            

…и загружайте по частям

  1. Загружаем ядро
  2. DOMContentLoaded → загружаем улучшения
  3. load → загружаем остаток

…и загружайте по частям

<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content <script>...</script>
</body>

…и загружайте по частям

<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content <script>...</script>
</body>

…и загружайте по частям

<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content <script>...</script>
</body>

…и загружайте по частям

<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content <script>...</script>
</body>

…и загружайте по частям

// Улучшения: JavaScript, полный CSS, шрифты
$(document).on('DOMContentLoaded', function () {
$(document.head).append('<link rel="stylesheet" href="...">');
$(document.body).append('<script src="..."></script>'); ...
});

…и загружайте по частям

// Остаток: аналитика, реклама
$(window).on('load', function () {
$(document.body).append('<script src="..."></script>'); ...
});

…и загружайте по частям

Пример

Правила

  1. Стили сверху, скрипты внизу
  2. Сжатие (картинки · минификация · gzip)
  3. Сначала главное, потом второстепенное
    (Ядро → Улучшения → Остаток)

Когда остановиться

Оптимизируйте!

Иван Акулов, EPAM