wordpress speed optimization 2021 increase speed score Google page speed test how to make wordpress load faster. google pagespeed insights’ score. gtmetrix, yslow, Pingdom.
why the need of wordpress speed optimization?
a web page should load n 2-3 seconds. google recommends 2 seconds. page size should be 1MB but avg 3MB.
3MB/sec 3*8=24 mbps connection. revenue loss by page speed = only 10% of expenditure needed on hosting.
amazon page speed and revenue (100ms = 1% revenue 1000ms / 1 sec not 10-% 3o-50% revenue.
//Follow Industry Standard not perceived metrics
wordpress speed optimization 2021 in 3 steps
1.Browser level (Rendering Optimization)
reducing js css delver optimization by google pagespeed insights suggestions
2.Server level: (Reducing TTFB or Server response time)
Quick tip: if you don’t have server level permissions. just install a cache plugin.
Detailed article about reducing TTFB / response time
n shared hosting you can’t do anything. so f ts cloud or dedicated hosting you can optimize at server level.
(you can checkout server optimization a server admin required not good for business man)
3.CMS level wordpress speedup tips & tricks
biggest issue : server response time, (optimize or upgrade hardware) server monitoring required t find out the bottleneck application level like mysql hardware level hdd, ram, cpu threads (comptia course) etc.
at 3rd level install caching plugin, reduce page size, remove render blocking js, unused css, remove unnecessary plugins so we save some memory by reducing requests.
read more caching wordpress plugins.
4. use a cdn push cdn (keycdn) pull cdn (cloudflare)
cdn helps to sere request from their servers which is closest to user, so it saves bandwidth, resources then it automatically improve server response time.
Read more on types of cdn ft keycdn vs cloudflare
#5. reducing page size developer task
why this is important lets see example
a 3MB page size will load in 3 seconds then,
2MB file or page in 2 seconds
1 MB in 1 second with same resources*
a web page consist 70% image, 50% js, 10% css 5% html*.
js optimization, removing unnecessary scripts helps.
wait.. don’t obsessed with speed
speed vs user need / intent
a blank page, which loads at faster speed, without serving user purpose is a crap. follow industry wise benchmarks for speed & website load time.
best way follow competitor metrics because that’s worked for them so it will be, rather than focusing on competitor it’s good idea focusing on user lel metrics like bounce rate, session duration (google analytics), dwell time in google. CTR in serp results
- Guide to achieve 100 score at Google page sped insights
- core web vitals
- wordpress speed optimization
- pingdom speed test
- gtmetrix speed test
- chrome devtools
- lighthouse speed test
- web page speed test org tool
- DNS Lookup 20ms to 120ms
- TCP & SSL handshake 100-200ms
- DNS, socket and SSL negotiations + 100ms.
- TTFB – 100-200ms
- onload Domcontentloaded: 300ms
- fully load after js: 1-3 seconds
|Root Document html page
|data center location|
|DNS Lookup||6.3ms||1.0 ms|
|Connect server||29.3||32 ms|
|Send to server||0.2ms||0.2ms|
|Wait from server||943.9||1113|
|Page size||576.9 KB||336.7 KB|
|Requests||48 (below according google lighthouse)||26|
|Load time||2.79 s||1.24 s (pingdom)|
Tools to USE for wordpress speed optimization
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 // optional
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
wordpress speed optimization Plugins 2021
WP super cache
You may don’t know how these plugins works, ho0w to use unless you are website speed performance enthusiast.
Note: All Performance plugins enables page cache ,
2020 Update analyzing with lighthouse
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.
- install w3 total cache on WordPress.
- use cdn like maxcdn or cloudflare [free].
- use responsive themes like genesis 2.0 or thesis framework.
browser page speed optimization for wordpress
to get green marks on page speed?
- Avoid landing page redirects
- Enable compression gzip vs brotli
- reduce server response time ttfb
- Leverage browser caching expires header
- Minify resources
- Optimize images – lazy load
- Optimize CSS Delivery
- Prioritize visible content
- Optimize JS delivery
- 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.
How to enable leverage browser cache in wordpress
leverage browser cache by w3 total cache
Note that w3 total cache also adds similar code to .htaccess
Rule 2 – wordpress above fold content optimization – for speed *
Normal Vs Async vs Defer js
HTML Blocks until Script parses,
Defer: delaying js until HTM parse.
Async: HTml parse contnuue & Script exuted (not a render block)
you can install WordPress speed booster plugin to load js and css asynchronously.
tick o script move to the footer,
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.
Identifying Critical render path of CSS to Put In head
Generally develops have to create 2 css files one for header location critical,
2nd body to speedup rendering at browser.
autoptimize plugin, wp rocket, and pagespeed module at server level helps to achieve this.
Bonus optimizing google font delivery
google fonts are essential for legible fonts these are render blocking by default. your page speed affects by google fonts server response time,
we use simple js to optimize google fonts delivery or choosing a light weightfonts. or reming fancy google fonts using system default fonts like arial, verdana etc
how to minify js in WordPress?
Using w3 total cache Plugin
- Install w3 total cache plugin Go performance sidebar of wordpress admin dashboard.
- check General settings and Enable Minify select option manual.
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
by default almost every server enables this feature because it reduces 80% of page.
Rule 7 Avoid landing page redirects
Rule 8 Prioritize visible content
Rule 9 Optimization of CSS Delivery bester wordpress speed
- inline critical css
- Remove unused css
Inlining CSS & Removing unused css requires a tools, and some experienced trustworthy freelanced developers like me. css optimization boosts wordpress speed score by 4X.
Rule 10 Use asynchronous scripts
minify: removes the lines and comments
Compress: Recues size by compression gzip or brotil.
Loading Priority: async, defer,onload event
how to use asynchronous scripts ?
Note: Nowadays all scripts are asynchronous, it s default feature with any optimization plugins in wordpress.
- Browser caching time those are 60 minutes but google recommends more than 7 days.
how to get 100 / 100 score on google pagespeed insights test?
a blank page should get 100/100 score on google. ex 505 internal error page.
Google.com itself scoring 99/100.
above rules applicable for browser side, but most important what about server side, database delay.
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
#2 Decrease web page size?
1. Content size by domain
Content size by domain
2. Requests by domain my site
Requests by domain competitor
3.Content size by content type my site
Content size by content type competitor
4.Requests by domain
Competitor Requests by domain
competitor website size
Problem Avg 953 MS response time (355 Ms from india) for Static Content
FIndings: Competitor enabled Cloudflare cache & all static content served from nearest CDN lost angeles.
My case not enabled cloudflare & pagecache server side also. But competitor enabled fastcgi cache server side & Cloudflare. my data center location based in india tested from America.
and i have lot file requests.
their hosting (maybe)
8 Dedicated x86 64bit Cores
50GB SSD Disk
FOr 3000 INR Month. from a reseller.
- 1 CPu Core
- 3.7 Gb Ram
- 30GB SSD paying 2500-3200 INR month (Google Cloud)
Solution: enabled cloudflare standard caching for static content.
need to remove some plugins or adjust according to functionality.
one of my website total website SIZE is 3.08MB
but Optimal page size equal or less than to 512KB less than 1 MB to load quickly in mobile browsers as well as the desktop too.
512 KB not possible at least 1 MB is ok My goal.
Server response time should be under 200ms or 0.2s don’t buy single core VPS plans
here are tools you required
- Pingdom speed test
- Google page Insights
- quick sprout (discontinued)
However, most popular websites have worse about optimizing for mobile and Speed but they still rank at same place maybe because of their Authority, trustworthy, freshness, branding.
digging very deep into this topic not necessary for regular blogger.
Quicksprout wordpress speed optimization
My web page size by Total SIZE 3.02MB
- Script 2.1MB and 41 requests (Including google Adsense, Analytics, jQuery, web fonts)
- HTML 401.9KB 12 Requests
- CSS 225.6 KB 6 Requests (google fonts, blogger css bundle, )
- Other 197.4 KB 5 Requests
- Images 182.7 KB 26 requests
Speed Load time 1.43 minutes.
- Script: 39.0%
- Image: 27.3%
- HTML: 24.2%
- CSS: 5.7%
- Other: 3.8%
- Make fewer HTTP requests
- A+Use a Content Delivery Network (CDN)
- B+Add Expires headers
- F Compress components with gzip
- C- Avoid HTTP 404 (Not Found) error
- A+Avoid URL redirects
- F Reduce DNS lookups
- F Configure entity tags (ETags)
- A+ Put CSS at top
- A+Reduce the number of DOM elements
I alway get the high percentage of requests and page size at quick sprout when comparing to GTmetrix. (its I marks that is my own site they need to convert as paid customers by showing some kind of errors maybe I guess.)
Pingdom Speed Test Result
- PageSpeed Grade A (94%)
- YSlow Grade C (70%)
- Page load time 5.4s
- Total page size 1.28MB
- Total # of requests 83
Again retested but this time they took another server to test, but the results varied here
- PageSpeed Score (93%)
- YSlow Score (69%)
- Page Load Time 4.0s
- Total Page Size 1.30MB
- Requests 91
This means Loading Script asynchronously
async and defer
|Specify image dimensions||
|Leverage browser caching||
|Remove query strings from static resources||
|Avoid bad requests||
|Specify a Vary: Accept-Encoding header||
|Combine images using CSS sprites||
|Prefer asynchronous resources||
|Specify a cache validator||
|Serve scaled images||
|Enable gzip compression||
|Avoid a character set in the meta tag||
|Avoid landing page redirects||
|Inline small CSS||
|Minimize request size||
|Optimize the order of styles and scripts||
|Put CSS in the document head||
|Serve resources from a consistent URL||
|Specify a character set early||
|Avoid CSS @import||
You can buy a wordpress page speed optimization serve at fiverr, freelance for $25, but they may pass the score , but actual problem lies with server resources. i am good at tuning performance of servers and scaling accordingly. hire me for wordpress speed optimization and caluate your return on investment.