скорость загрузки

СКОРОСТЬ ЗАГРУЗКИ
СТРАНИЦЫ
или
"РОЖЕННЫЙ ПОЛЗАТЬ - ЛЕТАТЬ НЕ
МОЖЕТ?..."

СЕЗОН 1
СЕРИЯ 1 "ЗАДАЧА"

СЕРИЯ 2 "ПРОБЛЕМА"

все начиналось хорошо :)

Наша веб-страница
Веб-страницы стают все больше и больше (контент, CSS,
JS, катринки, шрифты)
Количество юзеров, которые заходят с телефонов и
планшетов растет

Цель - 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("rn", "r", "n", "t", ' ', ' ', ' '), '', $buffer);

// Enable GZip encoding.
ob_start("ob_gzhandler");
// Enable caching
header('Cache‐Control: public');
// Expire in one day
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
// Set the correct MIME type, because Apache won't set it for us
header("Content‐type: text/css");
// Write everything out
echo($buffer);

СЕРИЯ "ВСКРЫВАЕМ 5 ЧЕРНЫЙ ЯЩИК"

А как же картинки!
Картинки НЕ блокируют построение 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
блокирует отрисовку

Уменьшить кол-1. во байтов на выходе:
минимизировать (убрать пробелы, комменты)
ужать (gzip)
кеш браузера

Минимизировать CSS 2. Render Blocking:
поместить 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 3. JavaScript:
...
<script src="app.js" async=""></script>

СЕРИЯ ФИНАЛ "HAPPY END" :)

скорость загрузки

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to скорость загрузки

Similar to скорость загрузки (20)

скорость загрузки