скорость загрузки
TRANSCRIPT
![Page 1: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/1.jpg)
СКОРОСТЬ ЗАГРУЗКИСТРАНИЦЫ
или
"РОЖЕННЫЙ ПОЛЗАТЬ - ЛЕТАТЬ НЕМОЖЕТ?..."
![Page 2: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/2.jpg)
СЕЗОН 1СЕРИЯ "ЗАДАЧА"1
![Page 3: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/3.jpg)
СЕРИЯ "ПРОБЛЕМА"2
![Page 4: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/4.jpg)
все начиналось хорошо :)
![Page 5: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/5.jpg)
Наша веб-страница
Веб-страницы стают все больше и больше (контент, CSS,JS, катринки, шрифты)
Количество юзеров, которые заходят с телефонов ипланшетов растет
![Page 6: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/6.jpg)
0:12
![Page 7: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/7.jpg)
СЕРИЯ "ЦЕЛЬ"3
![Page 8: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/8.jpg)
< 1s 1-3s > 10s
![Page 9: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/9.jpg)
Цель - 1 *опой на 2 стульяхувеличить скорость загрузкиНЕ обрезать фичи, НЕ обидеть фронт
![Page 10: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/10.jpg)
СЕРИЯ "ЧЕМ ДАЛЬШЕ В ЛЕС, ..."4
![Page 11: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/11.jpg)
диагноз неутешительный
GO лечить!
![Page 12: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/12.jpg)
ладно, пошли в Google!
![Page 13: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/13.jpg)
google PageSpeedрезультат.
![Page 14: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/14.jpg)
кеш браузераExpires: Thu, 15 Apr 2010 20:00:00 GMT
Cache-Control: publicрезультат -1.5%
![Page 15: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/15.jpg)
ок - пошли к админукеширующий сервер
дороговато...
реакция клиента
![Page 16: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/16.jpg)
сократить CSSсократить JS
![Page 17: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/17.jpg)
$cssFiles = array( "ads.css", "formatting.css", "pagesections.css", "print.css", "screen.css", "sidebar.css");
$buffer = "";foreach ($cssFiles as $cssFile) { $buffer .= file_get_contents($cssFile);}
![Page 18: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/18.jpg)
// Remove comments$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Remove space after colons$buffer = str_replace(': ', ':', $buffer);
// Remove whitespace$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
![Page 19: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/19.jpg)
// Enable GZip encoding.ob_start("ob_gzhandler");
// Enable cachingheader('Cache‐Control: public');
// Expire in one dayheader('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
// Set the correct MIME type, because Apache won't set it for usheader("Content‐type: text/css");
// Write everything outecho($buffer);
![Page 20: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/20.jpg)
0:06
![Page 21: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/21.jpg)
СЕРИЯ "ВСКРЫВАЕМ ЧЕРНЫЙ ЯЩИК"5
![Page 22: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/22.jpg)
{Critical Rendering Path
![Page 23: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/23.jpg)
![Page 24: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/24.jpg)
![Page 25: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/25.jpg)
А как же картинки!Картинки НЕ блокируют построение DOM, НИ
отрисовку страницы
![Page 26: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/26.jpg)
Кажеться, о чем-то забыли...JavaScript!
![Page 27: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/27.jpg)
<p> Hello <span>there</span>, SitePoint! <script>
</script>How are you? <img src="photo.jpg"></p>
document.write('How are you?'); var color = elem.style.color; elem.style.color = 'red';
JavaScript - может менять дерево DOM => JavaScriptблокирует отрисовку
![Page 28: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/28.jpg)
СЕРИЯ "РЕШЕНИЕ"6
![Page 29: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/29.jpg)
Уменьшить кол-во байтов на выходе:1.минимизировать (убрать пробелы, комменты)ужать (gzip)кеш браузера
![Page 30: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/30.jpg)
Минимизировать CSS Render Blocking:2.поместить link в head
<!‐‐</head>‐‐><!‐‐?php flush(); ?‐‐><!‐‐<body>‐‐>
<title>Sample Site</title> <link href="style.css" rel="stylesheet"> <link href="print.css" rel="stylesheet" media="print"> <link href="landscape.css" rel="stylesheet" media="orientation:landscape">
...
![Page 31: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/31.jpg)
Минимизировать Parser Blocking JavaScript:3.
... <script src="app.js" async=""></script>
![Page 32: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/32.jpg)
СЕРИЯ "HAPPY END" :)ФИНАЛ
![Page 33: скорость загрузки](https://reader033.vdocuments.site/reader033/viewer/2022052509/55a78d8f1a28ab266e8b4906/html5/thumbnails/33.jpg)
наши заказчики