SEO Optimizing WordPress for a 1-second load time: A comprehensive guide! 💻🚀

[Aashiq]

I will try to keep this simple and quick as possible. So let's go!


Starting Point:








Details about the page:
- Namecheap Stellar Business (don't judge me, my Stellar Plus was turning shit so I manage to get $25 off on top of their active promotion, so grabbing this for $26~ a year is great!)
- Medium Size Theme (Almost LIGHT but not really)
- Running 16 Plugins
- 5 Posts as of now.
- All tests are performed on the homepage.

LET'S GO!

- WPRocket

I would highly suggest running WPRocket The plugin is a killer!
I wouldn't go with complete set up for this one cause for some users my settings might be conflicting.

USE CLOUDFLARE (At least, Cloudflare is what I use.)

I will focus on Prefetch DNS Requests.

You can reduce latency by setting DNS Lookups to perform in the background with DNS prefetching
You can set this for assets such as Google Analytics, Font Awesome, Google Fonts, and others.
You can use https://prefetch.xyz/ too see where your website is sending requests, but if this fails for you (cause it did for me and its missing at least a few more here is a full list, compare it to your website and add what you need.)


//maps.googleapis.com //maps.gstatic.com //fonts.googleapis.com //fonts.gstatic.com //ajax.googleapis.com //apis.google.com //google-analytics.com //www.google-analytics.com //ssl.google-analytics.com //youtube.com //api.pinterest.com //cdnjs.cloudflare.com //pixel.wp.com //connect.facebook.net //platform.twitter.com //syndication.twitter.com //platform.instagram.com //disqus.com //sitename.disqus.com //s7.addthis.com //platform.linkedin.com //w.sharethis.com //s0.wp.com //s1.wp.com //s2.wp.com //s.gravatar.com //stats.wp.com //www.googletagmanager.com //www.googletagservices.com //adservice.google.com //pagead2.googlesyndication.com //tpc.googlesyndication.com //bp.blogspot.com //1.bp.blogspot.com //2.bp.blogspot.com //3.bp.blogspot.com //4.bp.blogspot.com //ajax.microsoft.com //ajax.aspnetcdn.com //s3.amazonaws.com //code.jquery.com //stackpath.bootstrapcdn.com //use.fontawesome.com //player.vimeo.com //github.githubassets.com //referrer.disqus.com //c.disquscdn.com //0.gravatar.com //2.gravatar.com //1.gravatar.com //ad.doubleclick.net //googleads.g.doubleclick.net //stats.g.doubleclick.net //cm.g.doubleclick.net //stats.buysellads.com //s3.buysellads.com //fonts.googleapis.com/

As I said before, prefetch.xyz might not show everything, so what you need to do is Open DevTools (F12 on Chrome) and refresh your browser, you will see almost every single request. Cross-check them with the list and make your own, I mean there is no reason to Prefretch buysellads if you don't run buysell ads.


- Imagify
Imagify is a plugin that compresses and convert your images, it's a pretty neat one! Here are the settings that I use.




I prefer using the webp format for its ability to maintain image quality while significantly reducing the file size, making it a better option than PNG or JPG. However, if you don't like webp, you can always disable it.

To optimize the loading time of your static content, you can serve them from a subdomain, which is also known as a cookie-free domain. This process requires some technical knowledge, so it's recommended to backup your data before proceeding.

Here's how you can create a subdomain using cPanel:

1. Access your cPanel, navigate to Subdomains and click Create a Subdomain.
2. Enter the name of your subdomain, such as static.website.tld.
3. Change the Document Root to public_html/wp-content.
4. If you are using Cloudflare, you need to create a new A record in your Cloudflare dashboard. Name it "static" and point it to your IP address.

5. Insert the following lines into wp-config.php:

/** Cookie-Free Domain. */ define("WP_CONTENT_URL", "https://static.website.tld"); define('COOKIE_DOMAIN', $_SERVER['HTTP_HOST'] );


I assume it's unnecessary to remind you to substitute "website.tld" with your actual domain name.

1. To redirect all posts to the new subdomain, execute the subsequent command within phpMyAdmin on the SQL Database.

UPDATE wp_posts SET guid = REPLACE(guid,'website.tld/wp-content/','static.website.tld/')

UPDATE wp_posts SET post_content = REPLACE(post_content,'website.tld/wp-content/','static.website.tld/')

1. Once you have finished following these steps, proceed to your page and refresh it to check for any errors.

EXPECTED ERROR: The web fonts such as FontAwesome may fail to load due to CORS policies.

1. (Solution) In my case, I am using RankMath to resolve this issue. However, you can use any other suitable plugin or edit it manually.

To fix this problem, access your .htaccess file and add the following code at the beginning of the file.

#CORS FIX <IfModule mod_headers.c> <IfModule mod_rewrite.c> SetEnvIf Origin "http(s)?://(.+\.)?(static.website\.com|website\.com)(:\d{1,5})?$" CORS=$0 Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS Header merge Vary "Origin" </IfModule> </IfModule> #CORS FIX END

Please replace "website" with your actual domain name and ".com" with your own top-level domain.


To stop Contact Form 7 from loading on every page, you can add a few lines of code to your WordPress functions.php file. The steps to do this are as follows:

1. Locate the functions.php file in your WordPress installation. It is typically found in the wp-includes directory.
2. Add the following code snippet at the bottom of the functions.php file:

// Remove contact form 7 add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' ); add_action('wp_enqueue_scripts', 'load_wpcf7_scripts'); function load_wpcf7_scripts() { if ( is_page('contact') ) { if ( function_exists( 'wpcf7_enqueue_scripts' ) ) { wpcf7_enqueue_scripts(); } if ( function_exists( 'wpcf7_enqueue_styles' ) ) { wpcf7_enqueue_styles(); } } }

If you have CF7 on multiple pages, change " if ( is_page('contact') ) {" to "if ( is_page('contact|page1|page2|page3') ) {"

Get rid of all references to "version" in the code.

This should already be taken care of by WPRocket, but if you have any css/js files that are excluded, WPRocket won't touche them at all, so this comes in handy.
First, open functions.php in the wp-includes folder (public_html).
2. Insert the following code at the end.

// Remove version entirely from the source files function sh_remove_ver_css_js( $src_file ) { if ( strpos( $src_file, 'ver=' ) ) $src_file = remove_query_arg( 'ver', $src_file ); return $src_file; } add_filter( 'style_loader_src', 'sh_remove_ver_css_js', 9999 ); add_filter( 'script_loader_src', 'sh_remove_ver_css_js', 9999 );

After a few repetitions, these simple neat tricks can be completed in under 10 minutes.












Thats it boys!

 

[MuddyRadar]

You're welcome! I'm glad I could provide you with the information you need. When you begin your WordPress site, feel free to reach out if you require any further assistance. Good luck with your venture!

 

[MuddyRadar]

1. Hey, do I need to buy a domain for the subdomain or is it free?
2. 
   
3. Secondly, what about backlinks on the main domain? Will they be affected?
4. 
   
5. What will appear in search results when users click on the site? Will it be www.site.com or static.site.com?
6. 
   
7. Hey, is it necessary to purchase a domain for the subdomain, or is it provided for free?
8. 
   
9. Additionally, I'm curious about the impact on backlinks for the main domain. Will they be influenced?
10. 
    
11. Lastly, when users click on the site in search results, which URL will be displayed: www.site.com or static.site.com?