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
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.
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 :)
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!
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.
@@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 :)
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.
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
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.
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
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.
Amazing video! I am confused though. Please, why did you change the default of the media to zero? What happens when the thumbnails, medium and large are left as it is? P.S. I am trying to build a real estate website, where a listing has at least 10 pictures.
Since then if you see recent videos, and I have a Code Snippet to help this; Leave the Thumbnail checked, but uncheck the others. If you add a 1920x1080 image to your library but only intended to use it for a 420x280 size image - then the 1920x1080 will still be loaded - so it's better to size up at 420x280 or close enough like 500x300 (etc) and add that to the Library - otherwise you'll have multiple images in WP-Uploads. Have a look at how many duplicates you currently have.
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!
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!
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!
Just tried to enter the purge cache snippet you provided - unfortunately it throughs an error "Request failed with status code 510 When trying to save the snippet. - do you have any advice or is there a change to the snippet available? The other snippets work.
(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!
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?
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!
@@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?
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. 🤔
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.
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.
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?
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?
@@websquadron it does the same for me. the code you listed above has a link to a RUclips page its the $('# wp admin bar purge cache') the page it sends you to is ruclips.net/user/hashtagwp
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??
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.
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 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?
@@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. ;-)
@@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
Wow, thank you, Imram. Another cool tutorial. 🤩 So bye bye WP Rocket?😁 Regarding custom fonts, I tend to follow Rino's advices (ruclips.net/video/55UkDGfZOp0/видео.html). They make my life easier.
Great video and I'll be building my website based on your recommendations!
Thanks again for an amazing tutorial
Now this is a WordPress vídeo.Give this man all the reveneu of the world.
I wish :)
Thanks
These are the videos we need Imran!
Just for you :)
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.
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.
you, Sir, are a gem among the pebbles.... thanks so much!
Great video, thanks
This is a really help
Again, your work is just great, very easy to understand and self-explanatory. Thank you, thank you.
You're very welcome!
Excellent tutorial as usual. Good job Imran!
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.
This dude's a legend
Always great info and reccomendations.
Thank you for this great lesson!
Another fantastic video, Imran! Thank you so much.
This is so helpful.
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 :)
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.
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.
Your videos are always most helpful- Thank you so much for sharing your knowledge.
You are so welcome!
Thank you for your video is so helpful ❤
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 :)
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.
Im going to start over and follow this! Love it!
Very good content!!!!
You my friend are awesome.
Thank you, Imran. I'm getting back into the game and this is super helpful.
Very helpful, thank you very much.
Wish I had been doing all this from day 1!! Top stuff!!
My new guru, haha! Great learning tools here and so useful. Keep it up, you have a new follower!
Great tips!Thank you!
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 :)
Love this! Very helpfull
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.
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
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?
Excellent tutorial. I usually use either bricks or breakdance but I def took a lot of good tips away from this video. Thanks bro
Amazing video!
I am confused though.
Please, why did you change the default of the media to zero?
What happens when the thumbnails, medium and large are left as it is?
P.S. I am trying to build a real estate website, where a listing has at least 10 pictures.
Since then if you see recent videos, and I have a Code Snippet to help this; Leave the Thumbnail checked, but uncheck the others.
If you add a 1920x1080 image to your library but only intended to use it for a 420x280 size image - then the 1920x1080 will still be loaded - so it's better to size up at 420x280 or close enough like 500x300 (etc) and add that to the Library - otherwise you'll have multiple images in WP-Uploads.
Have a look at how many duplicates you currently have.
@@websquadron Thanks for getting back to me so quickly. How do I check for duplicate uploads?
@@oparahrealty ruclips.net/video/XcZfKGBmJRA/видео.htmlfeature=shared
thanks a lot you are the best! But why you use hello elementor theme if generate press is the fastest theme for wordpress?
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
With LiteSpeed servers, would it not be better to use the Lite Speed cache plugin?
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
Your "windows" in the background are awesome. Are those three tv rotated vertically or something else?
Atmoph Windows :) atmoph.com/en/
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. 👍
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.
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.
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!
Just tried to enter the purge cache snippet you provided - unfortunately it throughs an error "Request failed with status code 510 When trying to save the snippet. - do you have any advice or is there a change to the snippet available? The other snippets work.
Hmmmmm that is weird as it works for me
(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: ruclips.net/video/oWONLR_arA0/видео.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?
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?
Btw I’ve been trying 60-65% on the bulkimage section and website still looks fine.
Nice one
Purging my whole site after watching this.
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
For image resizing, what do you think about the SMUSH plugin?
I find that they are not as good
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.
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/
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?
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
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.
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!
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.
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
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
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!
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.
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 RUclips page its the $('# wp admin bar purge cache') the page it sends you to is ruclips.net/user/hashtagwp
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??
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
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
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,
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
Would you recommend the same steps for bricks builder?
Yes :)
But I have video coming out next week which is just for Bricks
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?
How do you upload webp files?
Just add to your media library unless your host provider has restricted it
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
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
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.
Wow, thank you, Imram. Another cool tutorial. 🤩 So bye bye WP Rocket?😁
Regarding custom fonts, I tend to follow Rino's advices (ruclips.net/video/55UkDGfZOp0/видео.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.
Great video. Thank you
Excellent video, very helpful!