How to Optimize Website for google PageSpeed Insights

[yestyle]

More people asked me how I optimized for Webmaster Sun to get high marks with google PageSpeed Insights.



First you need to view how many marks that our forum getting with Google page speed, link below:

http://developers.google.com/speed/pagespeed/insights/?url=www.webmastersun.com&tab=desktop

To do that, just follow my important tips to improve your website loading time

Any tools to optimize your website codes

1. Optimize your css files.
Using this online tool: http://www.csscompressor.com
For example, your css file has code:

#mysidebar {
background: #ccc;
float: right;
padding: 10px 5px 10px 5px;
width: 350px;
border:none;
}

After compress, It will show

#mysidebar{background: #ccc;float: right;padding: 10px 5px 10px 5px;width: 350px;border:none;}

Removing spaces, lines brake, excess charters , It can reduce 40 to 60% your css files.

2. Optimize your javascript files.

Using this tool: http://compressorrater.thruhere.net/
The same as css compress tool above, it will remove same spaces, definitions in Js file to reduce file size.

3. Optimize HTML & PHP

If you want to compress html or php code, this is useful to do that.
Tool: http://htmlcompressor.com/compressor/

4. Optimize images but still keep quality.

Using this tool: http://compressnow.com/
With raw pictures, you can reduce to 60 or 70% for each image.
Click multiple images to optimize more images at once time.

5. Using .Htaccess or enabling Gzip to optimize files before downloading.

You can choose one of two methods. If you want to use Gzip, contact your hosting provider to turn on it if it's turning off.

Or adding these codes into .htaccess file

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/x-js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula-template
</IfModule>

6. Increase caching time

# Enable expiration control
ExpiresActive On

# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"

# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
ExpiresByType application/smil "now plus 1 month"

# Audio files expiration: 1 month after request
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"

After adding this code, I sure that your website will run very fast, like a rocket D: , at this time, our forum www.webmastersun.com is getting 74/100 for desktop version, I will optimize other factors to increase this point higher.
This is just my experience to improve website loading speed, hope it's useful to all of you!

 

[hoangvu]

Applied your tips to my site, it's great when my site increased over 30 scores with google page speed. It really improved my website loading.