pagespeed optimization

20
PageSpeed Optimization Make your web pages load faster on all devices PageSpeed Optimization

Upload: shweta-patel

Post on 20-Aug-2015

394 views

Category:

Technology


0 download

TRANSCRIPT

PageSpeed Optimization Make your web pages load faster on all devices

PageSpeed Optimization

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 JavaScript code •Leverage browser caching•Minify files•Enable Gzip

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 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’

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

Leverage Browser Caching

What does ‘Leverage’ means?

What does ‘Leverage Browser caching’ means?

This rule triggers when

PageSpeed Insightsdetects that the

response from your server doesn’t

include explicit caching

headers or if the resources

have a short freshness lifetime.

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

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 that result in 404/410 errors, avoids wasteful requests.

Enable Gzip

•And the last point is…

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

 Effective way to save bandwidth and speed up your site

OR / if that does not work# compress text, html, javascript, css, xml: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

To get instant changes use

http://www.gtmetrix.com/

Its OverThank you