How to Speed up WordPress for Google PageSpeed Insights & GTMetrix (2022)
Everyone loves a good user experience with fast loading WordPress Website. Furthermore, page speed has become a ranking factor. I always recommend the loading time of the website in less than 3 seconds.
Here are 42 tips to speed up your WordPress website, plus 6 tips to speed up Elementor
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.
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.
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.
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.
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, ShortPixel, LiteSpeed Cache to reduce the page size. I usually save 50% JPEG quality in Photoshop. Further optimise with ImageOptim (FREE, Mac).
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.
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.
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.
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.
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!
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.
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 RunCloud, CloudPages or Gridpane pair with any cloud VPS provider like Digital Ocean, Vultr, Linode, or UpCloud. Their high-performance stack is super fast, way faster than any shared hosting and Cloudways.
As for the Cloud Server Control Panel, RunCloud is cheaper than Cloudpages & GridPane with better UI/UX.
Both feature easy WordPress installation, High-Performance LEMP stack, NGINX with FastCGI, PHP4, HTTP/2, MySQL8, Free SSL, Strong firewalls, and many more.
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.
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 abudget, I will suggestpaid 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. Content Delivery Network (CDN) is MUST HAVE. It helps to minimize latency and maximize performance by store all your website assets to their server around the globe. So all your website visitors will get fast user experience.
I'm currently using BunnyCDN, they are very cheap at $0.01 /GB (Europe & North America) with really great performance.
BunnyCDN have more than 40 PoPs in their networks, across 6 continents and 27 countries. All of their servers are powered by NVMe SSD technology, it can be reached in less than 30 milliseconds in most areas around the world.
BunnyCDN provides Free 14-Day Trial - No credit card required.
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.
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.
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.
21% smaller than gzip for HTML
17% smaller than gzip for CSS
Brotli Compression can enable in web-server & CDN. BunnyCDN support Brotli & GZip Compression.
Enable Brotli compression using CloudFlare
If you use CloudFlare, may active Brotli Compression in Speed > Optimization > Brotli
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.
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.
* 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
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
If you find it very difficult to get high score on Google PageSpeed Insights or GTmetrix? Try Nitro Pack, the speed optimization tool focused on Google PageSpeed.
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. NitroPack was developed to meet the ever-improving page speed requirements of the modern web. You can install and connect NitroPack in less than 2 minutes.