Google Core Web Vitals
Google Core Web Vitals is the new ranking signals and performance metrics from Google that is focus on user experience. Core Web Vitals are focus on how your website is loads, not the overall page load times.
Google first announced on May 2020 that Core Web Vitals will be Search Page Experience will be included in Goole Search ranking.
And on November 2020, they announced the page experience signals in ranking will roll out in May 2021. The new page experience signals combine Core Web Vitals with their existing search signals including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines.
source: webmaster.googleblog.com
What are Google Core Web Vitals?
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
The metrics that make up Core Web Vitals will evolve over time. The current set for 2020 focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics (and their respective thresholds):
- Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
- Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.
For each of the above metrics, to ensure you’re hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
source: web.dev/vitals/
How to check website speed optimization issues?
Before we start Speed Optimize, here are the few sites for you to test your website speed.
I will use GTMetrix to test and study the waterfall, find out what is the problems that cause website performance, and fix accordingly. You may learn How to Analyze a Waterfall Chart.
After the GTMetrix, I’ll use Google PageSpeed Insights to check further, to optimise to Google standard.
Please do note that these scores are suggestions to improve the website, good content always comes first.
Is it possible to Speed Optimize Elementor WordPress website to Score 100/100 on Google PageSpeed Insights?
Yes, is possible, you will need to minify CSS/JS, async & offloads JS plus fine-tune the design for the best results. Always remember, less is more. Below is the results of my
42 ways to Speed up for WordPress for PageSpeed Insights + Tips to Speed up Elementor
Here are my FREE optimization guides to Optimize your WordPress website, the results may vary depending on your skills.
Always welcome to hire me to get the dirty job done. Money-back guarantee!
1. Avoid use Multipurpose theme
Use lightweight theme like Blocksy,
See also How to Convert WPBakery (FKA Visual Composer) to Gutenberg
2. Avoid Bloated plugin
Replace Contact Form 7, Slider Plugin, Yoast with lightweight plugin.
3. Contact Form 7
Fluent Form don’t load scripts every page.
4. Slider
Based on research, less than 1% of visitor click on it. Make use of Call to Action.
5. Yoast
They are few who use complaints where they felt their website loads even slower with Yoast Premium. If you really Yoast, may use Use Hide SEO Bloat / unbloater to remove unwanted in backend.
Or use lightweight SEO plugin like Slim SEO / SEO Framework. If you need more functions, go for SEOPress Pro, only USD49 for unlimited site.
6. Wordfence
WordFence creates 21 of database table, and increas the database size from day to day. Use secure hosting provider, weekly update, no easy password with 2FA. NinjaFirewall, BBQ firewall is lightweight security plugin.
6. Avoid Video Background
It slooowwww down your website. If you really need it, use preload image.
7. FontAwesome WebFont
Use inline SVG format, or replace font awesome icon to other SVG graphic. You may find a lot of nice design icon at flaticon. Use vecta.io/nano to further compress your SVG Graphic.
8. Page builder for page, not Post
Never use page builder to create post, reduce as much assets as possible.
9. Use Query Monitor
Look for slow query, warning, diagnose and fix the error. Remember to disable it when you are on using.
10. Build with Block Editor
Use lightweight theme + Gutenberg Block like GenerateBlock, Kadence Block, Stackable. You can easily get very good score with minimal optimization.
11. Reduce DOM size
Use lightweight theme & Gutenberg, avoid use too many div with page builder.
12. Reduce number of Plugins
You do not need Really Simple SSL for HTTPS. Replace Really Simple SSL with the correct WordPress setup, as SSL is not a function of WordPress and must be set up correctly on the server. If you have had problems with mixed content, use Better Search Replace to replace all http://* to https://*
If you use Elementor, go to Elementor > Tools > Replace URL
13. ⚙️ Make use of Code Snippets
To reduce number of plugin. More plugin may require more resources, It all depends on how the plugins is coded.
Example you can turn WooCommerce into catalog with code snippet without using YITH Catalog mode.
14. Optimise Image size
Compress images with Ewww,
15. Image with Proper Size
Standard size for featured image is 1200px by 628px. Desktop full width full screen is 1920px by 1080px and image for mobile is 480px width. Remember to add width & height attributes Swift Performance Pro / FlyingPress / perfmatters
16. Use PNG for transparent background
Jpeg has smaller file size.
17. Use WebP image format
Highly suggested by Google. The file is 20% – 30% smaller than Jpeg and PNG, furthermore, it supports transparent.
17. ⛩ Replace graphic with SVG format
Replace my website graphic from Jpeg to SVG format, it saves 105kb. Image can’t save in SVG format. Use vecta.io/nano to further compress your SVG Graphic.
Safe SVG gives you the ability to allow SVG uploads whilst making sure that they’re sanitized to stop SVG/XML vulnerabilities affecting your site.
If you looking for nice free vector graphic, stock photos, PSD and icons, may visit freepik.
18. Inline Background Image
For faster load time.
19. Lazy Load Images under the fold
Download upon user scroll to the viewpoint. Remember to exclude / preload those above the fold.
20. Lazy Load YouTube / iFrame
Defer whatever that are not require immediately Swift Performance Pro / FlyingPress / perfmatters
21. Use Self-Host YouTube preview thumbnail
To increase website speed performance.
22. Use Default System Font
Cut down 3 party assets. Webfont takes up number of weight of a total website size. Use System Font Stack, same as what WordPress’s dashboard using. You may implement via this CSS code:
h1, h2, h3, h4, h5, h6 {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
}
body, p {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
}23. If use Google Font, use Less Font Type, use Less Font Weight
Only use whatever you needed. Further optimise font with the subsets that you require for self-host.
Blocksy theme have self host Google font function.
24. Use Favicon
Use less colour to make the favicon smaller size.
25. Remove / Defer Asset Requests
Reduce assets request on page, and load when needed with Perfmatters
25. Remove jQuery when you don’t need it
Load it when needed with Perfmatters
26. ⌨️ Disable Comment
Most site like brochure site don’t require.
// Disable comment-reply.min.js
function clean_header(){ wp_deregister_script( 'comment-reply' ); } add_action('init','clean_header');27. Disable Emoji
Most site like brochure site don’t require.
// Disable Emoji JS
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}28. ⚓️ Disable WP Embeds
Most site like brochure site don’t require. You may use Perfmatters disable everywhere and enable on certain page.
29. Speed up WooCommerce
Simplify your WooCommerce admin panel with Disable WooCommerce Bloat / unbloater
30. Reduce external Asset Requests
And load them when user interaction. Third-party scripts will slow down your page load and are something out of your control, just use whatever you really need. If you need to have the Google Map on your website, move it to contact page because it brings more than 10 requests.
31. Remove Social Media Feed
These are the assets that you unable to control.
32. Optimise Database
You can use cache plugin like Swift Performance Pro, FlyingPress, or Use database cleaner plugin like Advanced Database Cleaner, WP-Sweep, Garbage Collector.
After some testing and usage, I prefer Advanced Database Cleaner Pro. Because of it works really well and easy with clean interface.
33. Limit Post Revisions
WordPress Revisions can easily take the entries in the database, and is very common to have 50+ revisions on a single page. Imagine if you have 100 pages and post s and each has 50+ revisions, it will end up 50,000+ of entries in the database.
What I do is simply add this code to wp-config.php. You may change to number to suite your needs.
define( 'WP_POST_REVISIONS', 3 );Or you can completely Disable the WordPress Post Revisions with this code
define('WP_POST_REVISIONS', false );Remember the code below needs to be placed above the ‘ABSPATH’ otherwise it won’t work.
34. Spam Protection
Use WP Armour to block spam bot submission for comments, registration, forums and forms.
35. Convert Database’s table to InnoDB
InnoDB has better performance and more reliable.
36. Use Cache plugin
Generates static HTML pages with
If you use LiteSpeed web server, may use their official plugin LiteSpeed Cache, but I found the
Swift Performance 20 % Coupon Code: FASTWP
37. Generate Critical and Used CSS
Keep CSS file as minimal as possible. Swift Performance Pro / FlyingPress / WP Rocket
38. Fast Hosting Provider
Web hosting is one of the most important factors in speed optimization, cheap shared hosting speed is like a bicycle, fast hosting is like Ferrari. You can’t expect a bicycle to run faster than a Ferrari.
Shared Hosting
For fast and reliable hosting provider; I would suggest CloudWays + Linode. But if you are a newbie with a low budget looking for shared hosting, I’ll highly recommend you go for Nofrillscloud, their support is awesome too!
SiteGround replacement
Nofrillscloud have the best combo in shared hosting industry. Their Our WordPress Optimized Cloud is powered by AWS + LiteSpeed Enterprise, cPanel/WHM & Imunify360 AI Security. Most important is very affordable, compare to SiteGround. In fact I tested with couple of clients and found that SiteGround is slower after moved to Google Cloud.
If you host your website in Malaysia,
I DO NOT recommend GoDaddy or EIG hosting company like BlueHost, HostGator. The reason some people highly recommend BlueHost is they paid affiliate fee very well.
RunCloud / GridPane Cloud Server Control Panel (Self Managed)
If you have some knowledge of how to handle web server. Use Cloud Server Management Panel like
As for the Cloud Server Control Panel,
Both feature easy WordPress installation, High-Performance LEMP stack, NGINX with FastCGI, PHP4, HTTP/2, MySQL8, Free SSL, Strong firewalls, and many more.
Signup Vultr with my affiliate link to get FREE USD100 credit (Limited time).
Signup
Signup UpCloud with my affiliate link to get FREE USD25 credit.
Please note that this is self-managed Cloud Server Control Panel service, they will help you on Cloud Server Control Panel related problem and you will need to deal yourself on most WordPress related issue.
See also Cloud Server Control Panel comparison
Premium WordPress Managed Hosting
If you have extra budget or serious with your company website, you may consider Rocketnet, Kinsta or WPEngine. Interesting about Rocketnet is they use CloudFlare enterprise CDN, which have 250+ POP around the world! Kinsta uses Google Cloud Platform (GCP) and WPEngine uses Amazon Web Services (AWS).
Always remember, You get what you pay for. A good hosting provider is always better than a premium cache plugin, and most of them handle your CDN, GZIP / Brotli Compression, etc. If you have a budget, I will suggest paid a bit more to get proper hosting provider.
39. Use Hosting Provider than close to your Target Audience
To cut down the latency. No point use cheap hosting that is 1,000km away.
40. Use Content Delivery Network (CDN)
IIf your target audience is international.
I’m currently using
BunnyCDN provides Free 14-Day Trial – No credit card required.
If you use Cloudflare to cache your WordPress website, you should check out WP Cloudflare Super Page Cache.
This plugin significantly improves the response times of your WordPress website by taking advantage of the very fast Cloudflare cache also for HTML pages and saving a lot of bandwidth. And it can also be used in conjunction with other cache plugins as long as their rules do not interfere with the Cloudflare cache.
41. Use GZIP / Brotli Compression
Change your hosting provider if they don’t support.
GZIP is a file format and a software application used for file compression and decompression. GZIP compression is enabled server-side, and allow further compress of the size of HTML, CSS and JavaScript files. It will not compress images as it compresses in a different way. You can easily get 50% of compression with GZIP, some up to 70% of compression. This is the easiest way to optimise your WordPress site.
Enable Gzip Compression using cPanel
If you use cPanel, may active GZIP Compression in
Software > Optimise Website > Compress Content > Compress All Content
Enable gzip compression using .htaccess file for Apache
Add this scripts inside script in a .htaccess file.
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>Brotli Compression is an open-source compression algorithm developed by Google to server even better compression than GZIP. According to Mozilla Hacks, Brotli Compress faster than GZIP and produce better results.
- 14% smaller than gzip for JavaScript
- 21% smaller than gzip for HTML
- 17% smaller than gzip for CSS
Brotli Compression can enable in web-server & CDN.
Enable Brotli compression using CloudFlare
If you use CloudFlare, may active Brotli Compression in
Speed > Optimization > Brotli
To test your WordPress website compression, visit giftofspeed.com
42. ⏳ DNS Prefetching
DNS prefetching resolve domain names (perform a DNS lookup in the background) before a user clicks on a link, which in turn can help improve performance. Just copy this code and place into the code snippets. If you are using CDN, remember to change “//cdn.domainname.com” to your domain.
//DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.domainname.com" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//apis.google.com" />
<link rel="dns-prefetch" href="//google-analytics.com" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//ssl.google-analytics.com" />
<link rel="dns-prefetch" href="//youtube.com" />
<link rel="dns-prefetch" href="//api.pinterest.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
<link rel="dns-prefetch" href="//platform.twitter.com" />
<link rel="dns-prefetch" href="//syndication.twitter.com" />
<link rel="dns-prefetch" href="//platform.instagram.com" />
<link rel="dns-prefetch" href="//s.gravatar.com" />
<link rel="dns-prefetch" href="//s0.wp.com" />
<link rel="dns-prefetch" href="//stats.wp.com" />
<link rel="dns-prefetch" href="//cdn.jsdelivr.net" />
<link rel="dns-prefetch" href="//use.typekit.net" />';
}
add_action('wp_head', 'dns_prefetch', 0);6 more Tips to Speed up Elementor
Elementor is one of the best & powerful page builder. With proper design, structure and optimise, you don’t have problem to loads under 2sec, mine was loads under a sec before I moved to Gutenberg.
Problem is most of the site builder don’t understand how to fully utilised it, keep installing tons of add-on, make it heavy & bloat, end up worst than multi-purpose theme. And the most common complaint they said is why Elementor so slow.
Below are some tips to speed up Elementor site.
1. Improve from Elementor Experiments
Elementor on-going optimize the page builder performance you may active Optimized DOM Output, Improved Asset Loading, Improved CSS Loading & Accessibility Improvements in Elementor Settings > Experiments.
2. Use lightweight theme
Make use of header of light weight theme and optimize further to remove Elementor Icon to load.
Copy this code and place into code snippets.
//Stop Elementor's Icon
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}* Please beware that Elementor uses the font-awesome icon on Search widget icon and close icon. And Elementor builder icon, hamburger menu or close icon will NOT show. Thanks for point up Kishorchand Thangjam Best is use header from lightweight theme.
3. ⚽ Avoid use animation
If you use animation, avoid use at above the fold and defer animations.min.css
4. Make use of SVG icon and Stop FontAwesome from Elementor to load
Use SVG icon.
Replace the Copy this code and place in code snippets.
//Stop Elementor's FontAwesome
add_action( 'elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );source: Elementor documentation
As per latest 3.5 beta. Elementor will use FontAwesome as inline SVG!
Note: By default, Font Awesome icons will only load on the pages where you’ve used them, so FA won’t load on pages that aren’t using any Font Awesome icons. This brings faster performance and faster page speed to your site, which can benefit your SEO and your users’ experience. Only the CSS and fonts of the icon family you actually use are loaded. So only dequeue Font Awesome if you truly plan to not use any Font Awesome icons at all. If you dequeue Font Awesome, the icons will no longer show on any of your pages.
5. How to Avoid an excessive Dom size with Elementor
Elementor do have new function Optimise the DOM size in version 3, but still in beta.
What I suggest is reduce the usage of the column to Avoid an excessive DOM size. And I found most of the problems is cause by bad web design practices, using lot of columns to achieve a simple design.
Workaround for Avoid an excessive Dom size with Elementor
This is very simple steps, all you need is just cut down the usage of column, make use custom width to minimise the usage of column.
- On Widget > Advances > Positioning to Custom width, 50% for 2 column, 33% for 3 coloumns, 25% for 4 columns, etc.
- On Column > Horizontal Align > Center
6. Host Google font locally with Elementor Pro
If you are Elementor Pro user, can use custom font function to host the font locally. Advise to limit the usage of font weight.
And stop Google font to load in Elementor.
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );source: Elementor documentation
WordPress Speed Optimization Guide with Cache Enabler + Autoptimize + Async Javascript
- Active Autoptimize first and the setting require after Async Javascript setup.
- Install and active Cache Enabler, no setting required.
Async Javascript Setting
Async Javascript > Settings > Enable Async JavaScript
On Quick Setting, either Apply Async or Apply Defer, it depends on the website. After this, go to Autoptimize > Setting > JS, CSS & HTML
Autoptimize Setting
How to Eliminate render-blocking resources
- Go to https://pegasaas.com/critical-path-css-generator/ and paste your URL to generate critical path CSS.
- Copy the Critical Path CSS code.
- Go to Autoptimize Setting – CSS > Inline and Defer CSS and paste the Critical Path CSS code from the generator.
If you use CDN, please place your CDN URL under the CDN options. Bunny CDN is pretty good choice.
Autoptimize is integrated with
If you prefer code snippets, here are Preconnect to 3rd party domain, Remove emojis and Remove Query Strings from static resources.
* Please note that all these settings may break your website. Always keep testing for best results.
The Final Results: Google PageSpeed Insights 100
The Best solution to optimise Google AdSense Scripts
Website Google AdSense get even lower score with third-party scripts. But you can solve the problem with Ezoic.
Ezoic is a Google award-winning platform for publishers, their AI makes intelligent decisions on every page, for each visitor to automatically improve UX & revenue.
With Ezoic’s Site Speed Accelerator, it can easily help you to achieve 80+ Google PageSpeed Insight scores for mobile and desktop. That is crazy.
And most important is Ezoic helps to increase site traffic and ad revenue.
Easy way to get improve Google Core Web Vitals
If you find it very difficult to get high score on Google PageSpeed Insights or GTmetrix? Try
What is NitroPack (Google PageSpeed focused speed optimization tool)?
NitroPack is a powerful performance optimization service designed to improve the loading speed of your websites.
Page Speed: SEO Mythbusting by Google
Site Speed: What SEOs Need to Know
My Favourite Place to Learn Speed Optimization:
All kinds of crap information from affiliate marketing.
Always welcome to use this tutorials. But definitely not craps like this. Using my score for your affiliate marketing.
I always DO NOT recommend anyone use BlueHost or HostGator and I DON’T use Bluehost!
Ending Thoughts
I hope this tutorial will help you to solve your WordPress Speed Optimization problem and share this post if this tutorial really helps.
If you need WordPress Speed Optimization service, hire me to get the dirty job done. Money-back guarantee!