Improve Your Google Page Speed Insights Score
Wall Script
Wall Script
Sunday, January 10, 2016

Improve Your Google Page Speed Insights Score

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.

Improve Your Google Page Speed Insights Score

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).

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>

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>

Google Adsense
Use always asynchronous advertisement script
Improve Your Google Page Speed Insights Score

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>

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

Minify Your CSS & JS Files
There are many online tools available for minifying CSS and JavaScript code.
web notification

16 comments:

  1. 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.

    ReplyDelete
    Replies
    1. This is a good idea. Let me correct if i am wrong,

      Listen to document load event , bind mouse move event and loaf facebook or any other widget.

      Delete
  2. Thanks and thanks, its working very well.
    God bless your

    ReplyDelete
  3. Somehow, I got it working for my site. freshers.co - is having 100/100. Thanks Srinivas for your advise.

    ReplyDelete
  4. Hello,
    When I try to add "" into Head tag, a error alert appears- "HTML5: Error: <include is no recognized!". What is the solution for this error?

    ReplyDelete
  5. Thnak you Srinivas for great post.

    ReplyDelete
  6. Well I will implements all those for my website and will see the result.

    ReplyDelete
  7. Great tutorial ! What about facebook share code ? Can you give an example please ?

    ReplyDelete
    Replies
    1. If you use 'Addthis' plugin, you can add external js addthis link to footer into a load script just like bellow:

      function 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;

      Delete
  8. Facebook Pixel and Facebook Pix, are they related or different?

    ReplyDelete
  9. What to do with this file
    It 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

    ReplyDelete

mailxengine Youtueb channel
Make in India
X