PageSpeed Optimization
Make your web pages load faster
PageSpeed Optimization on all devices
If you care about performance then…
Analyze your website:
http://developers.google.com/speed/pagespeed/insights/
Basic Rules to make your page load Faster

• Optimizing Images
• Using correct order of stylesheets, scripts, and
inline J...
Optimizing Images
• Use text with CSS3 instead of images, if
possible

• Use web format of images like gif or png
• Use photo editor to use ...
Using correct order
• CSS files at the top under the head tag
• JavaScript scripts at the bottom of the body tag
• Use the...
Leverage Browser Caching
What does ‘Leverage’ means?
What does ‘Leverage Browser caching’ means?

This rule triggers when
PageSpeed Insights
detects that the
response from you...
It simply means

Setting an expiry date
Reduce the load times of pages by storing
commonly used files from your website on...
How to do it?
Important
When you are done save the file as it is i.e.
.htaccess

and not as a
.txt file
Minify files
•
•
•
•

Minify CSS
Minify HTML
Minify Javascript
Avoid bad requests: Removing "broken links", or
requests th...
• And the last point is…

Enable Gzip
gzip is a software application used for file
compression and decompression.

Effective way to
save bandwidth and
speed up ...
OR / if that does not work
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutput...
To get instant changes use

http://www.gtmetrix.com/
Its Over
Thank you
PageSpeed Optimization
PageSpeed Optimization
PageSpeed Optimization
Upcoming SlideShare
Loading in …5
×

PageSpeed Optimization

554 views
461 views

Published on

Make your web page load faster on all devices

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
554
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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: http://developers.google.com/speed/pagespeed/insights/
  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 http://www.gtmetrix.com/
  17. 17. Its Over Thank you

×