Make your site faster "Hangout slidedeck" Episode 4 Compress, Combine, Minify

12
How To Make Your Website Faster Episode 4) Compress, Combine and Minify Replace with new graphics

description

Make your site faster "Hangout slidedeck" Episode 4 Compress, Combine, Minify presented on Sept 5 2014. https://plus.google.com/events/cp6sgnoijuebd55t8ae1umj13s8

Transcript of Make your site faster "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Page 1: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

How To Make Your Website Faster

Episode 4) Compress, Combine and Minify

Replace with new

graphics

Page 2: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Compress (Content-Encoding: gzip)

No consJust turn it onWebserver level - not app

Next slides are how-to● cPanel● Plesk

● Managed Wordpress

● Manual

Page 3: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

cPanel compression

Page 4: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Managed WordPress Compression

Page 5: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Plesk compression

o Just in case:

<urlCompression doStaticCompression="true" doDynamicCompression="true"/>

must go inside <system.webServer> ... </system.webServer>in your /httpdocs/web.config file

Page 6: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Generic: Apache

To turn on text compressionAdd the following to your .htaccess file:

<ifModule mod_gzip.c>mod_gzip_on Yesmod_gzip_dechunk Yesmod_gzip_item_include file .(html?|txt|css|js|php|pl)$mod_gzip_item_include handler ^cgi-script$mod_gzip_item_include mime ^text/.*mod_gzip_item_include mime ^application/x-javascript.*mod_gzip_item_exclude mime ^image/.*mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule>

Page 7: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Generic: Apache

If that doesn’t work … try these:

AddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/x-javascript

Page 8: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Generic: NGINX

Add the following to your config file:

gzip on;gzip_comp_level 2;gzip_http_version 1.0;gzip_proxied any;gzip_min_length 1100;gzip_buffers 16 8k;gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problemsgzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6gzip_vary on;

Page 9: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Generic: IISIIS6

IIS7

See also: http://technet.microsoft.com/en-us/library/cc782942.aspx (IIS6) and http://technet.microsoft.com/en-us/library/cc753681.aspx (IIS7)

Page 10: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Combine/minify w/ WP-Minify-Fixedhttp://wordpress.org/plugins/wp-minify-fixed/

270KB reduced to 90KBAnd fewer round trips == faster web page

Page 11: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Demo

Athletesbrand.com

WPT results for hostingperformance.guru

Page 12: Make your site faster   "Hangout slidedeck" Episode 4 Compress, Combine, Minify

Combine/Minify Manuallyhttps://code.google.com/p/minify/

Is part of ● WordPress: WP-Minify

● WordPress: W3 Total Cache

● Zend Framework: View helpers for links/scripts

● Yii: minscript Extension

Use online tools to minify JS and CSS

Always use the .min.js and .min.css versions