Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PageSpeed Optimization


Published on

Make your web page load faster on all devices

Published in: Technology, Design
  • Be the first to comment

PageSpeed Optimization

  1. 1. PageSpeed Optimization Make your web pages load faster PageSpeed Optimization on all devices
  2. 2. If you care about performance then… Analyze your website:
  3. 3. Basic Rules to make your page load Faster • Optimizing Images • Using correct order of stylesheets, scripts, and inline JavaScript code • Leverage browser caching • Minify files • Enable Gzip
  4. 4. Optimizing Images
  5. 5. • Use text with CSS3 instead of images, if possible • Use web format of images like gif or png • Use photo editor to use EXACT image size required • Use the height and width attributes under the img tag (specify image dimensions) • DON'T scale images in HTML • Avoiding EMPTY image ‘src’
  6. 6. Using correct order • CSS files at the top under the head tag • JavaScript scripts at the bottom of the body tag • Use the table less design whenever possible
  7. 7. Leverage Browser Caching What does ‘Leverage’ means?
  8. 8. What does ‘Leverage Browser caching’ means? This rule triggers when PageSpeed Insights detects that the response from your server doesn’t include explicit caching headers or if the resources have a short freshness lifetime.
  9. 9. It simply means Setting an expiry date Reduce the load times of pages by storing commonly used files from your website on your visitors browser. It is suppose to be done in .htaccess file
  10. 10. How to do it?
  11. 11. Important When you are done save the file as it is i.e. .htaccess and not as a .txt file
  12. 12. Minify files • • • • Minify CSS Minify HTML Minify Javascript Avoid bad requests: Removing "broken links", or requests that result in 404/410 errors, avoids wasteful requests.
  13. 13. • And the last point is… Enable Gzip
  14. 14. gzip is a software application used for file compression and decompression. Effective way to save bandwidth and speed up your site
  15. 15. OR / if that does not work # compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
  16. 16. To get instant changes use
  17. 17. Its Over Thank you