The Must Do Steps for Wordpress Settings, Media and Performance - Wordpress Tutorial 2023
ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
You must do this before you start building a website!
00:00 Domain & Hosting
02:20 Wordpress Settings
07:13 Plugins
be.elementor.com/visit/?bta=2...
wordpress.org/plugins/phastpr...
wordpress.com/plugins/wp-meteor
wordpress.org/plugins/code-sn...
09:10 Performance Plugin Settings
09:54 Code Snippets
Codes = websquadron.co.uk/page-speed-...
Performance = • How to Boost Page Spee...
Safe Mode = • Code Snippets - How to...
Purge = • Purge your Wordpress W...
12:54 Elementor Settings
14:58 Canva Images & the Colour Palette
www.canva.com/en_gb/
webaim.org/resources/contrast...
15:57 BulkResizePhotos to compress images to WebP
bulkresizephotos.com/en
20:33 Custom Load Fonts
www.fontsquirrel.com/tools/we...
25:33 Global Colours
26:41 Global Fonts
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
Thank you for your video is so helpful ❤
Now this is a WordPress vídeo.Give this man all the reveneu of the world.
I wish :)
Thanks
Great video. Thank you
Just amazing, thanks so much! One thing I was unsure about / maybe this also helps someone (22:53):
100: Thin
200: ExtraLight
300: Light
400: Regular
500: Medium
600: SemiBold
700: Bold
800: ExtraBold
900: Black
Yeah, those are the most common weights for fonts, and as @websquadron recommends, delete all the ones you won't use.
so much value here. this is the most detailed video tutorial I have ever seen on YT about speed and workflow optimization. thank you Imran
Wow, thanks!
@@websquadron can't use phastpress with local, it could be an option to use Autoptimize plugin instead?
@@kwakit Maybe, but when the site is Live and no longer local, then use PP.
Great video, thanks
These are the videos we need Imran!
Just for you :)
This is a really help
you, Sir, are a gem among the pebbles.... thanks so much!
Excellent tutorial as usual. Good job Imran!
Again, your work is just great, very easy to understand and self-explanatory. Thank you, thank you.
You're very welcome!
Man, congrats. Super usefull. I've been struggling with PSInsights and couldn't really understand how to tackle the errors. This tut is just amazing, straight to the point, perfect. Thank you so much.
Another fantastic video, Imran! Thank you so much.
Im going to start over and follow this! Love it!
Always great info and reccomendations.
Wow, excellent! I am super impressed. Best tutorial. We have been producing WordPress Website and constantly learned, but this is the absolutely best tutorial we have ever seen. Thanks.
Great tutorial Imran! Love the new studio look here. I've seen other versions in your other videos, but for what it's worth, this one is the best in my opinion
Cheers mate :)
Thank you, Imran. I'm getting back into the game and this is super helpful.
Excellent video, very helpful!
My new guru, haha! Great learning tools here and so useful. Keep it up, you have a new follower!
Thank you for this great lesson!
Great tips!Thank you!
Your videos are always most helpful- Thank you so much for sharing your knowledge.
You are so welcome!
Wish I had been doing all this from day 1!! Top stuff!!
Very helpful, thank you very much.
Love this! Very helpfull
Very good content!!!!
THIS IS GOLD!!!!
I actually have a default WP install with all my plug-ins and settings.
I'm going to add these Code Snippets to make my installation even better.
Thank you!
Take a backup first
@@websquadron Always.
Outstanding video, thanks for sharing. This changes the way I do my initial set up from the start moving forward!
Fantastic!
@@websquadron I have just found your channel and am loving it. Just watching your Web Design Pricing video now... I think I am going to go on a complete binge of your content. Thanks heaps for sharing such great content :)
This is so helpful.
You my friend are awesome.
This was brilliant. So much value. You are amazing and generous! You make me want to get Elementor. I work with Divi. I love your courses too. I sure going to enrol on one of them. I an still choosing which one to start with first
Big thanks. The enhanced course - which has new content added regularly - learn.websquadron.co.uk - contains the How to Start a Web Business as well, so you get the business course as a bonus :)
Every thing here Imran is spot on. Following your overly generous video I've mad a lot of progress. I hit 99-100 % consistently therefore I can move forward knowing the base is good. One thing I noticed though, sometimes accessibility shows certain elements as not enough contrast, when in fact it is before the CSS loads. Usually it is a cache issue deep in Litespeed cache, that a normal purge all doesn't do, I have to go to the toolbox and purge most caches. I'll have to make sure to uncheck the "disable Default Colours" perhaps the theme CSS laods the default colours in the header before Elementor?
Yup I sometimes see that. It sometimes happens and sometimes it doesn't. It's a bit like CLS happening on and off because the font load was slightly slow for no good reason.
This dude's a legend
Imran I love hello theme, but i have one problem with it. When i create woocomerce websites with it, I HATE the loading icon in the add to cart button, HOW i change that? I didnt find any tutorial for that. Could you create one tutorial for that please?? Thats the only thing i cant make it custom
Your "windows" in the background are awesome. Are those three tv rotated vertically or something else?
Atmoph Windows :) atmoph.com/en/
thanks a lot you are the best! But why you use hello elementor theme if generate press is the fastest theme for wordpress?
I think that why WordPress 6 came out as it did, was because the "page builder plugins" always had issues with screen compatibility. Even Elementor, which was considered one of the best page builders, had loads of problems, especially whenever something would be updated. Now I just use the WP editor to build pages, and If I need something specific I go download the specific plugin for it.
Thank you for your work. Now, I watched all your latest 4-5 video about Optimization and Performance, after my entire website is finished. Do you have any tips & tricks for applying all these stuff for an already made website? I can imagine many of them are doable by taking your steps 1 by 1, but I imagine there are even more deep settings like all those images that WP crop and store in the database if we did not turn the media settings off at the beginning. This is just 1 example, but it might be more. All the best!
It's one of those 'bear the pain' as you work on an already built site. Be Careful of deleting images and always check that the site functions ok.
I use a2 hosting. The WP comes with a2 cashe plugin and LS Cashe. Do I use LS Cashe, or does it make more sense to use WP Meteor and PhastPress?
Best to test out as I don’t use those other plugins
Thanks for the great tutorial with unique information/suggestions. I'm curious what if any advantages are there to using the code snippets plugin over the custom code section in the dashboard under elementor?
Better control and allows more tidy and refined use of JS codes
@@websquadron thanks for the quick response. Glad I came across this channel! Thanks for again for a great tutorial!
Awesome Video!
Can I still get a similar performance with these steps on an existing Website? I kinda hesitate to rebuild my whole Website.
Yes, but take a backup first.
Hey great video! Can I apply the Media Settings after I already build a website? I discovered this video to late, to do it at the beginning.
You can apply it. Just take a backup before you do
Imran, I think at minute 12:56 you meant to say "Check those two boxes" because that's how we disable default fonts and colors. Isn't it?
Otherwise, it's a great tutorial. Thanks for sharing.
Wait… do you recommend to check both boxes to disable?
Hi @websquadron! Thanks so much for such informative video. I have a couple of questions about Media Settings: 1. You suggest to disable all the thumbnails by setting their sizes to 0. What if a widget calls for a specific size depending on the device being used? (I am thinking of Elementor’s Featured Image widget) 2. Ditching the year/ month structure will definitely make for a cleaner upload folder. But doesn’t it risk to become too big to handle? Is there a limit or a safe margin? Thanks again for your valuable tips!
It's never affected me and many others. Good question though.
For image resizing, what do you think about the SMUSH plugin?
I find that they are not as good
Great tips! One question about Astra and Astra child themes? Can I get the same speed scores if I use the above themes and all the snippets/plugins you recommend? Thank you in advance!
Potentially - but Astra may add extra JS/modules that you don't need.
@@websquadron Thank you! To be clear, the Astra theme is not the right one for getting the best speed scores, especially on mobile? Although statistics shows that this theme is the fastest, etc.
I'm a bit confused because I need the Astra theme for other design features. Not all customers want to pay for Elementor PRO, but the price is performance and speed. They are fine with the status quo, but I don't feel the same way. Do you have any other tips on how to maintain speed scores with the Astra?
Excellent tutorial. I usually use either bricks or breakdance but I def took a lot of good tips away from this video. Thanks bro
Thanks again Imran for making my webdesign life so much easier! 🙂 Ich have a question concerning the stept "Code Snippets". As an Elementor Pro user, I have the possibility to use the custom code feature of Elementor. Can you recommend this or is it neccessary for the snippets to load from this extra plugin? I would be very happy hearing from you. Many greetings!
Hi - I find that the CS plugin keeps things tidier for me and easier to toggle on and off.
@@websquadron Thank you for taking the time to respond to me. Regarding the toggle, you are right; this feature is not available in Elementor. 👍
Excellent tutorial, as usual!
Bro, do you guys have a Discord channel to talk about all website creation related topics by any means?
Just our Facebook Group: facebook.com/groups/websquadron
@@websquadron Thanks!
Would you recommend the same steps for bricks builder?
Yes :)
But I have video coming out next week which is just for Bricks
Great tips! As you well mention, the domain is essential not to leave it at the control of the designer/programmer. One never knows...
An option if one wants the domain and hosting within the same provider is getting both under the same provider, but the domain in a separate account pointing to the server, but with a different account/pwd than the hosting, so the designer could never screw you over that.
(25:23) you've mentioned that you've linked the video on your description for Global Fonts & Global Color settings. I can't find the link here, Can you please send the link of that specific video? Thanks!
Sure: th-cam.com/video/oWONLR_arA0/w-d-xo.htmlfeature=shared
Thank you for the great tips! When i insert the first 3 snippets it's no problem but when i try the "Remove Unused JS", "Explicit Fixed Width and Height" and "Purge your site" i get the following error: "Could not create snippet. Request failed with status code 500". What does this mean?
Sounds like your server doesn't allow some changes. Who is your host?
Everything here was amazing! Just have a quick issue, when using the WOFF2 format font, all the font raises a a bit like 3 pixels. Why does this happen? instead of the text being centered it is a little above center and it looks off with the WOFF2 format. I would really like to use WOFF2 but with this issue I can't. How do I fix this?
That shouldn't have happened. Which font was it?
@@websquadron It was poppins
Can you deactivate the image sizes (Settings->Media) to "0", when you already have a running site or could it cause issues?
I've done this on many sites and never had an issue. Take a backup first.
If i activate ssl in Hostinger website, should i install and activated ssl too with plugin simple ssl? Please response brader, thankyou
Depends on the hosting but either way it will work.
Btw I’ve been trying 60-65% on the bulkimage section and website still looks fine.
Nice one
I found with SiteGround Optimiser, if you delete it, it tends to break the site or cause issues. I have had to re-install the plugin clear the cache using the optimiser and only then dis I get to see my changes. 🤔
You can clear the cache from the server by logging in to siteground. That is surprising that you got breakages after deleting it
Can you show me how to make button on click JavaScript code IFrame for Elmentor
I want play on my site not go out to external
Thank you so much
That’ll require a 1-2-1 consultation
Hi, what is your reasoning behind stopping "lazy image loading" , I supposed this lazy load did speed up website loading or am I wrong here?
Sometimes your top images can cause a delay with the page rendering so I like to control what is and what isn’t lazy loaded
@@websquadron seems logical, how do you control image loading later on?
I see "elementor_pro" inside the code snippet for Ensure Webfont is Loaded, but I don't have Elementor Pro and I use the plugin Custom Fonts by Brainstorm Force to upload fonts. Do I still need to add the code? Also, why not adding Regenerate CSS code inside?
Look at the link I gave as I also provided a non Elementor version :)
@@websquadron I mean if I use free Elementor, do I need to add the code snippet for Ensure Webfont is Loaded?
@@kianyipshea2766 Yup, still add it
@@websquadron Ok, thank you
If you disable Google fonts from Elementor, and you don't have a custom fonts option for any reason, are those fonts still gonna be fetched and seen by anybody? I tested out a custom fonts plugin, but it didn't let me upload woff and woff2 fonts, only ttf, even when it supposedly supports those fonts.
Can’t comment on other 3rd party font plugins but I’d play safe and still custom load.
@@websquadron Thanks!
fix image widths and heights where can i find that code snippets, its hard get on video
websquadron.co.uk/page-speed-performance-wordpress-code-snippets/
Purging my whole site after watching this.
Ask about all the words and areas of the content of the video. Those that are connected to Imran will tell you that we would rather make sure you are supported in your learning process
I watched whole video. I wanted to ask what if we already have created website. Then what should we do?
Revisit or learn for the next one
Which sizes do you use as default? Using only full size is not a great idea I think
Full is fine for resolution purposes if you set your images to be roughly the right size before adding them to the media library.
Thanks for your reply Imran@@websquadron For example I upload a 1920px wide img, for screen smaller than 768px WP does not serve a cropped version of 768px wide img if I set 'medium' to be 768x768, which of course has to be lighter than the full size??
Can you check the code please for purge your site it’s giving me an error code 403
I don’t get that issue.
403 is usually due to an incorrect url.
Check you used the right code.
/*
Plugin Name: Purge Cache
Description: Adds a button to the WordPress dashboard to clear the object cache
*/
add_action( 'admin_bar_menu', 'add_purge_cache_button', 999 );
function add_purge_cache_button( $wp_admin_bar ) {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
$args = array(
'id' => 'purge-cache',
'title' => 'Purge Cache',
'href' => '#',
'meta' => array( 'class' => 'purge-cache' )
);
$wp_admin_bar->add_node( $args );
}
add_action( 'admin_footer', 'add_purge_cache_script' );
function add_purge_cache_script() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
?>
jQuery(document).ready(function($) {
$('#wp-admin-bar-purge-cache').click(function() {
if (confirm('Are you sure you want to purge the cache?')) {
$.ajax({
url: '',
data: {
action: 'purge_cache',
},
success: function() {
alert('Cache purged successfully!');
},
error: function() {
alert('An error occurred while purging the cache.');
}
});
}
});
});
@@websquadron it does the same for me. the code you listed above has a link to a TH-cam page its the $('# wp admin bar purge cache') the page it sends you to is th-cam.com/users/hashtagwp
why the bulkreisize site cant convert to webp now ?
please give me the others website for this
It can. Are you using Chrome? Use edge instead,
How do you upload webp files?
Just add to your media library unless your host provider has restricted it
No one speaks about db entities for different projects like tours/destinations (courses, portfolio, booking, etc) custom types !
PhastPress needs to come with a warning. After installing it and configuring it, its fine, but if i try and disabling the "Optimize CSS" option, it will screw up the CSS in the site. I then tried deactivating all options in PhasrPress but no joy. I then tried deactivating the plugin but still no joy... even after deleting the plugin completely and clearing all caches. The result is that I will now need to rebuild the entire site as i cant get the site to function correctly after implementing PhastPress and trying to remove it.
I’ve never had that issue on countless sites even when I remove it. Have you reached out to their Dev team?
@@websquadron will do :) thanks
Is this a section from the 8 hour video??
Yup because some wanted smaller chunks and I have a feeling that the 7hr length of the big one will scare some people off.
@@websquadron yeah that's perfect. I've been working my way through the big video but it's good to have them segmented to I can go back and watch specific sections I need to
Phastpress Instead of wprocket?
Yes for me
@@websquadron and the Cache?
@@TeckFlyer We've got a snippet to add a Cache button - it's in the link for the codes.
The snippet has been deactivated due to an error on line 4:
Cannot redeclare function add_image_dimensions.
I never get that problem.
@@websquadron strange - i will ask the host but it seems quite specific as a code error. I copy and pasted the code from your website. Great video BTW. ;-)
I have same error: The snippet has been deactivated due to an error on line 26:
Cannot redeclare function add_image_dimensions.
@@bleudehuebeautyspa7522 Which snippet from the list?
@@bleudehuebeautyspa7522 PS are you using any other optimisation plugins?
Wp Meteor makes blank white screen. Without wp Meteor score is very low.
Have you tried lowering the WPM setting?
@@websquadron yes. All the way. Still
Wow, thank you, Imram. Another cool tutorial. 🤩 So bye bye WP Rocket?😁
Regarding custom fonts, I tend to follow Rino's advices (th-cam.com/video/55UkDGfZOp0/w-d-xo.html). They make my life easier.
Yup I don’t use WPRocket
Am I the only one who can't add this video to my library or add to "see later" ?
Hi. Not sure why as there's no restrictions there.