Основы клиентской оптимизации

  • Published on
    16-Nov-2014

  • View
    1.371

  • Download
    0

Embed Size (px)

DESCRIPTION

Google PageSpeed.

Transcript

  • 1. Interlabs 20 2013 1 / 37

2. 80-90% , CSS, JavaScript ; Google PageSpeed; (, ) . 2 / 37 3. HTML, CSS, JavaScript 3 / 37 4. Google Chrome Developer Tools Firebug Google PageSpeed1 Curl : - . 1 https://developers.google.com/speed/pagespeed/ 4 / 37 5. reverse proxy nginx + - nginx - varnish + - 5 / 37 6. 7. Connection: keep-alive JavaScript , 7 / 37 8. JavaScript , javascript- js- CSS, , CSS CSS, JavaScript 8 / 37 9. JavaScript JavaScript inline- , . 9 / 37 10. JavaScript 1 10 / 37 11. JavaScript 2 11 / 37 12. 13. : HTML JavaScript CSS Accept-Encoding: gzip, deflate Content-Encoding: gzip gzip deate : gzip nginx mod_deate apache nginx; .htaccess Google Pagespeed Minimize payload size Enable compression. 13 / 37 14. : nginx gzip on; gzip disable "msie6"; gzip min_length 1100; gzip_buffers 64 8k; gzip_vary on; gzip_proxied any; gzip_types text/plain application/xml text/css text/js text/xml application/x-javascript text/javascript application/json application/xml+rss; , gzip_buffers. 14 / 37 15. : apache AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript ... BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html Header append Vary User-Agent env=!dont-vary 15 / 37 16. : Google PageSpeed : $ curl -I --compressed http://site.com/css/site.css ... Content-Type: text/css Vary: Accept-Encoding Content-Encoding: gzip ... 16 / 37 17. 18. , GIF (10x10, 3 ), PNG GIF, indexed vs RGB - JPG - Google Pagespeed Minimize paylod size Optimize images 18 / 37 19. : GIF gifsicle2 , : $ gifsicle -b -O2 image.gif $ gifsicle -b -O2 *.gif 2 http://www.lcdf.org/gifsicle/ 19 / 37 20. : PNG optipng3 . . $ optipng -o5 file.png for f in *.png; do optipng -o5 -quiet -keep -preserve -dir optimized -log optipng.log "$f" done 3 http://optipng.sourceforge.net/ 20 / 37 21. : JPG jpegoptim4 . : , sRGB! EXIF- IPTC- Save for web , . . $ jpegoptim --strip-all image.jpg 4 http://freecode.com/projects/jpegoptim 21 / 37 22. 23. . : 256 (PNG8) , - , 23 23 / 37 24. CSS CSS CSS ( , ..) CSS ( , ..) CSS- + Google Pagespeed Minimize paylod size Minify CSS 24 / 37 25. CSS: less lessc -x lessc yui-compress , @import css- less less CSS_SRC ?= src/less CSS_WWW ?= www/css $(CSS_WWW)/site.css:$(addsuffix .less,$(addprefix $(CSS_SRC)/,null style cusel)) cat $^ | lessc -x - $@ , CSS-. 25 / 37 26. JavaScript Require.js + r.js Google Pagespeed Minimize paylod size Minify JavaScript 26 / 37 27. , . uglifyjs UTF8: $(JS_WWW)/main.js:$(addsuffix .js,$(addprefix $(JS_WWW)/,jquery fancybox script) uglifyjs $^ > $@ () CP1251: , iconv, uglifyjs, iconv. 27 / 37 28. 29. HTTP Expires Cache-Control: max-age , , , . GET-, (strong cache headers). Last-Modified ETag , , (weak cache headers). . Google Pagespeed Caching Leverage browsing caching 29 / 37 30. Expires, Cache-Control: max-age Google PageTest Expires URL-ngerprinting, 8 Last-Modified .htaccess: ExpiresActive on ExpiresByType image/gif A604800 ExpiresByType text/javascript A604800 ... Header unset Cache-Control 30 / 37 31. Last-Modied, ETag Last-Modified ETag ETag , , (+ strong weak ) apache nginx , 31 / 37 32. : masterhost nginx apache. , nginx , : .htaccess nginx , apache 32 / 37 33. - Cache-Control: public , - GET- URL-ngerprinting , (Cache-Control: private) CSS JS Cache-Control: private Vary: Accept-Encoding Google Pagespeed Caching Leverage proxy caching 33 / 37 34. 35. Above the fold content . above-the-fold : Eliminate render-blocking JavaScript and CSS in above-the-fold content 35 / 37 36. C , , . HTML , ; , ; CSS inline-. , , . Google Pagespeed Reduce the size of above-the-fold content 36 / 37 37. High Performance Web Sites5 Even Faster Web Sites6 PageSpeed Insights Rules7 Google PageSpeed PageSpeed Tutorials8 Google 5 http://shop.oreilly.com/product/9780596529307.do 6 http://shop.oreilly.com/product/9780596522315.do 7 https://developers.google.com/speed/docs/insights/rules 8 https://developers.google.com/speed/articles/ 37 / 37