Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
1 like1,755 views
Документ обсуждает важность оптимизации скорости загрузки веб-страниц, указывая на значительное влияние каждого дополнительного времени на конверсии и удовлетворенность клиентов. Приведены рекомендации по различным методам ускорения загрузки, включая сжатие изображений и использование кэша. Также упоминаются инструменты и технологии, такие как Grunt и Gulp, для автоматизации процессов оптимизации.
![server {
...
location ~* .(gif|ico|jpe?g|png)(?[0-9]+)?$ {
expires 1w;
}
location ~* .(css|js)$ {
expires 1d;
}
...
}](https://image.slidesharecdn.com/pagespeed-150331050245-conversion-gate01/85/Google-pagespeed-56-320.jpg)
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
- 1. Жесточайшая Оптимизация скорости загрузки веб-страниц Дима Дудин @nedudi
- 5. Зачем ? … неужели это так важно
- 6. 1секунда?
- 10. 1 секунда в WEB 11% - потеря количества просмотров. 16% - потеря удовлетворенности клиентов. 7% - потеря конверсии.
- 11. Конверсия магазинов увеличивается на 74% при уменьшении времени загрузки с 8 до 2 секунд
- 16. Деньги - не главное
- 17. Деньги - не главное
- 18. ГЛАВНОЕ, что-бы все было четко
- 19. ГЛАВНОЕ, что-бы все было четко
- 22. Как понять ? … анализы, анализы
- 23. Pingdom
- 24. Pingdom
- 25. YSLOW
- 26. WEBPAGETEST
- 27. pagespeed
- 28. pagespeed
- 29. pagespeed
- 30. Типовые проблемы … тяжко жить веб-разработчику
- 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" />
- 40. JPEG
- 41. PNG
- 42. SVG
- 44. Lazy loading…
- 47. GZIP
- 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"; } ... }
- 61. Сборка js сss
- 64. CDN
- 65. :( :)
- 68. DNS Lookup time
- 79. 2013 GRUNT
- 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
- 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
- 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