Improve google pagespeed insights score for your website [wordpress]

increase speed score Google page speed test how to make wordpress load faster. google pagespeed insights’ score. gtmetrix, yslow, Pingdom
Increase website page speed wordpress load faster with these tips n pluginsi have already wrote about this on my other forum.

you can see matt cutts google spam chief website getting 93/100 score on Google page speed test.

Most common errors

How to pass google page speed rules

to get green marks on page speed?

  1. Avoid landing page redirects
  2. Enable compression
  3. Improve server response time
  4. Leverage browser caching
  5. Minify resources
  6. Optimize images
  7. Optimize CSS Delivery
  8. Prioritize visible content
  9. Remove render-blocking JavaScript
  10. Use asynchronous scripts

a web page should load in 1.50 seconds, and page size should be below 512 Kb-1MB page request below 52, or 200 milliseconds according to pingdom.

Rule 1 How to enable leverage browser cache in wordpress
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
Note Add Expires headers leverage browser cache are same. google page speed indicates as leverage browsing cache and gtmetrix indicates as expires header
Gtmetrix suggest add expires header to google adsense ads
below ex
Google suggests to add expires to below resource which is not serves from our website
  • http://js.nrcdn.com/custom-script/1.0/www-airtet-in.js (15 minutes)
  • http://pagead2.googlesyndication.com/pagead/expansion_embed.js (60 minutes)
  • http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 minutes)
  • http://pagead2.googlesyndication.com/pagead/osd.js (60 minutes)
try how to add expires headers to external files
 

if it’s external you can’t control it’s cache headers : they are set on the server who is providing ga.js in the first place ^_^

Leverage browser caching for external sources not possible like Google analytics. ignore this.
 

leverage browser cache by w3 total cache 

install w3 total cache and click on browser cache under performance tab left side of wordpress admin dashboard.
  • Set Last-Modified header: Check
  • Set expires header: Enable
  • Expires header lifetime: 31536000 seconds
  • Set cache control header: Enable
  • Cache Control Policy: cache with max-age
  • Set the entity tag (eTag): Enable
  • Set W3 Total Cache header: Enable

enable leverage browser cache by editing .Htaccess

simply copy this code paste your in .htaccess by using cpanel or filezilla directly from your wordpress dashboard using yoast plugin
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/xjavascript “access 1 month”
ExpiresByType application/xshockwaveflash “access 1 month”
ExpiresByType image/xicon “access 1 year”
ExpiresDefault “access 2 days”
## EXPIRES CACHING ##

Note that w3 total cache also adds similar code to .htaccess

you have error url rewriting not works go installation page add the copy .htaccess code paste in your blog .htaccess
what is the problem here
 
this code enables for only our website only not for other images from external sources like twitter, facebook, google plus share buttons scripts google page speed test shows this error.
 
leverage browser caching done.

Rule 2 How to Eliminate render-blocking JavaScript and CSS in above-the-fold content

this is is the most important. this can be fix by w3 total cache  also one of the plugin called minit from github check below for this plugin may use full that combines all css and javascript resources into one and serves from wp-content upload folder.

  1. copy the below code add it to before </body> of your html page.
  2. replace defer.js with your external js file like http://www.airtet.in/wp-includes/js/jquery/jquery.js?602521.
  3. that solves your problem mentioned by feedthebot.com
  4. and his page speed score 97/100 desktop 95/100 mobile
  5. what if more than one js scripts generally 3 or more.

<script type=”text/javascript”>function downloadJSAtOnload() {var element = document.createElement(“script”);element.src = “defer.js“;document.body.appendChild(element);}if (window.addEventListener)window.addEventListener(“load”, downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent(“onload”, downloadJSAtOnload);else window.onload = downloadJSAtOnload;</script>

in WordPress where to add this code 


you can install WordPress speed booster plugin to load js and css asynchronously.
settings:
tick o script move to the footer,
asynchronous css js.
<script src=”yourscript.js” async></script>

defer loading plugins for wordpress

Async JS and CSS  plugin adds async string to java and css.

but speed booster pack also do this with extra features.

  1. Loads CSS asynchronously and minifies sent to footer in mobile devices.
  2. Eliminates render blocking scripts, optimizes images,
  3. displays high memory using plugins like godaddy performance plugin.

 

Rule 3 how to minify js in WordPress?

 

Using w3 total cache Plugin

  1. Install w3 total cache plugin Go performace sidebar of wordpress admin dashboard.
  2. check General settings  and Enable Minify select option manual.
  • Minify Cache Method – Disk.
  • HTML Minifier – Default.
  • JS Minifier – JSMin.
  • CSS Minifier – Default.
Save settings.

we can’t minify external javascript like google adsense script

http://pagead2.googlesyndication.com/pagead/expansion_embed.js
In google page speed test render blocking resource urls we need to copy using mozilla right click js blocked check source and then the url because if you copy the url directly from page speed tool it misses url path you get 404 error.
once you copied js file below js file management you need to click on add script then paste url click verify url embed in head and all templates. for all js and css resources.
for css file you need to add below the css minify settings also select your active theme.
  • click minify from w3tc settings and enable js minify settings look like below

Rule 4

how to minify css in wordpress?

  • Now go to css minify settings just below the js settings and settings looks like, also click on line break removal

at least one css resources load from header to website load as it is. so we can’t control the css minification also.
 we can minify js and CSS and combines all individual JS CSS files in one file but we this plugin builds 2 files each for JS and CSS. but moving script to footer not working as js file management.
wprdpress minify lugins:
wp minify
wp super minfiy
Autooptimize
speed booster pack
Use the plugin that have all features include like speed booster aor w3 total cache.

Rule 5 Optimize images

How to optimize images on wordpress

mostly this problem caused by missing dimensions of the images.

  • we can use wp smush it plugin and lazy load image plugin for doing this on wordpress. (don’t try smush it based on mh personal experience duplicates )
  • also you may set the image limits as low from settings general area.
  • see image optimization plugins 
  • sometimes google page speed test insights shows as your images optimized sometimes may not.
  • in my cause i am using wp smush it and lazy load plugins and i passed this rule may be temporarily.
  • EWWW Image Optimizer

  • Resize Image After Upload

  • Resizing Images Manually as set it thumbnail from wordpress media settings.

Compress JPEG & PNG images

Enable compression Rule 6

how to enable gzip compression in wordpress

we can enable gzip by manually form wordpress core options or by editing.htaccess also using w3 total cache or any other plugin this not hard.
Gzip Plugins
w3 total cache’
Gzip ninja compression only works with apache server.
This plugin enables GZIP compression, minifies and eliminates render blocking CSS and JS and optimizes images.

Rule 7 Avoid landing page redirects

example of this mattcutts.com redirects to his blog. we can pass this rule easily

Rule 8 Prioritize visible content

content priority in above fold. no problem here

Rule 9 Optimize CSS Delivery

we already did this while minifying css from w3 total cache mentioned above image just copy the render blocking css url put in w3 total cache and save setting that not appears in google page speed test results.

Rule 10 Use asynchronous scripts

how to use asynchronous scripts ?

add async or defer before javascript mentioned above as defer.js in red color. example for this google adsense codes use asynchronous version of javascript. which means javascript load after important files load.
Note that we can’t control external files from minifying caching on our website.
 

how to get 100 / 100 score on google page speed insights test?

a blank page should get’s 100/100 score on google.  ex 505 internal error page.

Google page speed score 100/100 test page here
Google.com itself scoring 99/100. 

  • After doing this clear page cache using w3 total cache plugin and run google page speed test.

This is mentioned by wpcub.com and his pagespeed score 90/100 in desktop 74/100 in mobile.

I tried w3tc plugin plugin but my score not increased also decreased may be i have some other conflict.  if you want to speed up your website try this. and post your results here.
A youtube video shows that 100/100 score on desktop and 95/100 on mobile using Speed booster pack and W3 Total cache;
other plugins might helpful
  • script to footer helps to defer loading This small plugin moves scripts to the footer to help speed up page load times, while keeping stylesheets in the header.
  • Auto optimizeAutoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.
  • Async JS and CSS   Converts render-blocking CSS and JS files into NON-render-blocking, improving performance of web page
  •  BWP MinifyAllows you to minify your CSS and JS files for faster page loading for visitors.
  •  WP MinifyThis plugin uses the Minify engine to combine and compress JS and CSS files to improve page load time.

Reducing Server Response time:

Mostly this occurs with low quality web hosting because they don’t have enough resources,

Cache plugins like w3 super cache and w3 total cache can fix this.

Tips
 
  1. if you want to buy a theme please Run speed test on that theme demo. 
  2. Move social sharing icons email subscription buttons footer means below the fold if above methods not work.
  3. Google page speed tool some time shows old results please remind this and don’t be confuse.
  4. I will update it later because my loads too lazy see here test results
 
eliminate render blocking javascript and css wordpress
  • Normal execution <script>
    This is the default behavior of the <script> element. Parsing of the HTML code pauses while the script is executing. For slow servers and heavy scripts this means that displaying the webpage will be delayed.
  • Deferred execution <script defer>
    Simply put: delaying script execution until the HTML parser has finished. A positive effect of this attribute is that the DOM will be available for your script. However, since not every browser supports defer yet, don’t rely on it!
  • Asynchronous execution <script async>
    Don’t care when the script will be available? Asynchronous is the best of both worlds: HTML parsing may continue and the script will be executed as soon as it’s ready. I’d recommend this for scripts such as Google Analytics.
<script src="yourscript.js" async></script>
w3 total cache plugin not worked for me. if you have any skills to do this manually mentioned on www.feedthebot.com .
A WordPress plugin to combine CSS and Javascript files
use very basic theme like theme frank mentioned below. sometimes w3 total cache plugin not works with your website. try mint plugin which combine css and javascript if w3 total cache plugin not works.
when i using genesis framework 2.0 i score 85. now using with avda theme scoring 71. now i am going to use frank theme.
because when i analyzed with quicksprout audit tool i have presently 189 requests, page size 5.8MB load time 4.82 seconds while using avada theme.
avada demo theme scoring 75 on google pagespeed insights.
 Update
other related urls
y slow optimization in 3 parts
w3 total cache retired some features moving scripts to footer
alternatively we can use other plugin to do this, render blocking css and js main problem to get low score in google page speed. make sure to check broken things after saving settings
sometimes plugins won’t work instantly. i suggest 85 google score enough, also use gtmetrix along with tool.w3 total cache plugin enough for speed.

I think this Info helpful to make your website load / run faster especially in wordpress.

https://www.elegantthemes.com/blog/tips-tricks/how-to-improve-your-google-page-speed-score

 

Conclusion: Don’t try get score 85 to 90+ because its waste of time. Sometimes plugins not works with their features they are promised on the plugin page. Present i am getting 92/100 in desktop and 79/100 in mobile with 1 js and 2 css (1 is google fonts) with w3 total cache plugin only.