I will try to keep this simple and quick as possible. So let's go!
Starting Point:
View attachment 134667
View attachment 134668
View attachment 134669
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.)
Code:
//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.
View attachment 134671
View attachment 134672
Yes, I go with the webp format since its lighter but keeps the quality good and the size waaaaay lower that PNG or JPG can go. This is really optional if you don't like the WEBP just disable it.
- Serve static content from a subdomain. AKA cookie-free domain!
This will greatly reduce the service time of your static content there for the load time will gain boost!
This is a bit technical and I strongly advise to make a backup before proceeding to this.
Let's start with the cPanel (aka subdomain creation)
1. Go to your cPanel > Subdomains > Create a Subdomain
2. I will name the subdomain as static (static.website.tld)
3. Change Document Root to
public_html/wp-content
4. if you are using Cloudflare go to your Cloudflare dashboard and add new record
A, name it
static and point it to your IP.
View attachment 134673
5. Now, look for wp-config.php and insert the following lines
Code:
/** Cookie-Free Domain. */
define("WP_CONTENT_URL", "https://static.website.tld");
define('COOKIE_DOMAIN', $_SERVER['HTTP_HOST'] );
I guess I don't need to tell you to change "website.tld" to your domain name.
6. Now you must redirect all the posts to the new subdomain. Simply, run the following command in the SQL Database via phpMyAdmin.
Code:
UPDATE wp_posts SET guid = REPLACE(guid,'website.tld/wp-content/','static.website.tld/')
Code:
UPDATE wp_posts SET post_content = REPLACE(post_content,'website.tld/wp-content/','static.website.tld/')
View attachment 134679
7. After completing all of these steps, go to your page and refresh it. See if there is any error.
EXPECTED ERROR: Problem loading web fonts, FontAwesome, etc. due to CORS policies
8. (Fix) I'm using RankMath for this one. But you can edit it directly or with any other plugin that can do it.
Go to your .httaccess file and add the following on the top line.
Code:
#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
Note: Change "website" to your domain name and ".com" to your own TLD.
- Prevent Contact Form 7 from loading on every page.
I don't know why is this, but it happens a lot and what's weird it's not on every WP installations. 3 of 5 of my websites have this issue. This is a pretty simple one.
1. Go to functions.php (public_html/wp-includes)
2. Add the following code on the bottom.
PHP:
// 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') ) {"
- Remove version entirely from the source files
WPRocket should do the job with this, but if you have css/js files that are excluded WPRocket won't touche them in any way, so this one is coming in handy to those files.
1. Go to functions.php (public_html/wp-includes)
2. Add the following code on the bottom.
Code:
// 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 );
Time for results after doing all these simple neat tricks that are done in 10 Minutes after doing it a few times.
View attachment 134686
View attachment 134687
View attachment 134688
Thats it folks.
