Embed Size (px)
Citation preview
СКОРОСТЬ ЗАГРУЗКИСТРАНИЦЫ
или
"РОЖЕННЫЙ ПОЛЗАТЬ - ЛЕТАТЬ НЕМОЖЕТ?..."
СЕЗОН 1СЕРИЯ "ЗАДАЧА"1
СЕРИЯ "ПРОБЛЕМА"2
все начиналось хорошо :)
Наша веб-страница
Веб-страницы стают все больше и больше (контент, CSS,JS, катринки, шрифты)
Количество юзеров, которые заходят с телефонов ипланшетов растет
0:12
СЕРИЯ "ЦЕЛЬ"3
< 1s 1-3s > 10s
Цель - 1 *опой на 2 стульяхувеличить скорость загрузкиНЕ обрезать фичи, НЕ обидеть фронт
СЕРИЯ "ЧЕМ ДАЛЬШЕ В ЛЕС, ..."4
диагноз неутешительный
GO лечить!
ладно, пошли в Google!
google PageSpeedрезультат.
кеш браузераExpires: Thu, 15 Apr 2010 20:00:00 GMT
Cache-Control: publicрезультат -1.5%
ок - пошли к админукеширующий сервер
дороговато...
реакция клиента
сократить CSSсократить JS
$cssFiles = array( "ads.css", "formatting.css", "pagesections.css", "print.css", "screen.css", "sidebar.css");
$buffer = "";foreach ($cssFiles as $cssFile) { $buffer .= file_get_contents($cssFile);}
// 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);
// 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);
0:06
СЕРИЯ "ВСКРЫВАЕМ ЧЕРНЫЙ ЯЩИК"5
{Critical Rendering Path
А как же картинки!Картинки НЕ блокируют построение DOM, НИ
отрисовку страницы
Кажеться, о чем-то забыли...JavaScript!
<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блокирует отрисовку
СЕРИЯ "РЕШЕНИЕ"6
Уменьшить кол-во байтов на выходе:1.минимизировать (убрать пробелы, комменты)ужать (gzip)кеш браузера
Минимизировать 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">
...
Минимизировать Parser Blocking JavaScript:3.
... <script src="app.js" async=""></script>
СЕРИЯ "HAPPY END" :)ФИНАЛ
наши заказчики
