Speed up Your WordPress Website and Avoid Plugins | Add This Script to .htaccess

Discussion 2: Speed up Your WordPress Website and Avoid Plugins | Add This Script to .htaccess
Mew 👑
Speed Up Your WordPress Website And Avoid Plugins With These
Gzip – Add to .htaccess
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE!no-gzip!gzip-only-text/html
Header append Vary User-Agent
</IfModule>
Cache Expiration headers – Add to .htaccess
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
DEFER LOADING – ADD TO FUNCTIONS.PHP
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
63 👍🏽 14 💟 78
[filtered from 59 💬🗨]

👈📰
💬🗨

Barry
Are these all generic codes for any wp website?

Mew ✍️👑 » Barry
Yup 🙂

Alix
Anything to be aware of that it might break?

Mew ✍️👑 » Alix
Nope. Have never seen these break a website when installed unless you forget a line or don't copy and paste it in correctly.
Alix » Mew
Thanks for sharing 🙂
Richelle
Make sure gzip is enabled on the server first 😉
Some do not have it automatically enabled.
💟👍🏽2
Alix » Richelle
Thank you!!

Luca
Just to add some information: you need to activate GZIP compression to Apache on your VPN or hosting provider

Mew ✍️👑 » Luca
Mostly enabled by default on all major hosts including: GoDaddy, Kinsta, WPX, WPEngine, BlueHost etc etc.
Luca » Mew
Yeah depends on the host but this is just for some use cases
McArthur » Mew
Just found out today that it is not enabled on WP engine if you have a shared account, and they will not enable it on those servers if asked. However, it is available on dedicated servers. (I have both types with WP engine.)

Molnar
Does installing wp rocket do the same thing?

Mew ✍️👑 » Molnar
Yup, but includes a GUI which makes extra requests.
As Corny Mentioned above can help with CDN and Image handling or you can just manually optimize further in probably less than an hour or so

Cory
Final thought, this is literally almostthe exact string wp-rocket does. but they do it better and you dont have php file updates every time theme changes. 💁‍♂️

Mew ✍️👑 » Cory
How often does a theme change lol? I never change them after we build a website. 3-5 years?
Also, WP rocket has a back end GUI meaning it will always be heavier than just adding this real quick 🙂
Cory » 6073Mew
Agree to disagree on this one. 🙂
Rajesh
Backend (on the admin side ) GUI never impacts the frontend load or performance in WordPress
Mew ✍️👑 » Rajesh
Except for when there's a <script> call on the front end, which you can check for in 'view page source'
Rajesh
Are you saying script call loads the admin GUI?
Mew ✍️👑 » Rajesh
Nope, I am saying any plugin you use adds extra scripts to the website which can be avoided with manual code
Rajesh » Mew
Not necessarily to the frontend of your website…and even if they load a script to the frontend, they can defer it and that takes care!
and whatever you have done above only takes care of client-side caching that speed up things when a visitor "revisits"! Cache plugins take care of server-side caching as well! This includes caching DB queries, opcode caching, WordPress's object caching and more.
Mew ✍️👑 » Rajesh
Add WP-Rocket to a website. Go to the front end and inspect the page source. Is there a script tag? If the answer is yes it's slowing the page down.
I'm not sure why you're over complicating this.
Alpas » Mew
But it doesn't. Rajesh is right. You are probably looking the website as an admin. That's why I stopped arguing with you about plugins and bloat. Stick with SEO man.

Nick
How do I avoid plugins with code snippets I can't review tho

Mew ✍️👑 » Nick
Do you mean editing your plugins? I'm not sure what the question is my friend 🙂

👈📰

Discussion 1: Why did These SEO Plugins Fail to Improve My Website Speed?
Ilias
So I have this project I'm working on, I got a paid theme, built the entire site, and then realized its mobile score was shit…
Been trying to debug this for 2 days now, I've tried all the usual plugins I normally use and none of them are making it better. I think the issue is the site is not mobile-friendly
here are the plugins I tried:
-auto-optimize
-wp rocket
-wp fastest cache
-hummingbird
-w3 total cache
I didn't use them all at the same time
Anyone got this issue before that managed to fix without changing the theme?
Any feedback would be appreciated thanks
[filtered from 51 💬🗨]

👈📰

why these seo plugins didnt make changes as well onto my site
🔗🏹

why these seo plugins didnt make changes as well onto my site
🔗🏹
💬🗨

Ciprian
There's lots of things to consider:
Can you modify the purchased theme? If yes:
1. Try to update the Google Fonts URL and switch to version 2.
2. Consider removing Google Fonts altogether and use a modern native font stack: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
3. Remove all caching plugins.
4. Take your images through TinyPNG or TinyJPG or Kraken.io or JPEG.io. Manually, not automatically, do not install Smush or other image compression plugins.
5. Try to join/merge CSS files, if possible. Manually.
6. Try to join/merge JS files, again manually.
7. Get rid of Font Awesome if you're using it.
8. Use Cloudflare. 👍🏽7

Ilias ✍️
thats some solid pointers, thanks ! you got any articles on how to merge css, js files manually?
Ciprian » Ilias
Yes, by creating a new file – bundle.css – and manually copying the code from each of the theme's CSS files. However, if you only 2 or 3, then it's fine, leave them like that.
Note that lots of these themes have bloated sliders such as Revolution Slider and Layer Slider. Get rid of them, disable them somehow.
I could take a look at your site, if you could PM me or post it here, later this weekend or on Monday. 👍🏽1
Ilias ✍️ » Ciprian
cool will try this. Thanks ! 👍🏽1
Thang » Ciprian
2. Consider removing Google Fonts altogether and use a modern native font stack: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
– Modern Native Font stack or Safe fonts ? if you don't care about system fonts then it is the fastest but not reliable because you don't want everyone will be using arial fonts
3. Remove all caching plugins – Why ? Caching improve performance for returning user not so much for first time
4. Take your images through TinyPNG or TinyJPG or Kraken.io or JPEG.io. Manually, not automatically, do not install Smush or other image compression plugins –
– How do you optimize images for Mobile and Tablet users ? You can't do it manually because WordPress or theme or Page builder will automatically create srcset attribute for Desktop, Tablet and Mobiles devices
I recommended using Shortpixel or any image optimizer will work
or Use Image CDN like Cloudflare pro or Cloudinary etc
5. Try to join/merge CSS files, if possible. Manually – HTTP/2 or HTTP/3 no need , but i prefer to do it and at the same time Generate Critical CSS and preload merge stylesheets
6. Try to join/merge JS files, again manually ( if JS are relatively low) – i wouldn't do it because it increase TTI best is to defer instead
7. Get rid of Font Awesome if you're using it – Yap remove FontAwesome icon are great it can save upto 100 KB but if your Hamburger menu, search icon and icon use FontAwesome icon you will see broken icon. Best approach is Generate Data-URL/DataURI
Hope it make sense

👈📰

John
Probably shity coded theme…how’s your “real” load time…my websites usually don’t get to good with scores but real loading speed is always under 3sec… 👍🏽1

Ilias ✍️
around 4-5s
John » Ilias
on mobile??…then you good…
Ilias ✍️ » John
desktop its close to that on mobile
John » Ilias
make duplicate on some other place and if you have time start trying everything what you didn’t… to be honest, it’s a bit strange that you cannot do anything about your speed after trying all that…is maybe you hosting problem…
Ilias ✍️ » John
no when it's hosting it shows in the server response time, I'm pretty sure the issue is with the code files. Also i ran some tests on local server with a duplicate version of the site and it didn't work very well.
John » Ilias
possible… if theme is badly coded usually is a nightmare to optimize all that, how you can optimize a mess…

Hoque
Those plugins are good if you configure it properly. Specially 'WP Rocket' is a good plugin. It can solve almost all errors which you have shown in screenshots if you do settings properly. I have optimized couples of site speed with 'WP Rocket' and site speed is improved. I can help you with that if you need. 👍🏽1
Ryan
Merging CSS/JS manually is no good here specially if you‘re using lots of plugins(new plugin update will overwrite all your changes)
Use WP Rocket or a free one Fastest Cache, configured Auto optimized fo its full potential, a lot of goddy in there.
To avoid render blocking move your JS to the footer section and only load CSS before the fold and the rest after the DOM is loaded.
Consider adding dns-prefetch and defer JS as well.
Don’t use cached plugin only if you store it in your server disk, consider using free CDN (cloudflare would do)
Optimize your images lots of free tools out there(don’t use plugin) tinypng or if you’re an experienced coder go with imagemin npm
Reduce use of nonsense plugin( code it)
I can write till the kingdom come LOL but really if your theme is shitty then just good luck 🙂
I’m using my phone sorry for typo if any. 🤭1

Ilias ✍️
yea exaclty i think ill just switch themes at this point
Ryan » Ilias
Might be a good option but one thing to consider is the functionality, pro advise if it only display basic design you can use WP builtin theme + Elementor or Divi
At-least those builder know how to load their modules or code it, in that I advise use starter theme + ACF 😉 👍🏽1
Ilias ✍️ » Ryan
thanks for the feedback 👍🏽1

Thang
I am not considered as an expert but i am pretty good at it 🙂 and forgive me for my bad English
It is Long answer enjoy
Let me share you some insights –
-auto-optimize is not a caching plugin
-wp rocket
-wp fastest cache
-hummingbird
-w3 total cache
From 4 of them WP Rocket is better and easy never use it but i heard good thing from communities or use Swift performance free or pro version it is worth checking out.
From 2 screenshot (opportunity section)
1. Preload key requests – Click the tab you will fonts, icon etc will be there, if you use WP rocket you can enable that settings ,if not
Go to theme hook if your theme provide and this to header tag
<link rel="preload" href="file path" as="font" type="font/woff2" crossorigin="anonymous">
What it does is give higher priority to your assets so they load earlier but will not execute it and when fonts or stylesheets calls when needed these preload assets will execute so this will fixed some of Flash Of Unstyled Content.
Newly Added – Preload assets that are only critical ans most of them are above the fold
2. Remove unused JS – possible but pain it can break functionalities if you don't know ( Not recommended)
3. Reduce Initial Server response time – sometime it is best to test twice or opted for CDN because their Data Center are all the world so you will get Better TTFB or Test your site from nearest location use webpagetest here
4. Remove Unused CSS – possible and definitely worth it if you know and it is done automatically but it can cause Styling issue like second
5. Eliminate Rendered Blocking – Combine all the CSS into Giant Stylesheets and Generate Critical CSS to fixed it and for JS you can defer with wprocket or can be done with php
(Diagnostics section)
1. Ensure Text Remains ..- Just enable Font-display: swap this feature will add font-display attributes to all your custom fonts or google fonts what it does is when page rendered , first your system fonts will load then when your custom fonts are downloaded it will swap your system fonts with your custom fonts.This can fixed Flash of Invisible Text that why you should preload those fonts.
2. Does not use passive.. – No idea 🙁
3. Minimize main threads – you're probably use page builder to build your site. This means when page is rendered your browser is busy and you visitors see white screen . Best and simple one lazy load images, background images, lazy load YouTube video so it doesn't rendered all the image on first rendered.
4. Serve static …- if you don't have returning visitor you can ignore it if not you can do with little bit of modification to .htaccess
5. Reduce JS execution – add defer or async or use Flying scripts to delay
6. Avoid an excessive DOM size – Mainly because of large number of wrapper (div) if you're using Elementor. Don't worry because 3.0 might fixed it
7 (Bonus). Key request count low …- 1 MB of Assets are Deliver on First rendered this is really bad of low powered smartphone one way is lazy load all the images except your logo and above the fold .
8. if you've multiple images serving from different CDN consider preconnect.
(First picture)
1. Time to Interactive (TTI) is high – Mainly because you have large amount of JS is present
2. Largest contentful paint (LCP) – because it is related to FCP and TTI
3. Speed index – follow (opportunity section no 3)
4. Total Blocking Time – It is cause by large execution of JS, Rendered blocking, large DOM size , 3rd parties scripts etc
5. Cumulative layout Shift – when page load your layout of your website shift it could be because of Font-display:swap, Your image didn't define width and height, Ads does etc
Cheers 👍🏽💟🤯6

Ilias ✍️ » Kishorchand
damm that’s some good advice imma try this out ! Thanks 👍🏽2

Joshua
Lots of insightful recommendations here.
Lozano
I moved to WPXHosting, using WP Fastest Caché (Pro), Perfmatters and Image optimization service by Optimole, and now I have this: Mobile 64 / Desktop 92 👍🏽1

👈📰

why these seo plugins didnt make changes as well onto my site
🔗🏹

This may satisfy you: CWV: Performance: 98 | Accessibility: 100 | Best Practices: 100 | SEO: 100 | Do this Strategy!

RELATED POSTs

Leave a Reply

Your email address will not be published.