web performance tips

web-performance.html

Web Performance:

1: Turn on http compression: GZipping:
 
☐ test here
http://gzipwtf.com/

 ☐ copy below lines to htaccess in your root folder (get latest from here https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess)

 # ----------------------------------------------------------------------
# Gzip compression
# ----------------------------------------------------------------------

<IfModule mod_deflate.c>

  # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    </IfModule>
  </IfModule>

  # Compress all output labeled with one of the following MIME-types
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE application/atom+xml \
                                  application/javascript \
                                  application/json \
                                  application/rss+xml \
                                  application/vnd.ms-fontobject \
                                  application/x-font-ttf \
                                  application/xhtml+xml \
                                  application/xml \
                                  font/opentype \
                                  image/svg+xml \
                                  image/x-icon \
                                  text/css \
                                  text/html \
                                  text/plain \
                                  text/x-component \
                                  text/xml
  </IfModule>

</IfModule>

2 Cache Stuff:

Client Side Caching:

 ☐ add below line to .htaccess (get it from https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess)

 # ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
  ExpiresByType text/html "access plus 0 seconds"

# Data
  ExpiresByType text/xml "access plus 0 seconds"
  ExpiresByType application/xml "access plus 0 seconds"
  ExpiresByType application/json "access plus 0 seconds"

# Feed
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

# HTC files (css3pie)
  ExpiresByType text/x-component "access plus 1 month"

# Webfonts
  ExpiresByType application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

</IfModule>

 ☐ in case file modified we can push new file to client in two ways...

 one way is .. style.css?v=123 (manually)

 ther way is http://derek.io/blog/2009/auto-versioning-javascript-and-css-files/

server side caching:
 
 wordpress plugin:

 http://wordpress.org/extend/plugins/w3-total-cache/ 

3: Lossless image compression:

1: http://pnggauntlet.com/ (windows)
   codekit (MAC)
   http://www.smushit.com/ysmush.it/ (online tool)

4: Combine CSS and JS:

very simple you know better

5: Remove unused assets
remove unused css:
	https://github.com/addyosmani/grunt-uncss
	https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

6:  Use the correct image format
	use JPG for photographs
	use gif for animated image
	use PNG for everything else

7: Consider lazyloading — or on-demand content
it can potentially have a negative impact on usability or SEO. However, it is useful for some types of web applications–for example image galleries.

8: Replace JavaScript with CSS3 effects and animations
 $("#x").fade() and $("#y").slideDown() ... all should be replaced with CSS3 animations, transitions and transformations

9: Consider Scalable Vector Graphics (SVGs)
- want to consider it for logos, diagrams, and charts
- big no for Photographs and complex images  

10: Replace images with icon fonts
- http://www.flaticon.com/
- http://fontello.com/