А почему так медленно? Что не так? Чек-лист типовых проблем с загрузкой и отрисовкой. Миллисекунды = Деньги! Инструменты для проверки оптимальности загрузки веб-страниц. Сжатие всего и вся, рекомендации по подключению css и js, клиентские и серверные кэши и их виды, оптимизация картинок, svg и webP, lazy loading, шрифты, dns-lookup, cdn, gzip и многое другое. Особенности восприятия скорости зaгрузки для мобильных браузеров. А как сделать быстро? Общие советы и немного магии с google pagespeed для nginx и apache.

1. Жесточайшая
Оптимизация скорости
загрузки веб-страниц
Дима Дудин @nedudi

5. Зачем ?
… неужели это так важно

6. 1секунда?

10. 1 секунда в WEB
11% - потеря количества
просмотров.
16% - потеря удовлетворенности
клиентов.
7% - потеря конверсии.

11. Конверсия магазинов
увеличивается на
74%
при уменьшении
времени загрузки
с 8 до 2 секунд

16. Деньги - не главное

17. Деньги - не главное

18. ГЛАВНОЕ, что-бы все было
четко

19. ГЛАВНОЕ, что-бы все было
четко

20. прочувствуйте боль…

21. прочувствуйте боль…

22. Как понять ?
… анализы, анализы

23. Pingdom

24. Pingdom

25. YSLOW

26. WEBPAGETEST

27. pagespeed

28. pagespeed

29. pagespeed

30. Типовые проблемы
… тяжко жить веб-разработчику

31. РАЗМЕР
ИЗОБРАЖЕНИЙ

32. авто
Сжималки
разрезалки
спрайты и тп…

33. grunt-svgmin
gulp-svgmin
grunt-spritesmith
gulp-sprite
grunt-webp
gulp-webp
grunticon
addyosmani.com/blog/image-optimization-tools
и еще тут
frontender.info/performance-optimization

34. <Picture>

37. vimeo.com/108326836
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>
scottjehl.github.io/picturefill

38. И еще …
<img src=“hi.png"
height="100" width="100"
/>

39. ФОРМАТЫ
ИЗОБРАЖЕНИЙ

40. JPEG

41. PNG

42. SVG

44. Lazy
loading…

47. GZIP

50. Cachehtml5.by/blog/cache

51. CACHE отключен

52. 1. Last-Modified

53. 2. ETag

54. 3. EXPIRES

55. <IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>

56. server {
...
location ~* .(gif|ico|jpe?g|png)(?[0-9]+)?$ {
expires 1w;
}
location ~* .(css|js)$ {
expires 1d;
}
...
}

57. 4. MAX AGE

58. <ifModule mod_headers.c>
<FilesMatch ".(gif|ico)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch ".(js)$">
Header set Cache-Control "max-age=86400,
private, must-revalidate"
</FilesMatch>
<FilesMatch ".(php)$">
Header set Cache-Control "private, no-store, no-cache,
must-revalidate, no-transform, max-age=0"
Header set Pragma "no-cache"
</FilesMatch>
</ifModule>

59. server {
...
location ~* .(?:ico|css|js|gif|jpe?g|png)$ {
add_header Cache-Control "max-age=86400, public";
}
...
}

60. обфускация
js сss html

61. Сборка
js сss

62. JavaScript
в конец документа

63. CSS
в начало документа
?

64. CDN

65. :( :)

68. DNS
Lookup time

70. feedthebot.com/tools/requests

71. feedthebot.com/tools/requests
WTF?

72. <link rel="dns-prefetch" href="//trololo.com">

73. Enable
Keep-AlivE

76. избегаем
javascript
редиректов

79. 2013 GRUNT

80. 2013 GRUNT
2014 GULP

81. 2013 GRUNT
2014 GULP
…2015 GROLOLO

82. 2013 GRUNT
2014 GULP
…2015 GROLOLO

83. 2013 GRUNT
2014 GULP
…2015 GROLOLO

84. 2013 GRUNT
2014 GULP
…2015 GROLOLO

85. 2013 GRUNT
2014 GULP
…2015 GROLOLO

86. 2013 GRUNT
2014 GULP
…2015 GROLOLO

87. 2005-2012

88. 2005-2012

89. +
2005-2012

90. +
2005-2012
?

91. +
2005-2012
?=

92. +
2005-2012
?=

93. +
2005-2012
?=

94. хочу
все
и
сразу

95. хочу
все
и
сразу

96. pagespeed

97. pagespeed

99. developers.google.com/speed/pagespeed/module/filters

100. Build from source :( Package :)

101. Build from source :( Package :)

102. Apache
ModPagespeedEnableFilters collapse_whitespace
Nginx
pagespeed EnableFilters collapse_whitespace;
Collapse Whitespace

103. Apache
ModPagespeedEnableFilters insert_dns_prefetch
Nginx
pagespeed EnableFilters insert_dns_prefetch;
Pre-Resolve DNS

104. Apache
ModPagespeedEnableFilters combine_css
Nginx
pagespeed EnableFilters combine_css;
combine css

106. Apache
ModPagespeedEnableFilters rewrite_css
Nginx
pagespeed EnableFilters rewrite_css;
Minify CSS

107. Apache
ModPagespeedEnableFilters move_css_to_head
Nginx
pagespeed EnableFilters move_css_to_head;
Move CSS to Head

108. Apache
ModPagespeedEnableFilters prioritize_critical_css
Nginx
pagespeed EnableFilters prioritize_critical_css;
Prioritize Critical CSS

109. Apache
ModPagespeedEnableFilters combine_javascript
Nginx
pagespeed EnableFilters combine_javascript;
combine js

110. Apache
ModPagespeedEnableFilters rewrite_javascript
Nginx
pagespeed EnableFilters rewrite_javascript;
Minify Js

111. Apache
ModPagespeedEnableFilters canonicalize_javascript_libraries
Nginx
pagespeed EnableFilters
canonicalize_javascript_libraries;
Canonicalize JavaScript Libraries

112. Apache
ModPagespeedEnableFilters
include_js_source_maps
Nginx
pagespeed EnableFilters
include_js_source_maps;
Include JavaScript Source Maps

113. Apache
ModPagespeedEnableFilters
move_css_above_scripts
Nginx
pagespeed EnableFilters
move_css_above_scripts;
Move CSS Above Scripts

114. Apache
ModPagespeedEnableFilters defer_javascript
Nginx
pagespeed EnableFilters defer_javascript;
Defer JavaScript

115. Apache
ModPagespeedEnableFilters dedup_inlined_images
Nginx
pagespeed EnableFilters dedup_inlined_images;
Deduplicate Inlined Images

116. Apache
ModPagespeedEnableFilters elide_attributes
Nginx
pagespeed EnableFilters elide_attributes;
Elide Attributes

118. Apache
ModPagespeedEnableFilters extend_cache
Nginx
pagespeed EnableFilters extend_cache;
Extend Cache

119. Apache
ModPagespeedEnableFilters flatten_css_imports
Nginx
pagespeed EnableFilters flatten_css_imports;
Flatten CSS Imports

120. Apache
ModPagespeedEnableFilters lazyload_images
Nginx
pagespeed EnableFilters lazyload_images;
Lazyload Images

121. Apache
ModPagespeedEnableFilters sprite_images
Nginx
pagespeed EnableFilters sprite_images;
Sprite Images

122. Apache
ModPagespeedEnableFilters rewrite_images
Nginx
pagespeed EnableFilters rewrite_images;
Optimize Images
inline_images +
inline_preview_images +
recompress_images +
convert_jpeg_to_webp +
resize_images

123. <img src=“data:image/png;base64,iVBORw…”>
<img src=“girl.png”>
…

124. Apache
ModPagespeedEnableFilters local_storage_cache
Nginx
pagespeed EnableFilters local_storage_cache;
Local Storage Cache

125. ЭКСПЕРИМЕНТИРУЙТЕ

126. ЭКСПЕРИМЕНТИРУЙТЕ

127. НИКОМУ НЕ ВЕРЬТЕ

128. НИКОМУ НЕ ВЕРЬТЕ

129. @nedudi @html5by
Вопросы ? nedudi@gmail.com
html5.by
vk.com/html5by
facebook.com/html5by
twitter.com/html5by