Website loading speed can make a big impact the success of a website. In Google standards if your pages are loading slowly, you will lose the organic search traffic. Google is offering a powerful tool called PageSpeed Insights, that can test your website page speed and suggest you the instructions. Competitors hate each other, Google hates Facebook widgets such as Like Box, Facebook Page etc. This post will explain you how to solve all these PageSpeed Insights problems.
Live Demo Blogger Live Demo
Facebook Widget Error
Google hates Facebook widgets, mostly you will get enable compression errors.
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
Enable compression for the following resources to reduce their transfer size by 398.3KiB (70% reduction).
Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yD/r/HGn8hBI3kT0.js could save 231KiB (72% reduction).
Compressing http://connect.facebook.net/en_US/all.js could save 120.7KiB (69% reduction).
Compressing http://staticxx.facebook.com/connect/xd_arbiter.php?version=42 could save 21.5KiB (65% reduction).
Compressing https://staticxx.facebook.com/connect/xd_arbiter.php?version=42 could save 21.5KiB (65% reduction).
Enable compression for the following resources to reduce their transfer size by 398.3KiB (70% reduction).
Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yD/r/HGn8hBI3kT0.js could save 231KiB (72% reduction).
Compressing http://connect.facebook.net/en_US/all.js could save 120.7KiB (69% reduction).
Compressing http://staticxx.facebook.com/connect/xd_arbiter.php?version=42 could save 21.5KiB (65% reduction).
Compressing https://staticxx.facebook.com/connect/xd_arbiter.php?version=42 could save 21.5KiB (65% reduction).
Facebook Fix for Websites
If you are using Facebook widgets, load the IFRAME after 8 seconds using JavaScript setTimeout() function.
<script type='text/javascript'>
setTimeout(function(){
var postURL='http://YourWebsite.com/url.html';
document.getElementById('facebookLikeBox').innerHTML="<iframe allowTransparency='true' class='facebooklike' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href='"+postURL+"'&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light'></iframe>";
}, 8000);
</script>
//HTML Code
<div id="facebookLikeBox"></div>
setTimeout(function(){
var postURL='http://YourWebsite.com/url.html';
document.getElementById('facebookLikeBox').innerHTML="<iframe allowTransparency='true' class='facebooklike' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href='"+postURL+"'&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light'></iframe>";
}, 8000);
</script>
//HTML Code
<div id="facebookLikeBox"></div>
Facebook Fix for Blogger
Use following code after the <data:post.body/> tag.
<script type='text/javascript'>
setTimeout(function(){
document.getElementById('facebookLikeBox').innerHTML="<iframe allowTransparency='true' class='facebooklike' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=data:post.url&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light'></iframe>";
}, 8000);
</script>
//HTML Code
<div id="facebookLikeBox"></div>
setTimeout(function(){
document.getElementById('facebookLikeBox').innerHTML="<iframe allowTransparency='true' class='facebooklike' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=data:post.url&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light'></iframe>";
}, 8000);
</script>
//HTML Code
<div id="facebookLikeBox"></div>
Google Adsense
Use always asynchronous advertisement script
Leverage Browser Caching for Blogger
You have to include these tags within the tag HEAD of the page
<include expiration='7d' path='/assets/**.css'></include>
<include expiration='7d' path='/assets/**.js'></include>
<include expiration='7d' path='/assets/**.gif'></include>
<include expiration='7d' path='/assets/**.jpeg'></include>
<include expiration='7d' path='/assets/**.jpg'></include>
<include expiration='7d' path='/assets/**.png'></include>
<include expiration='7d' path='/assets/**.js'></include>
<include expiration='7d' path='/assets/**.gif'></include>
<include expiration='7d' path='/assets/**.jpeg'></include>
<include expiration='7d' path='/assets/**.jpg'></include>
<include expiration='7d' path='/assets/**.png'></include>
Leverage Browser Caching for Website
Include the code in website root .htaccess file
<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 (thx 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"
# rss feed
ExpiresByType application/rss+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/jpg "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 font/truetype "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 2 months"
ExpiresByType application/javascript "access plus 2 months"
ExpiresByType text/javascript "access plus 2 months"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
# BEGIN W3TC Browser Cache
<IfModule mod_deflate.c>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>
# END W3TC Browser Cache
# BEGIN W3TC Page Cache core
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteRule .* - [E=W3TC_ENC:_gzip]
RewriteCond %{HTTP_COOKIE} w3tc_preview [NC]
RewriteRule .* - [E=W3TC_PREVIEW:_preview]
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} =""
RewriteCond %{REQUEST_URI} \/$
RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wordpress_logged_in|wptouch_switch_toggle) [NC]
RewriteCond "%{DOCUMENT_ROOT}/zeropaymovies/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" -f
RewriteRule .* "/zeropaymovies/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" [L]
</IfModule>
# END W3TC Page Cache core
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thx 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"
# rss feed
ExpiresByType application/rss+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/jpg "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 font/truetype "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 2 months"
ExpiresByType application/javascript "access plus 2 months"
ExpiresByType text/javascript "access plus 2 months"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
# BEGIN W3TC Browser Cache
<IfModule mod_deflate.c>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>
# END W3TC Browser Cache
# BEGIN W3TC Page Cache core
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteRule .* - [E=W3TC_ENC:_gzip]
RewriteCond %{HTTP_COOKIE} w3tc_preview [NC]
RewriteRule .* - [E=W3TC_PREVIEW:_preview]
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} =""
RewriteCond %{REQUEST_URI} \/$
RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wordpress_logged_in|wptouch_switch_toggle) [NC]
RewriteCond "%{DOCUMENT_ROOT}/zeropaymovies/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" -f
RewriteRule .* "/zeropaymovies/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" [L]
</IfModule>
# END W3TC Page Cache core
Minify Your CSS & JS Files
There are many online tools available for minifying CSS and JavaScript code.
You canload facebook scripts after page load on mouse movein document. Google likes it. The advantage is scripts load faster than 8 seconds. In 8 seconds a usar can click on other links and leave page.
ReplyDeleteThis is a good idea. Let me correct if i am wrong,
DeleteListen to document load event , bind mouse move event and loaf facebook or any other widget.
great
ReplyDeleteThanks and thanks, its working very well.
ReplyDeleteGod bless your
Great Article!
ReplyDeleteSomehow, I got it working for my site. freshers.co - is having 100/100. Thanks Srinivas for your advise.
ReplyDeleteGood ideas bro, thanks you.
ReplyDeleteHello,
ReplyDeleteWhen I try to add "" into Head tag, a error alert appears- "HTML5: Error: <include is no recognized!". What is the solution for this error?
Thnak you Srinivas for great post.
ReplyDeleteWell I will implements all those for my website and will see the result.
ReplyDeletetnx
ReplyDeleteThank you
ReplyDeleteGreat tutorial ! What about facebook share code ? Can you give an example please ?
ReplyDeleteIf you use 'Addthis' plugin, you can add external js addthis link to footer into a load script just like bellow:
Deletefunction downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fe185c1057c6fad";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
Facebook Pixel and Facebook Pix, are they related or different?
ReplyDeleteWhat to do with this file
ReplyDeleteIt disables loading my page
Http://connect.facebook.net/en_US/sdk.js
I did not find a solution
I want to give me a solution