increase speed score Google page speed test how to make wordpress load faster. google pagespeed insights’ score. gtmetrix, yslow, Pingdom
Tools to USE
Webpagespeedtest.org //allows you select network and device but google pSI won;t
Pingdom // calculates page load time but google psi won’t
Gtmetrix // suggests best features to improves provide more details
Chrome Dev tools // options
500 KB //industry 1-3MB
mobile page load time
3 seconds //industry 7 seconds average
mobile speed & bounce rate
Follow the industry standard page load /size details. check competitors in your industry.
google recommendations & Industry standard as 2018-19
for it computes results from slow 4g network. this is the reason your desktop and mobile results are different.
Throughput: 1.6Mbps down / 750 Kbps up. lighthouse github
|Audit||Score of 100||Score of 99||Score of 95||Score of 90||Score of 80||Score of 75||Score of 50||Score of 0||Metric Scoring Median||Metric Scoring Falloff|
|FCP||[0, 1000ms]||(1000ms, 2500ms]||over 2500ms|
|FID||[0, 50ms]||(50ms, 250ms]||over 250ms|
: First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, and Estimated Input Latency.
First Contentful Paint
Speed Index shows how quickly the contents of a page are visibly populated. shoulbe 2 seconds
Time to Interactive
First Meaningful Paint
First CPU Idle
partially interactive fixing critical rendering resources
Estimated Input Latency
130 ms //50ms
8.5 s user input & response time js plays role
Server response times are low (TTFB)
1.3 sec //30 ms Root document took 30 ms
in psi green
Ag request count
//not more than 50 files but industry standard 100+
we need to enable caching page cache (fastcgi cache) & object cache (redis)
Improve php performance, Nginx, Mysql, Linux system, SSL Latency,network throughput, latency etc. (will be written in next update).
Below content written in 2015 still worth to read.. i will update this for a perfect guide.
How to pass google pagespeed rules
to get green marks on page speed?
- Avoid landing page redirects
- Enable compression
- Improve server response time
- Leverage browser caching
- Minify resources
- Optimize images
- Optimize CSS Delivery
- Prioritize visible content
- 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.
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 cache by w3 total cache
enable leverage browser cache by editing .Htaccess
Note that w3 total cache also adds similar code to .htaccess
you can install WordPress speed booster plugin to load js and css asynchronously.
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.
- Loads CSS asynchronously and minifies sent to footer in mobile devices.
- Eliminates render blocking scripts, optimizes images,
- displays high memory using plugins like godaddy performance plugin.
Rule 3 how to minify js in WordPress?
Using w3 total cache Plugin
- Install w3 total cache plugin Go performace sidebar of wordpress admin dashboard.
- check General settings and Enable Minify select option manual.
- click minify from w3tc settings and enable js minify settings look like below
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
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
Rule 7 Avoid landing page redirects
Rule 8 Prioritize visible content
Rule 9 Optimize CSS Delivery
Rule 10 Use asynchronous scripts
how to use asynchronous scripts ?
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.
- 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.
- Converts render-blocking CSS and JS files into NON-render-blocking, improving performance of web page
- BWP Minify. Allows you to minify your CSS and JS files for faster page loading for visitors.
- WP Minify. This plugin uses the Minify engine to combine and compress JS and CSS files to improve page load time.
Reducing Server Response time TTFB:
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.
- if you want to buy a theme please Run speed test on that theme demo.
- Move social sharing icons email subscription buttons footer means below the fold if above methods not work.
- Google page speed tool some time shows old results please remind this and don’t be confuse.
- I will update it later because my loads too lazy see here test results
- 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 .
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.
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.