5 Web Design Tools Wp Beginner Youtube

Have a slow WordPress site?

This tutorial has been a work in progress for years.

It covers core web vitals and fixing specific items in the new PageSpeed Insights (PSI) using things like defer/async, delaying JS, and font optimization. It also covers new optimizations found in Elementor, Divi, Cloudflare, LiteSpeed, SiteGround Optimizer, FlyingPress, WP Hive, and other tools. You name it, it's here. And if it's not, drop me a comment with your suggestion.

This post includes affiliate links. I did my best to keep it unbiased by citing reliable sources on things like SiteGround's slow TTFB, Hostinger's fake reviews, NitroPack being blackhat, EIG + Clearlake acquisitions, Elementor/Divi bloat, and why StackPath/RocketCDN isn't great. Most bloggers/YouTubes only recommend tools that pay commissions (most of their sites don't even pass core web vitals). Other tutorials are written by host/cache plugin companies themselves. That's why I recommend joining Facebook groups to get unbiased feedback from non-affiliates.  You won't find 1 affiliate link on my website to SiteGround, Hostinger, Bluehost, NitroPack, etc.

I spent a lot of time on this and hope it's worth your time.

1. Testing Tools

Tools to learn what's slowing down your website.

• PageSpeed Insights – Google redesigned PageSpeed Insights which is the main tool you should be using to pass core web vitals. Some things are still tested on a 3G network, otherwise the results are similar to Lighthouse and the core web vitals report in Google Search Console. Thanks Google for finally updating this.
• Chrome Dev Tools – find your largest CSS/JS files under Sources → Coverage, third-party domains (Sources → Page), and other performance issues like when fonts are preloaded but aren't being used (learn how to open Chrome Dev Tools).
• CLS Debugger – view a GIF of your site's layout shifts (CLS) on mobile/desktop.
• GTmetrix – similar recommendations as PSI with a Waterfall chart which can help you find slow CSS, JS, fonts, images, third-party domains, other large files.
• KeyCDN Performance – test TTFB/DNS lookup times in 10 global locations.
• Query Monitor – find your slowest plugins. Install it, view any page on your website, then go to Queries (shown in admin bar) → Queries By Component.
• WP Hive – Chrome Extension that lets you search the WordPress plugin repository and see if a plugin impacts memory usage and PageSpeed scores.
• Wordfence Live Traffic Report – view bots hitting your website in real-time (great for checking whether bad bots are hitting your website and consuming CPU). Uninstall Wordfence when you're done since the plugin increases CPU.
• WP-Optimize – clean your database of unused tables left behind by old plugins you uninstalled. Some plugins/modules add bloat especially when they have to process data (Rank Math's Analytics module) which you'll see in WP-Optimize.

Even this post which is extremely long with tons of images/comments passes core web vitals

2. Core Web Vitals

There are 3 main parts to core web vitals: LCP, TBT, and CLS.

Largest Contentful Paint – find your largest contentful paint element in PageSpeed Insights and optimize it. This is usually a background image showing across your website. Just like you would optimize any image, you would make sure it's compressed, has proper dimensions, uses WebP, served from a CDN, preloaded, and excluded from lazy load since it loads above the fold.

Total Blocking Time – view files causing blocking time in your "avoid long main-thread tasks" and "reduce impact of third-party code" report. This is often caused by JavaScript either on your website or from third-party code. Hosting third-party code locally (fonts, analytics, etc) and deferring + delaying JavaScript should help. You can also try reducing JavaScript with minification, asset unloading plugins like Perfmatters, and avoiding JavaScript-heavy plugins.

Cumulative Layout Shift – use Google's layout shift debugger tool to view a GIF of shifting elements on your website. It's usually caused by fonts, animations, CSS, images and iframes without specified dimensions, or not reserving space for dynamic content (i.e. advertisements).

• CSS – most cache plugins have a setting for asynchronous CSS (optimize CSS delivery in WP Rocket or load CSS asynchronously in LiteSpeed Cache). Try disabling it completely, making sure it's working, or set a fallback critical CSS using a critical CSS generator tool.
• Fonts – if PSI recommends "ensure text remains visible during webfont load" in your report, it's probably from FOIT (flash of invisible text). To fix this, host fonts locally, edit your font's stylesheet, then add the font-display:swap property. Many plugins and page builders have a font-display: swap setting (Elementor, WP Rocket, LiteSpeed Cache, etc).
• Images/iframes – specify dimensions (WP Rocket + LiteSpeed have a setting to add missing image dimensions) or manually view your image's HTML and add a width/height.
• Animations – if using animations, use the CSS transform + translate properties to use animations without causing layout shifts, but I don't recommend them in the first place.
• Ads + dynamic content – reserve space for ads and other dynamic content by specifying dimensions using div wrappers. Otherwise, they can cause other content to move around.

3. DNS

GoDaddy and NameCheap have a slow DNS.

If you bought your domain through them, your DNS will also be hosted there. Both offer a premium DNS (because they know their free DNS is slow and causes latency). Instead, just use Cloudflare for your DNS which is free and much faster with lower latency. Even if you don't use Cloudflare for your CDN, their DNS is faster than the slow DNS from GoDaddy + NameCheap.

To switch your DNS to Cloudflare, sign up for a free account, add your website, and Cloudflare will scan DNS records then provide you 2 nameservers which you'll change in GoDaddy or NameCheap. That's it! Cloudflare has other performance features covered in the CDN section.

Change nameservers to Cloudflare, scan DNS, and use "Proxied" to activate the CDN

4. Hosting

Hosting is the #1 speed factor, but everyone's an affiliate (including me).

That's why you should join Facebook Groups like WordPress Hosting and WP Speed Matters. Search these groups to get less biased feedback from non-affiliates. I don't recommend some groups like WordPress Speed Up and WP Beginner since these are also controlled by affiliates.

SiteGround – slow TTFB reported by Backlinko and treats customers unfairly by banning accounts, limiting the number of websites on each plan (they reversed this), increasing prices twice, reducing/hiding support, enforcing CPU limits that force you to upgrade, and replacing cPanel with Site Tools weeks after cPanel increased prices. They've sacrificed quality for profits (Googlebot crawl issues as well). The community manager (Hristo) is an admin for the WordPress Speed Up Facebook Group and their affiliate TOS (sec. #9) forbids you from using SiteGround's trademark in bad reviews. Unethical, not fast, and many documented issues which are supposedly not their fault.

Hostinger – writes fake reviews which was admitted to by Hostinger's CEO, Arnas Stuopelis. Their employees were banned from the WordPress Hosting Facebook Group after voting for themselves in multiple Facebook polls. Up until about 2018, Hostinger employees would monitor Facebook Groups, Twitter, and other social networks, then trick people into buying Hostinger by posing as customers whenever people asked for hosting recommendations (without disclosing they're an employee).

Clearlake Brands – Bluehost, HostGator, and over 80+ hosting companies are controlled by the same parent company. It was EIG but they were acquired by Clearlake Capital Group who also has ties to WP Engine, GoDaddy, Yoast, and StudioPress. EIG and Clearlake's acquisitions have a long history of running brands into the ground. It's widely known they offer cheap hosting that is slow + low quality.

Shared Hosting – any shared hosting will result in a slower TTFB/website because it lacks server resources since you're sharing servers with hundreds of other websites. Cheap hosting typically uses cheap hardware which will also result in a slower TTFB.

Cloudways – I use their Vultr High Frequency plan and my site loads instantly after moving away from SiteGround. Requires a few extra steps to launch a server and connect your domain, but is relatively easy otherwise. Cons are email hosting costs $1/email/month, no file manager, and I don't recommend using their cache plugin (Breeze) or CDN (StackPath) so you would need to purchase WP Rocket and use something like Cloudflare/BunnyCDN. Highly recommended in Facebook Groups, rated the #1 host in 15+ recent Facebook polls, and includes a free migration. The code OMM40 saves you 40% off your first 2 months of hosting (Black Friday Deal).

NameHero – nice balance of speed, price, excellent US-based support, and cPanel. They use LiteSpeed servers which are faster than Apache. You'd be using the free LiteSpeed Cache plugin + QUIC.cloud CDN which both have great reviews and use HTTP/3 + server-level caching (faster than file-based caching by WP Rocket and most cache plugins). Their CEO (Ryan) is a genuinely helpful guy if you watch his YouTube videos. I recommend their Turbo Cloud plan which has 3GB RAM, NVME storage, but larger (WooCommerce) sites should use their cloud hosting. Includes a free migration. A2 Hosting also has LiteSpeed servers but I would personally lean towards NameHero.

JohnnyVPS – WP Johnny's recently launched hosting company who is widely respected in the WordPress community, offering fast VPS hosting on LiteSpeed. Johnny and his team's attention to detail is superb and have great Facebook reviews.

Kinsta – mainly for high traffic websites if you're willing to pay more for top-notch support with the ability to handle lots of concurrent visitors. Main con is that plans don't have enough PHP workers and force you to upgrade. Uses Google Cloud C2 servers. GridPane is also great for high traffic sites which is run by Patrick Gallagher. They don't have an affiliate program which is why most bloggers don't mention them.

5. Page Builders

Elementor, Divi, and other page builders add extra CSS, JS, and DOM elements to your site.

Since multiple PageSpeed items are related to CSS/JS, many people are leaving them for lightweight alternatives. But if you don't want to remove your page builder completely, there are ways to optimize it like hard coding your header/footer in CSS (so it doesn't use heavy page builder code). Both Elementor and Divi have also released built-in settings which can remove some of the page builder bloat (Elementor Experiments + Divi performance settings). If you're using a page builder, check your source code to see how many times your page builder appears.

• Divi, Elementor, and most page builders slow down your site.
• Most page builder addons (plugins) slow down WordPress more.
• Oxygen, GeneratePress, and Kadence are lightweight alternatives.
• Gutenberg, Genesis, and Elementor Hello theme are other alternatives.
• Use Perfmatters or Asset CleanUp to remove unused page builder assets.
• If using Astra Starter Sites, use a template built in Gutenberg (not Elementor).
• WP Johnny offers page builder removal services (I already hired him to do this).
• Elementor's theme customizer has settings to host fonts locally and preload them.
• Divi's Rocket plugin is mediocre and you're better off using WP Rocket or LiteSpeed.
• Divi has built-in minify and combine CSS/JavaScript files settings. These can do a better job (as far as compatibility goes) than cache plugins, but test their impact in speed tools.

Source: gutenberghub.com

6. Plugins

Some plugins negatively impact PageSpeed by adding CSS/JavaScript/fonts to the frontend, while other plugins increase memory usage by running resource-intensive background tasks. Even certain plugin features can add database bloat which can be measured in WP-Optimize. View this list of 75+ slow plugins and use tools like Query Monitor, WP Hive, and WP-Optimize.

• Find slow plugins in Query Monitor.
• Avoid jQuery-heavy plugins when possible.
• Use WP-Optimize to remove unused tables from old plugins.
• Use plugins with modular design and disable unused features.
• Use WP Hive to see whether a plugin is slow before installing it.
• Avoid plugins that run heavy background processes or add third-party code.
• Do things manually without plugins (creating headers, adding JavaScript, etc).

Lightweight Alternatives

• Backups – UpdraftPlus.
• Social Sharing – Grow Social.
• SEO – Rank Math or SEOPress.
• Sliders – Soliloquy or MetaSlider.
• Comments – native comments in CSS.
• Gallery – Gutenberg Gallery or Meow Gallery.
• Translate – MultilingualPress, Polylang (not WPML).
• Analytics – Google Analytics and Search Console (no plugins if possible).
• Security – no security plugin (Cloudflare, your hosting firewall, limit login attempts, strong password, latest PHP version, disable XML-RPC, rename your wp-login page).

Query Monitor – most popular way to find your slowest plugins. Install it, view any page on your website, then go to Queries → Queries By Component to view all your slowest plugins.

WP Hive – Chrome Extension that lets you browse the WordPress plugin repository and see whether plugins will impact memory usage and PageSpeed scores. However, the extension doesn't always take into account when plugins are loaded on the frontend. So even if it says Elementor doesn't impact PageSpeed, when you actually build pages using Elementor, it does.

WP-Optimize – find specific plugins and plugin features/modules that cause database bloat. Very common with plugins that have to collect data and run intensive background processes.

7. Caching

Which cache plugin you use and how you configure the settings are high impact.

Premium cache plugins are usually maintained better and have been updated for core web vitals, while free plugins (W3TC WPFC, WPSC) can lack features. If you're using a free cache plugin, you will need to learn which features your cache plugin doesn't come with, then install extra plugins. For example, you may need to install Flying Scripts to delay JavaScript, CAOS Analytics to host GA locally, WP YouTube Lyte to optimize videos, and WP-Optimize to clean your database. These features are already built-in to most premium cache plugins which means more optimizations to your site (and usually better results), yet less plugins you need to install.

WP Rocket is the gold standard unless you're using a LiteSpeed server (then use LiteSpeed Cache) or SiteGround (then use SG Optimizer). FlyingPress by Gijo Varghese is solid but is in the early phases. NitroPack is blackhat because it moves elements off the main-thread, giving you better PageSpeed scores, but not improving load times as much as the scores say they do.

Use Multiple Caching Layers
There are many caching layers. Cache plugins support browser cache, then you have object cache (Redis/memcached), and some plugins (like LiteSpeed Cache and SG Optimizer) use server-level caching which is faster than the file-based caching done by most cache plugins. Your host/CDN likely has other layers as well (Varnish)… cache plugins are just one part of it.

• Opcode cache – usually done by your host.
• Browser cache – usually done by your cache plugin.
• HTTP accelerators – done by your host (Varnish/FastCGI).
• Object cache – memcached for small websites, Redis for large/WooCommerce sites. See your host's instructions for using Redis (you may need the Redis Object Cache plugin). In cPanel, you would activate memcached or Redis under Select PHP Version → Extensions, then many cache plugins like LiteSpeed + W3TC have an option to use memcached/Redis.
• Cloudflare full page cache – caches full pages instead of only static files. Can be used with a cache everything page rule, WP Cloudflare Super Page Cache plugin, or in SG Optimizer.

Summary

• Use WP Rocket, LiteSpeed Cache, FlyingPress, or SG Optimizer.
• LiteSpeed Cache + SiteGround Optimizer use server-level caching.
• Use my tutorials on WP Rocket, LiteSpeed Cache, SiteGround Optimizer.
• Memcached is usually for smaller sites, Redis is better for larger websites.
• Some hosts/CDN have a setting to set the cache expiration which you can try setting to 180 days to "serve static assets with an efficient cache policy" to fix this PageSpeed item.

8. CDN

Cloudflare for most sites, BunnyCDN or Cloudfront for a more consistently performant CDN, or QUIC.cloud CDN on LiteSpeed. Google Cloud CDN is good but only available if you're using Google Cloud hosting (i.e. Closte). I don't recommend StackPath (it's used by RocketCDN, CloudwaysCDN, and quite a few others) because it's usually not as fast as other CDNs. If you check cdnperf.com, most CDNs are close in speed, but StackPath has had some awful months.

Cloudflare –  Cloudflare offers a free DNS, CDN, and other free/paid optimizations in their dashboard. Some hosts have an option to activate Cloudflare in the cPanel/dashboard, but you should login to your actual Cloudflare dashboard and take advantage of the features in there.

• DNS – change nameservers and use instead of GoDaddy/NameCheap's DNS (step 3).
• CDN – fine for most sites but try other CDNs and test results against Cloudflare. Enable Cloudflare CDN by changing domain name from DNS only to Proxied in the DNS settings.
• Minify – minifying with your CDN is faster than cache plugins (it's closer to end users).
• HTTP/3 – enables HTTP/3 if your host supports it (test this using an HTTP/3 test).
• Bot fight mode – block bad bots from hitting your site which can help reduce CPU.
• Brotli – faster than GZIP and provides lossless text compression when it's supported.
• APO – dynamic full page caching without having to rely on page rules which can sometimes be buggy. WP Rocket and most speed plugins aren't compatible with APO yet.
• Page rules – popular pages rules are a cache everything rule, then optimizing the wp-admin by disabling cache/performance features while setting the security level to high.
• Hotlink Protection – saves bandwidth by stopping people from copying images on your website and pasting it on theirs (most hosts/cPanel have an option to disable hotlinking).
• Firewall – great for blocking specific bots, countries, and Amazon network IPs if you're running AdSense and have experienced ad limit issues, since Amazon bots can click ads.
• Argo – use Cloudflare's real-time network intelligence to route your traffic across the fastest, most reliable paths from the origin to Cloudflare's data centers (see instructions).
• Workers – write code and deploy it on Cloudflare's edge servers (you can try workers using their playground). Workers are serverless with automatic scaling + load balancing.
• Image resizing + polish – most image optimization plugins already take care of image resizing, compression, and WebP, but will you have better control of it with Cloudflare.
• Crawler Hints – allows crawlers to time crawling and avoid wasteful crawls.
• Early Hints – caches link headers using preload/preconnect and uses 103 early hints.
• Railgun – speeds up dynamic content for visitors far away from your origin server.
• Rocket Loader – loads JavaScript (including third-party JavaScript) asynchronously to make them non-render blocking, but it can also break your website, so test it carefully.

BunnyCDN – paid CDN (same one I and WPCrafter use) and highly recommended in Facebook Groups. Fast, affordable, and consistently performant. You only pay for the zones you use. It's a push only CDN so visitors won't experience slow pulls. Their setup instructions are easy: sign up, create a pull zone, select your zones, and you'll be provided with a CDN URL. Add the CDN URL to both the BunnyCDN plugin and your cache plugin (i.e. WP Rocket → CDN → CNAME field) which is recommended by BunnyCDN's support team to serve more assets from the CDN.

QUIC.cloud – CDN built specifically to work with LiteSpeed. In the LiteSpeed Cache plugin, request a domain key, activate QUIC.cloud, and use this video tutorial by NameHero to set it up.

Summary

• If visitors are local only, you don't need a CDN.
• Choose a fast CDN (Bunny, QUIC, Cloudfront).
• CDNs offload resources to data centers and reduce CPU.
• To activate Cloudflare's CDN, change DNS only to Proxied.
• Take advantage of other speed features when using Cloudflare.
• Be careful with Cloudflare Rocket Loader (it can break your site).
• If using Cloudflare + WP Rocket, configure the Cloudflare tab for compatibility.
• If using a CDN URL, view your source code to make sure assets are served from it.
• It's faster to minify HTML/CSS/JS in your CDN, then disable these in cache plugins.
• Check cdnperf.com to see performance, uptimes, and other reports of popular CDNs.
• Some image optimization plugins (i.e. Flying Images) serve images from a CDN for free.

9. Fonts

Your GTmetrix Waterfall chart shows your font load times, number of requests, and whether they're being served locally or from an external source. Start by hosting fonts locally to prevent third-party requests from fonts.gstatic.com (self-hosted fonts are faster and easier to optimize).

• Host fonts locally (use OMGF or other tools).
• Elementor also has an option to host fonts locally.
• Divi has a few font optimizations in the performance settings.
• .woff is faster than .ttf. (.woff2 isn't supported by all browsers).
• Be minimal with the number of font families, weights, and icons.
• If fonts are served from third-party domains, preconnect the domain.
• System fonts are the fastest font types if it's supported by your theme.
• Serve fonts from your CDN (you can also try using Cloudflare workers).
• Check your Chrome Deb Tools report for any errors with preloaded fonts.
• PageSpeed Insights tells you which fonts to preload in "preload key requests."
• Use font-display: swap to fix "ensure text remains visible during webfont load."
• Avoid plugins that add extra fonts (serve them from your theme, not with plugins).

10. Images

Most image optimizations are recommended in PSI, but a few aren't.

• Properly size images – resize large images to be smaller. My blog width is 680px so I crop/resize fullwidth blog images to that size (the Zoom Chrome Extension is great for getting the perfect dimensions when taking screenshots). Since resizing images usually can't be done with a plugin (because not all images have the same dimensions), start by scaling images that appear across your site (logo, favicon, sidebar, background, footer images). Then move onto scaling images on your most important pages. Keep in mind, speed testing tools only show unoptimized images for the single the page you test. It's helpful to make a cheat sheet of common image dimensions used throughout your site.
• Adaptive images – serve smaller images to mobile using an adaptive images plugin.
• WebP – many image optimization and cache plugins can serve images using the faster WebP format (ShortPixel, LiteSpeed Cache, but not WP Rocket which doesn't actually create WebP images). Alternatively, use WebP Media Converter or test images using a JPEG to WebP converter. This will fix the "serve images in next-gen format" item in PSI.
• Compress – ShortPixel, TinyPNG, and Photoshop/GIMP are popular methods. The compression level should usually be 85% (that's what PSI uses for "efficiently encode images") but it depends on what you're willing to tradeoff in terms of speed vs quality.
• CSS sprites – combines multiple small images into 1 single image so it only creates 1 request (you would use a CSS sprite generator). I was using a CSS sprite for the circular icons on my old homepage which made it load extremely fast. You can also do this when showing multiple logos (if you have a "clients" or "featured on" section). You should only do this with small, decorative images since it can hurt SEO if you do it with regular images.
• Serve from a CDN – If you're using a CDN URL, make sure images are being served from it. Cloudflare doesn't use a CDN URL but has other image optimizations. If they're not being served from the CDN, add your CDN URL to both WP Rocket and BunnyCDN (or CDN Enabler). Or you can try enabling CDN rewrite in Perfmatters. Flying Images is a free image optimization plugin by Gijo Varghese that serves images from Statically CDN.
• Use explicit width/height – add a width/height to the image's HTML. WP Rocket, LiteSpeed Cache, and SG Optimizer all have an option to add missing image dimensions.
• Lazy load – exclude above the fold images from lazy load (logo, hero image, etc) since it would be counterintuitive to lazy load images in the viewport. Lazy load was built-in to WordPress 5.5 and many speed plugins also do this (if enabled in another speed plugin, they will deactivate native lazy loading). This fixes "defer offscreen images" in Lighthouse.
• Disable hotlinking – prevents people from embedding your images on their website which consumes bandwidth and increases CPU. You can prevent this with Cloudflare's hotlink protection or some hosts (including cPanel) have a setting to disable hotlinking. Adding your logo or watermark to images can discourage people from hotlinking them.
• Remove EXIF data – strips useless data from images like the date, time, location, and camera settings when the photo was taken. Done by most image optimization plugins.
• Downgrade quality for slower connections – plugins like Optimole let you serve lower quality images for users on slow connections (downgraded for up to 40% smaller file size).

11. Videos

Embedded videos are usually the heaviest element on a page. Just by lazy loading them and replacing iframes with preview images, you can easily shave a couple seconds off it's load time.

• Lazy load videos – done through cache plugins, Perfmatters, or WP YouTube Lyte.
• Replace YouTube iframes with preview images – the iframe (which is the heaviest element of the video) is only loaded once your visitors actually click the play button.
• Preconnect – you could theoretically preconnect to youtube.com, i.ytimg.com (thumbnail), and Roboto which is currently used as the font in the YouTube player. But test your results and make sure the preconnect doesn't have a negative impact on speed.
• Offload media files to third-party services – if you're using self-hosted videos, use a third-party service to offload them to something like Amazon S3 or DigitalOcean Spaces.

12. Database

Cache plugins with database cleanup settings don't fully clean your database.

Instead, use a plugin like WP Optimize which lets you view your actual database tables. Next, remove tables with the label "not installed" which means you deleted a plugin and it left behind crap in your database. Also be on the lookout for tables with large overhead which are usually caused by plugins or specific plugin features/modules. So yes, use your cache plugin for ongoing database cleanups, but if you install and delete plugins a lot, do a deep cleaning every so often.

• Use WP-Optimize to thoroughly clean your database.
• Remove tables left behind by old plugins you uninstalled.
• Schedule ongoing database cleanups (i.e. 1 week in your cache plugin).
• Certain plugin features create tables with large overhead especially if it has to collect/process data. Consider disabling plugin features/modules that cause bloat. Many SEO and security plugin features (Rank Math, Yoast, Wordfence, etc) add database bloat.

13. CSS + JavaScript

Quite a few PSI recommendations are related to CSS/JavaScript: render-blocking resources, reduce unused CSS/JavaScript, third-party code, minimize main-thread work, minify, and more.

The first step is to find your largest CSS + JS files and learn which plugins (or other sources) they're coming from. Chrome Dev Tools and your GTmetrix Waterfall chart can help find them.

Find heavy JavaScript in Chrome Dev Tools → Coverage

Large CSS/JS files are usually related to slow plugins, page builders, and third-party code (review those sections if that's the case). On top of that, here are a few ways to optimize them.

• Minify CSS/JS with your CDN.
• In Elementor Experiments, activate improved asset/CSS loading.
• In Divi's performance settings, activate all CSS/JS optimizations settings.
• Inline critical CSS (usually above the fold CSS) and defer non-critical CSS.
• Delay third-party JavaScript using WP Rocket, Perfmatters, or Flying Scripts.
• Don't always combine CSS/JS. View how large your CSS/JS files are in your GTmetrix Waterfall chart and only combine if they're 10KB or smaller (suggested by WP Johnny).
• Try Autoptimize and Async JavaScript plugin for better control of CSS/JS optimizations.
• Hard code your header/footer/sidebar in CSS so it doesn't use heavy page builder code.
• Remove unused CSS using tools like WP Rocket, LiteSpeed UCSS, PurifyCSS, RapidLoad.
• Use asset unloading plugins to remove CSS/JS where they don't need to load (next step).

14. Asset Unloading

Some plugins, CSS, and JS load across your entire website when they only need to load in certain areas. Asset unloading plugins let you remove assets where they're not being used. This can significantly reduce unused CSS/JavaScript which are PageSpeed Insight recommendations.

Perfmatters and Asset CleanUp are popular asset unloading plugins which both have bloat removal settings as well. I like Perfmatters since the UI/UX is better, lets you unload assets on mobile, and includes Regex to remove CSS/JS/plugins based on URL patterns. Asset Cleanup has a pro version which can unload custom CSS and use RegEx. Choose the plugin best for you.

Once you install a plugin, use the script manager to see which assets are loading on the page. Then it's a matter of figuring out which content you can disable them on (current URL, pages, posts, RegEx, or "everywhere but" options). Asset CleanUp has a test mode, otherwise test carefully since disabling assets can break your site. Consider setting up a staging site for testing.

Examples:

• Disable slider plugins on content without sliders.
• Disable schema plugins on content without schema.
• Disable contact form plugins on content without forms.
• Disable WooCommerce scripts and styles on non-eCommerce content.
• Disable email plugins (i.e. MailChimp) on content without email signups.
• Disable social sharing plugin on all pages (since it's usually for blog posts).
• Disable unused functionality in your page builder (see this post for Elementor).
• Disable page builder plugins (i.e. Ultimate Addons) where they're not being used.

15. Third-Party Code

Third-party code is anything on your website that creates requests from third-party domains. You can view your third-party domains in PSI or using Chrome Dev Tools → Sources → Page.

Some files can be hosted locally (Google Analytics + fonts). Others can be optimized by delaying it's JavaScript and using prefetch/preconnect to establish early connections. Other third-party code can be optimized too (for example, Divi's performance settings defers third-party scripts).

• Google Analytics – host locally in WP Rocket, Flying Analytics, or Perfmatters. Perfmatters also lets you use a smaller tracking code (minimal, minimal inline, or analytics.js) and disable display features to prevent a 2nd request to Doubleclick.
• Google Fonts – host locally to avoid requests from Google Fonts + Font Awesome.
• Google Tag Manager – delay JavaScript, clean up tags, avoid coding tags in the header.
• Google Maps – lazy load iframes and only embed Google Maps on contact + local SEO pages (not in the footer). Or take a screenshot of the map and link it to driving directions.
• Google AdSense – delay JavaScript and reserve space for ads to prevent layout shifts. AdSense can absolutely destroy your PageSpeed scores and is awful for user experience.
• YouTube – lazy load videos, replace YouTube iframes with preview images, and delay JavaScript. WPCrafter posted a video on speeding up videos if you're using Elementor.
• Social Media – use a fast social sharing plugin (Grow Social) and avoid embedding too many social media widgets (Facebook Like boxes, Twitter embeds, and Instagram feeds).
• Gravatars – use a local avatar plugin (WP User Avatar isn't good anymore), cache Gravatars if your cache plugin supports it (LiteSpeed Cache does), and delay Gravatars.
• ReCaptcha – use an asset unloading plugin to only load ReCaptcha where it's being used.
• Facebook Pixel – delay JavaScript (included in WP Rocket's delay JavaScript default list).

16. Prefetch, Preload, Preconnect

Tells browsers to download resources ahead of time.

Prefetch/preconnect establish early connections to third-party domains while preload is for self-hosted files (usually fonts but it can also be scripts, styles, images, media, or documents). These can be done manually with a simple line of code or many other plugins support browser resource hints (most cache plugins, Perfmatters, Asset CleanUp, Pre* Party Resources Hints).

• Prefetch – helps browsers anticipate third-party domains by performing a DNS lookup in the background. Find these domains in your PageSpeed Insights or Chrome Dev Tools report, copy all their domains (or see this list of common domains), then prefetch them.
• Preload – often used for fonts or links. Preloading fonts help browsers discover fonts in CSS files. PSI should tell you which fonts to preload under "preload key requests." Preloading links downloads a page when users hover over a link so by the time they click it, the page loads instantly This is done in WP Rocket, LiteSpeed Cache, and Perfmatters.
• Preconnect – establishes early connections to important third-party origins. Common with CDNs and third-party fonts like fonts.gstatic.com. Most cache plugins automatically add preconnect when enabling certain font/CDN settings, but check their documentation.

          <link rel="dns-prefetch" href="https://connect.facebook.net"> <link rel="dns-prefetch" href="https://www.googletagservices.com">                  

          <link rel='preload' href='/image.png'            as='image'> <link rel='preload' href='/font.woff2'            as='font' crossorigin>        

          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>                  

17. Bloat Removal

Bloat is anything on your website you don't need.

This can be admin notifications, old post revisions, unnecessary tasks running in the background, database bloat, or heartbeat, autosaves, and cron jobs running too frequently. Removing bloat is good because it usually reduces CPU usage and frees up server resources.

Most "bloat" can be disabled using Perfmatters, Asset CleanUp, or dedicated bloat removal plugins like Disable WooCommerce Bloat, Widget Disable, and Unbloater. Controlling the Heartbeat API and limiting post revisions can be done with a simple line of code. You should also go through your theme/plugin/hosting settings and disable all functionality you don't need.

• Avoid bloated themes.
• Delete unused media files.
• Delete unused themes/plugins.
• Disable usage tracking in plugins.
• Disable unused features in plugins.
• Replace WP cron with real cron jobs.
• Limit post revisions (5-10 is sufficient).
• Deep clean your database with WP-Optimize.
• Protect your blog/forms from comment spam.
• Remove jQuery Migrate if your plugins don't use it.
• Heartbeat control (120s frontend, 0s backend, 60s editor is fine).
• Disable unused features in your hosting account: email, DNS, FTP, etc.

18. Reduce CPU

Reducing CPU frees up server resources and can improve TTFB. It also helps avoid CPU overages (a common hosting issue) which can prevent forced upgrades and save you money.

Some methods I already covered in this guide: heartbeat, post revisions, autosave interval, Cloudflare bot fight mode to block bad bots, offloading resources to CDNs, avoiding bloated themes/plugins, disabling unused plugin features, and definitely not using cheap shared hosting.

Here are a few extra tips:

• Increase memory limit – increase memory limit to at least 256B (if not more).
• Disable plugin usage sharing – it's very small, but I never share my plugin data.
• Tweak server settings – WP Johnny has instructions in his speed guide (section #8).
• Control cron jobs – control cron jobs and replace WordPress cron with a real cron job.
• Disable trackbacks/pingbacks – can be done manually or using plugins like Perfmatters.
• Use AWstats – most hosts have AWstats which pinpoints where CPU is being consumed.
• Protect login page  – login pages are common targets for bots. Limit login attempts, add a Cloudflare page rule to set security level to high, and move your login page to block them.

19. Comments

If your blog has lots of comments, they usually take a long time to load especially if you're showing Gravatars or using a comments plugin like Disqus or wpDiscuz (which I don't suggest).

• Use native comments.
• Use a local avatar plugin.
• If using Gravatars, cache and delay them.
• If using Disqus, use the conditional load plugin.
• Break comments in your WordPress discussion settings.
• Try the Lazy Load for Comments or Lazy Social Comments plugin.
• If using a plugin like wpDiscuz, consider adding it to delayed JavaScript.
• wpDiscuz also options for lazy load and initiating AJAX loading after page.
• Use a "load more comments" button on mobile for posts with lots of comments.

20. Mobile

Poor mobile scores in PageSpeed Insights is a common issue. Most desktop optimizations transfer to mobile so always start with broad optimizations first. Otherwise, here are a few tips:

• Make sure themes/plugins are responsive.
• Perfmatters lets you unload assets specifically on mobile.
• Use Google's layout shift debugger to find mobile CLS issues.
• Replace sliders with images on mobile (or just don't use sliders).
• Don't use AMP (Kinsta's conversions dropped 59% when using AMP).
• Use an adaptive images plugin to serve smaller images to mobile devices.
• Enable mobile caching if your cache plugin supports it (or get one that does).
• Downgrade image quality for slower connections (you can do this in Optimole).
• Use mobile editors (like Elementor's) to remove heavy elements on mobile.  Even removing a few images, widgets, or replacing the slider with a static image can help.

21. WooCommerce

WooCommerce sites have extra scripts, styles, cart fragments, and plugins.

Never cheap out on hosting if you're running a WooCommerce website. But besides the obvious (everything else in this guide), here are a few WooCommerce-specific optimizations.

• Clear WooCommerce transients + customer sessions.
• Disabling cart fragments is usually not an option, but will improve speed.
• Try the Disable WooCommerce Bloat plugin which removes a ton of bloat added by WooCommerce and disables WooCommerce scripts/styles on non-eCommerce content.

22. Update Software

Keep your software updated. WooCommerce and some page builders (Elementor and Divi) have a system status section showing your software details. Also, stay informed when your host releases an update (PHP version, Redis, etc). You'll likely need to make these updates manually.

• PHP version
• MySQL + MariaDB Version
• WordPress core, themes, plugins, frameworks

23. Speed Plugins

A list of recommended speed plugins. You don't need all these since many cache/optimization plugins already include some of these features. Otherwise, you might consider a few of these.

24. Fix Items In PageSpeed Insights

Common solutions to PageSpeed Insight recommendations.

• Avoid an excessive DOM size – avoid slow page builders, use less columns/widgets, lazy load, paginate comments. If using Elementor, enable "Optimized DOM Output" and hard code header/footer if using page builders.
• Avoid chaining critical requests – defer/async JavaScript below the fold, combine CSS and JS into single files, take advantage of preload + preconnect.
• Avoid document.write() – most often associated with a dynamic year in the footer area. Instead, manually add the current year without making it dynamic.
• Avoid enormous network payloads – reduce page size and number of requests. It's a generic recommendation involving anything related to reducing page size.
• Avoid large JavaScript libraries with smaller alternatives – most plugins rely on jQuery instead of large JavaScript libraries, but you should still try to eliminate jQuery from your site by using jQuery-free plugins and disabling jQuery migrate.
• Avoid large shift layouts – test your site in Google's Layout Shift Debugger and fix shifts caused by fonts, buttons, images, CSS, and cookie notices that "fly in." Try disabling "optimize CSS delivery" in WP Rocket or "load CSS asynchronously" in LiteSpeed Cache. Use font-display: swap, CSS transform + translate properties in animations, and add dimensions to images/iframes, ads, and dynamic content.
• Avoid multiple page redirects – use the correct HTTPS and WWW or non-WWW version throughout your site. Plugins can also cause redirect errors.
• Avoid non-composited animations – fix animations that shift or appear janky.
• Avoid serving legacy JavaScript to modern browsers – don't use outdated JavaScript (ES5 standard). Using reliable themes/plugins should prevent this.
• Defer offscreen images – lazy load images (built-in to WordPress or use a plugin (Optimole) which lazy loads without jQuery and serves images from Cloudfront.
• Efficiently encode images – generic recommendation to optimize your images.
• Eliminate render-blocking resources – generate critical CSS and defer JavaScript. Autoptimize and the Async JavaScript plugin can usually fix these.
• Enable text compression – use GZIP/Brotli for text compression (ideally Brotli).
• Ensure text remains visible during Webfont load – add font-display: swap to font CSS, with a plugin, or add &display=swap to end of the Google Font URLs.
• Keep request counts low and transfer sizes small – reduce requests on your site or from third-party code. Minify CSS/JS, optimize images, and fix redirect issues.
• Largest contentful paint – how long the main content on a page takes to finish rendering (multiple factors are involved). Primary ways to improve LCP are to reduce server response times, choose a data center close to visitors, use a CDN, add browser resources hints like preconnect and prefetch, use server-side caching, inline critical resources, defer non-critical resources, use critical path CSS, avoid heavy scripts above-the-fold, reduce DOM size, ensure text remains visible during font load, optimize images, use adaptive images, and minify CSS/JS.
• Minify CSS – removes unnecessary characters from CSS (done via cache plugin).
• Minify JavaScript – removes unnecessary characters from JS (via cache plugin).
• Minimize main-thread work – generic recommendation to optimize JavaScript.
• Minimize third-party usage – view your third-party code in PSI or Chrome Dev Tools. Host files locally, lazy load videos, delay JavaScript, replace YouTube iframes with preview images, Use a smaller GA tracking code and disable remarketing/advertising. AdSense can create many third-party requests.
• Preconnect to required origins – preconnect CDN URLs and third-party fonts.
• Preload key requests – PSI should usually tell you which files to preload.
• Properly size images – avoid huge images and resize to smaller dimensions. Try creating a cheat sheet of dimensions for logo, blog images, sidebar images, etc.
• Reduce JavaScript execution time – see sec. #13 in this guide to optimize JS.
• Reduce server response times – avoid shared hosting, SiteGround, EIG brands.
• Remove duplicate modules in JavaScript bundles – often caused by importing code which can result in duplicate modules (JS bundles) from multiple sources.
• Remove unused JavaScript/CSS – see sec. #13 in this guide to optimize CSS/JS.
• Serve images in next-gen formats – convert images to WebP format using a plugin and enable WebP caching in WP Rocket's Media settings if you're using it.
• Serve static assets with an efficient cache policy – hosting, CDNs, and cache plugins often have an option to set a cache expiration time. Set it to 180 days.
• Use video formats for animated content – convert any animated GIFs to video.
• User timing marks and measures – get additional metrics in PSI and Chrome Dev Tools by adding the User Timing API. This is not a pass/fail test; it only provides additional speed data used to pinpoint where time is being spent.
• Uses passive listeners to improve scrolling performance – some themes/plugins use '"addEventListener" (modify it to be passive). There's also an issue with a WordPress core script (js/comment-reply.min.js) creating non-passive listeners.

25. Where To Get Help

If you're looking to do it yourself, join the WP Speed Matters + WordPress Hosting Facebook groups and search for answers there. Many people have already asked questions about improving specific items in Lighthouse, hosting recommendations, cache plugins, CDNs, etc.

Hire Help

• WP Johnny – Johnny offers a variety of speed services from general optimizations to page builder removal and hard coding headers/footers in CSS. I hired him to replace Elementor with Gutenberg (among other things) and he continues to help me to this day.
• BDKamol – I've been working with the same overseas freelancer since 2012. His name is Pronaya and he specializes in WordPress speed optimization. You can hire him by signing up for an account on freelancer.com, then view his profile. He has a perfect 5 star review.

That's all folks!

Really hope this helped! If it did, drop your new scores + load times in the comments :)

Cheers,
Tom

5 Web Design Tools Wp Beginner Youtube

Source: https://onlinemediamasters.com/slow-wordpress-site/

Posted by: goodssupostabothe.blogspot.com

Share this post