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

Иван Акулов, 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

US‹BSBSјVPVNULVTNULMђ1OГ0DLE…gђшSIЖ3ЖDC2VT ЕYNUL‰
SOHEOTCETBFг\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%
Ответ на StackOverflow, статья CSS-Tricks

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
@iamakulov_
iamakulov.com
Слайды: iamakulov.com/talks/web-perf