Elementor - Get High Page Speed Scores with an Elementor Site | 2022 Update
Vložit
- čas přidán 2. 06. 2024
- Step by Step on how to achieve 95%+ Page Speed Insight Scores on the Mobile of an Elementor Website
PS - although not mentioned in the video, compress and optimise images (maybe go for webp) and use bulkresizephotos.com.
And use alternate sized images when switching from the desktop to the mobile as size matters!
00:00 Intro
00:32 Our Score (at the moment of recording)
01:49 Elementor Experiments (FREE)
03:55 Don't use Nitropack !!!
04:29 Page Content Matters
05:45 WP Fastest Cache (FREE) Settings
06:35 Autoptimize (FREE) Settings
10:00 Risk of Removing Google Fonts
10:35 Preload 'eicon' Font (Free)
11:34 Preload Custom Fonts with Elementor (EL Pro needed), or...
13:11 Preload Custom Fonts with OMGF (Free)
14:55 Asset Clean Up (Free) Settings
18:42 Outro
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer.com/will-you-be...
Artists: brokeinsummer.com
Contact: brokeinsummer.com/help
Music provided by Audio Library Plus
- Get Elementor Pro here --- trk.elementor.com/license
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro
Elementor - Get High Page Speed Scores with an Elementor Site | 2022 Update - Jak na to + styl
That was a really great insight into WP optimisation, thank you for sharing!
Decided to watch your most popular videos:)
So this is the #4
Love your teching! Love your entusiasm! Real great!
Glad you enjoy it! Big thanks!
If it hadnt happened I wouldnt believe it. From 5-8 % mobile to 78% ! REALLY HELPFUL. Thank you Siddiq!
Boom !!
Another fantastic how-to video, Imran.
Thanks :)
And thanks to you now I can say I am the Genius of Page Speed Insight Socres by hitting 99% to 100% on my websites tests. Never thought that would be possible! Cheers from Brazil!!!
Nice work!
You're a gem! Works well, I need to work on my mobile speed more but I think a lot of my issues are server side
Yup, Servers can be a strong factor.
Great tutorial! Everytime, after watching your videos, my fingers get all itchy and I want to go to town on some of my clients' websites. Happy customer, happy designer. 😊🙏
Love it when I hear this!
Thank you Imran for this amazing video. I have a question. What is best to check my website speed. Should I test it in Lighthouse or PageSpeed Insights. I am asking because I get completely different metrics on both. Which one should I follow. Thanks
Great video - lots of useful information - definitely be taking the points about google fonts :-)
Absolutely: crocoblock.com/blog/adding-custom-fonts-to-elementor/
Thank you for this content bro!
My pleasure!
Brilliant! As usual!!!
Thank you! Cheers!
Many thanks for mentioning about Asset CleanUp! If you guys have any feature requests, let me know and they will be definitely considered! Happy days!
It is a CORE Plugin if you ever use WooCommerce!
Thank you very much.
very well explained tutorial
very nice Imran, it be nice if you updated it though to include webp image optimization as that can obviously be one of the main reasons for a low score... cheers!
How the heck did I forget to add that!!
What the heck!!!!!!
@@websquadron it's np mate it happens, sometimes i forget my own name lol
So what is the best method / plugin for converting images to Web P? Also, what do you @websquadron think about WP optimize? I already have that configured. Can that replace any of the plugins you mentioned?
Hi - always interested in what other people do so thanks for sharing. My question is at what stage do you add these optimization plugins? I have been doing that at the end of the projects, but wondering if I should do it earlier on...like at the start of the project? What is best practice?
Always add them at the start and the regularly check your score as you build
I am less interested in finding addons/plugins to speed up wordpress than I am in finding ways to fix wordpress. For example: if you build a loop to display a lot of custom posts, then the page you display it one will load slowly because the loop has to create every one separately. That is a flaw in Wordpress and no plugin i've seen addresses it.
Great help, Imran. A very quick question...With the Autoptimize the Lazy'load from nth image, you have entered "1". Underneath where you entered that "1" it reads "Don't lazyload the first X images, "1" lazyloads all." So, the question, if you enter "1" aren't you saying to lazyload all images? Just something that caught my eye.
I was just zipping through the settings :) Normally I set it to be the first 3 shouldn’t be lazy loaded.
Is lazyload a bad thing now https2 and 3 are here so no need to bother?
Great tutorial, like always! Just one doubt if you could clarify- with 'Inline all CSS?' option, AO warns that it may push meta-tags down and 'Facebook, Whatsapp etc. may not find them and breaking thumbnails when sharing.' Is it still the best to check this in?
It depends on how heavy the page is. If it’s a very large page then I wouldn’t do it but most pages will be fine.
Basically, if you can keep your styles under 50K, then inlining them is going to speed up the page load and can actually help your SEO.
I've been working through this video...really appreciate it!!!!
A couple of custom fonts questions:
I'm looking at doing the custom fonts with my fonts as you describe. But....I've seen several people post over time that they are having problems with custom fonts or that all their custom fonts "disappeared" when there was an Elementor update.
-Have you have any problems with custom fonts on Elementor updates?
-I noticed you said that you prefer doing them in Elementor rather than OMGF. That raises the question: might using OMGF prevent any of the problems with custom fonts that people have brought up in Elementor updates since it is working outside of Elementor?
-If I used OMGF, do the custom fonts show up at the top of the Elementor font list like they do if done in Elementor?
Thank you again!!! ss
Nope with OMGF. You still need to load custom fonts to make it appear at the top of the font list.
I’ve not had any issues and I can only guess that they hadn’t unchecked the default fonts setting inside Elementor.
Great tutorial! I’m trying to decide whether this process would be best over using seraphinite accelerator. I think probably being more thorough like this would be worth it though
Totally. I would say that if after you've been thorough ad the scores are still lower than you'd like, then Seraphinite Accelerator would be my next route. That video is 20 mins long, and you could apply that and double check the mobile etc layout in terms of above the fold well within an hour :)
don't use seraphinite, it does exactly the same as nitro pack. it ships the first section of the site and pauses the site from loading for 1 or 2 sec to get a higher score. that's after extensive tests for the plugin to see what it does unfortunately I don't have the results anymore, it was for myself so I get rid of test site and the plugin.
Hello! Love all your videos. So helpful!
Beginning a new site and have nothing but the header on the page. I have a fonts problem/question:
-I've set custom fonts in Elementor,
-Blocked Google Fonts in Elementor
-Added the fonts listed in page speed insights (under Ensure text remains visible...) to Autoptimize and Assets Cleanup.
But -
After checking page speed insights again, "Ensure text remains visible during webfont load" still is marked red with both fonts still listed.
Questions:
Any ideas why this fonts still keep coming up as an issue?
So far, the highest I can get Mobile is in the 70s and that's with nothing on the page except for the header.
This could be due to the server and sometimes even after purging your server it may still take time to load through.
It’s annoying when page speed still shows it as not being loaded. Trust me it will sort itself out.
If I have a site where I have WP-Optimize, should I deactivate that plugin and then try the ones you have mentioned? Thank you for a great video!
Sure. I only use WP Optimize when I need to refresh the databases - the first tab for WP Optimize - and that's when the Edit and the Live screens are showing different views. I found Auto and WP Fastest Cache working so much better for me.
Thanks for introducing the Asset CleanUp plugin, the pages loads much faster now! I was wondering if there are ways to delete the unused or irrelevant script "permanently"?
Good question; I need to check on that, as I'm not sure.
@@websquadron It will be great if the plugin could "highlight" the block of script and then allow the user to remove it permanently even if the user have uninstalled ACU.
Pretty awesome video and "sweet spot" settings but as I was watching I was wondering about having two min. at the same time... and after I tried it myself I did got a related warning "It looks like you have another plugin also doing CSS and/ or JS optimization, which can result in hard to troubleshoot conflicts. For this reason it is recommended to disable this functionality in WP Fastest Cache" What's your advice on this?
Yup don’t aggregate or minify in 2 plugins
Thanks for the helpful video. I have Paid Memberships Pro on my website and there have been issues with the browser cache. PMPro Support told me not to enable it, as they say the plugin works better when it is not activated. Have you tweaked the browser cache on PMPro pages?
That’s never affected me but if you’re seeking that then deactivate and see if it’s ok
Thanks a lot 🤗🤗🤗
Most welcome 😊
I didn't understand, are you using two plugins at the same time? Because there are different functions responsible for different things in the free tariff?(wp fastest cache and autooptimize)
Yup The WP Fastest Cache is my caching solution - and if you have another one, then you don't have to use it, but Autoptimize does most of the heavy lifting with the CSS and JS Minifiication etc etc etc
Would you use wp rocket and therefore will this slot in place of fastest cache?
So, here’s one related, but unrelated. I disable all Google fonts, but I use Adobe fontkit via integrations. I’m Still suffering from 431kb of font loading, and 12 page requests.
Also any advice on how to reduce excessive DOM elements? I’ve played around with reducing the timeframe on blogpost calls on a ‘latest news section’ top of the fold. Hade some success here, but would like to remove even more of them.
Big tips on DOM are, make sure you've activated the Elementor Experiments, reduce Inner Sections, Use Custom Width rather than inline when you have widgets side by side. You don't always need many columns and can use one column with custom width of elements. Watch out for slideshows, and too many motion animations.
I'm not an expert on Adobe fontkit :(
Someone mentioned that you use Siteground, as do we. They have a program called Siteground optimizer. Do you use that at all?
Nope. Removed that as I found the page speed improvements weren’t enough as they’re not kitted out to handle page builders like ELementor, hence I apply my own methods.
Have a look at Phastpress as well - a free and very easy to use plugin.
I am 100% agree with you regarding Nitropack. I believe it uses black/gray hat techniques to "cheat" scores
Yup
The most telling part is when you look on page speed insights and you can clearly see that the score has been based on a blank page.
Would you use the same plugins on Cloudways? (I.e. delete Breeze?)
Good question.
I would say yes, but..... double check the score before and after.
Do you have a recent video about SG Optimizer? Has it changed much since this video? I've been using it but my scores are not great, going to try your suggestions here.
I still advise not to use it as I tried again with it a few months ago and still found it limiting because it’s almost been built to assume that you use the standard Wordpress block editor - which isn’t true for most of us.
@@websquadron Great job man. On SG hosting, without the SGO plug, I find that consistently clearing all caches is an issue when I use a patchwork of 2-4 plugins like this to improve on SGO's results, esp after any updates run. So $-wise, I end up wasting more time over the long haul by "fixing" cache-clearing issues. Was wondering if you have a similar experience or if a certain setting (inside SG, Elementor, WP or these plugins) helps you ensure caches are properly cleared on a regular basis. Also - you don't mention using CDNs or Cloudflare on these performance videos, any reason why/why not?
Great job. Any thoughts on why my site is appearing as intended on Chrome, Avast and Brave browsers, but has display issues on Edge and Firefox? Using Elementor Pro.
Have you cleared the cookies from those browsers?
Hi a newbie question. If you upload fonts from google fonts rather than call them up from googles server, does this not add weight to the site - most of the fonts are 400-500k, does that add to page size?
Not if you compress the fonts to be Woff2 and don’t go overboard with too many styles.
Raleway fonts are 180kb as ttf - but are reduced to 25kb each when converted to Woff2.
@@websquadron thanks, great help
Will these two plugins (Autooptimize and Fastest Cache) conflict with each other? Many of their functions are similar.
Hey - I have now ditched using them for these new solutions!
czcams.com/video/P4nepzKE0Fs/video.html
Elementor is not available for Shopify?
What host do you recommend for speed? Siteground seems slow as a slug.
he uses siteground
Yup :)
I have found it fine, but I make sure that server we're using has 1/3 capacity left in terms of inodes.
My main tip is not to use SG Optimizer as that is decent but doesn't do the bulk of what you expect an optimiser to do.
Of course, SG is just one, and there are better Cloud based hostings out there. Because we've been happy with SG, I am biased towards them. Definitely don't used Bluehost, IONOS, Hostgator, 1&1, or GoDaddy.
I am always suspect of wordpress hosting reviews on Google, like the Top 10, or the Best Providers, etc as they always paste Affiliate Links - thus they're not fully true. When a review suggests that GoDaddy, Hostgator, or BlueHost are decent hosts, then I smash tippex onto my monitor to erase the website from view.
When I download the plugin to scan for the fonts im using, its only coming up with inter normal, its not loading the bold or medium style fonts. Do you know why its doing this.
See the 2023 Page Speed Video instead.
Thanks for the video!!
Question
How do I know if is working??
You'll see your scores change for the better :)
i just installed wp fastest cahce and applied all ur settings and it crasched my whole site cant even log in to wordpress i get 500 internal server error.. plz help
I have an updated 2023 video. See tis video and check what your Server PHP Memory Limit is. You need to be on at least 512MB.
czcams.com/video/PQWQbOo8E2A/video.htmlfeature=shared
Sir Can you please explain about comulative layout shift that which specific widget or section goes wrong how to know please Thanks
CLS is when your elements or font shift/change. Sometimes it can be when your non-loaded fonts are not preloaded properly so you see a little movement. Use www.webpagetest.org/ to get a video that shows the CLS moment.
Why i can't download WP Fastest Cache? Isn't available for theme Neve?
Really? Might be your Host blocking it. Try Litespeed Cache instead.
Is there a 2023 video update somewhere? I swear I saw one that I now cannot find.
Sure here > czcams.com/video/P4nepzKE0Fs/video.html
thanks for the gr8 info
BTW when I tried to upload custom fonts it says to Go Pro!
Are you using EL Free?
@@websquadron yes :)
Good
i must have done something wrong because all my scores are a lot worse now eg one page was 80 and now 40. but i am using WP Rocket and so there maybe compatibility issues
On some occasions, I have removed WP Rocket from sites as I wasn't convinced. What issues are you getting in the recommendations.
I don't have the optimize option in settings any advice?
Do you mean in Elementor Experiments, or Autoptimize?
Hmm - didn't work that well for me - it killed off the mobile menu I had and the blog post. It did however, give me a speed boost from mid 30's to low 60's
Deactivate any settings that Combine or Aggregate JS or CSS.
have you used al the plugins at once?
Yup.
But not OMGF.
'1' lazyloads all.
Sounds like 2 might be a better answer
What about LiteSpeed Cache plugin?
Another good one to use if you can't get WP Fastest Cache.
how to get URL of preload custom fonts with elementor 11.39
When you do the Page Speed Insight - you'll see the recommendations that state the eicon and the webfont urls.
Fonts preload makes TTFB longer(
Which process are you using as it always normally works.
Also check that you haven't got 'Swap' Set up in your Elementor Settings.
not wp rocket?
Nope. See this new version - even better!
czcams.com/video/P4nepzKE0Fs/video.html
@@websquadron thanks checking it out, I found the elementor pre loader broke and made my site black screen when on mobile. with these settings fyi. I've disabled the preloader everythings fine now.
You should really be downloading the fonts and add as custom fonts
Indeed.
See 11:54
Dude, I followed your instructions exactly, and my PageSpeed score went from a 68 to a 48. Disappointed!
That will depend on many things like the content and what else is on your site. You need to follow the 2023 video that uses improved methods.
Good luck.
czcams.com/video/P4nepzKE0Fs/video.html
Devices👇
91
Rendimiento
94
Accesibilidad
100
Recomendaciones
-------------------------------
Desktop 👇
99
Rendimiento
94
Accesibilidad
100
Recomendaciones
Thank youuuuuuuuuuuuuuuuuuuuuuuuuu !!!! 🙏