A panel discussion replay from Clubhouse on September 17, 2021, the panel discusses Speed and Performance improvements for WordPress.

Website Speed and Performance with WordPress: We discuss site speed and performance, to insure a fast loading website, from hosting to caching, theme choices to image optimization, as well as new Divi enhancements.

What techniques including WordPress hosting, page caching, and using a Content Delivery Network play a part in loading speed of a WordPress website?

We talked about how to optimize a WordPress website, and how to make your WordPress site faster, using tools like GTMetrix, Pingdom, and Google Pagespeed Insights.

Thanks to the panel for a great collaboration!

The Clubhouse room was a live discussion, hosted by the Leverage WordPress club, and this is the recorded replay.

Become a Leverage WordPress club member by clicking below, so you can listen-in to our rooms live, or join us to ask a question!

Click here for the Leverage WordPress Clubhouse

Notes from Discord [wphqchat.com]

How fast should a website load? For humans, and for Google/search?
Less than 1-second? Above the fold or critical content should load as fast as possible at least.
User should see some content ASAP.
Bounce rate: tracking how fast user leave after first arriving at the webpage. You want it to be a low rate – and you can place the headline, and content that the user is expecting, right at the top of the page to prevent bounces.
WordPress now includes Lazy Loading in the core software, as well as supporting WebP image formatting, both for fast loading and user experience.
You can use a preloader – a loading graphic to inform the user that there is content to come.
Or, loading an image at a low-res first, or with a logo first, as the full-quality image loads in the background.
Image (logos and icons) Animated SVG files – Scalable Vector Graphics. Also Lottie file format for animations that are lightweight: here’s an overview. https://wplift.com/wordpress-lottie-tutorial-plugins
Always use an external host for Video – YouTube or Vimeo, etc. – and you can use an image to be a placeholder which will load immediately. User clicks image, and only then does the video load.
Nvideo for video hosting
greggdavis — Today at 9:36 AM
Hosting is highly varied – shared, managed, self-managed are options
A2 hosting is recommended – Charlene
Managed: Flywheel, Kinsta, WPEngine
Self-managed: Cloudways, GridPane
greggdavis — Today at 9:47 AM
If embedding a form (like Jotform) you are loading the code from an external site, so it can be slower to load, but if there are advantages to using it, it’s no problem to use.
You can also watch for embeds and place them lower than the “first content” so that in the case that they take time to load, you can place them below other more important content.
Caching – LiteSpeed, and Nginx, are server-side caching methods at your server.
Also Redis – server-side
Don’t double-up your caching, by adding cache plugins on top of your server caching program that the hosting company has set up.
LMS, eCommerce, Membership, Multisite – these need more server resources because many pages can’t be cached. If many people are using the dynamic site at the same time, it can use many more resources.
a CDN – content delivery network – copies of your site in different geographic locations, depending on where the user is located.
Google Pagespeed insights – tests mobile and desktop
https://developers.google.com/speed/pagespeed/insights/
gtmetrix – good analysis for waterfall
Test with Chrome as a guest, with nothing loaded into your browser, for more accurate results. Use the Dev Tools in Chrome to test with Google Lighthouse, which is what the other services use also
Only use one CDN at a time, don’t overlap
ALso, Pingdom is a good speed analysis tool too.
Watch out for using plugins that duplicate functionality – delete those that you don’t need!
greggdavis — Today at 10:31 AM
Can build/develop a site with Oxygen, but then only allow the website owner to edit content with Gutenberg.
Tailwind – tool for development – can do “just in time” CSS
Fonts: use Google fonts? Yes, included in many themes/builders, but loads from Google’s servers.
Clients sometimes go crazy in Canva and choose weird unavailable fonts, so they need to be a graphic, or coach them about using weird fonts.
PLugin: use any font
Do usability testing ot make sure fonts are readable – supported in language and also in all browsers.
greggdavis — Today at 10:50 AM
Image source set – included with WP since 4.x.( srcset attribute) with coding on your WP site. For responsive design and responsive images. It allows for loading a different image depending on the user’s screen size.
https://developer.wordpress.org/apis/handbook/responsive-images/
WordPress Developer Resources
Julio Potier
Responsive Images | Common APIs Handbook | WordPress Developer Reso…
Since WordPress 4.4, native responsive images is supported by including srcset and sizes attributes to the image markup it generates.…
greggdavis — Today at 11:25 AM
Thanks for joining the room today everyone!

Transcription

Good.

Yeah, so we are recording, I appreciate you guys and I’m gonna try and you know, process that into an audio and then make it available for people link it on the discord channel, etc. And so I’ve got a, I also have a new website to support this club and the leverage WordPress brand that I’m starting to build for trainings and stuff. It’s at leveragewp.com. So I’ll probably post the recording.

Yeah, that’s new, only two videos up so far, but trying to get some content out there every week. And I’m starting with just a little series on email for WordPress, the different types of email from, you know, marketing email all the way to regular, traditional send and receive emails. So thanks for that. Alex, I appreciate you. Again, the YouTube channel as well, it’s called leverage WordPress. And so, yeah, I appreciate you guys. And, you know, speed and performance. I am excited for the room today. You know, this is a topic that we’ve come back to in in some of our discussions, because it’s kind of one of the one of the foundations of, of a well designed website, right, is that it doesn’t take 10 seconds to open for somebody’s browser. And so I’m excited to discuss all the factors that come into that. In our context,

Alex: the first thing I was gonna say, if it’s okay, what do we believe, is an acceptable time for a page to load? For two reasons. I’m gonna say, one for the consumer, or the user, and another one for Google, in terms of their PageSpeed optimization, what do you guys think?

Gregg: Ooh, that’s a good one. Nice. First question for the panel. You know, the first thing that that comes to mind, when you ask that question, how fast should a page load? And you’re right to think, you know, I mean, they’re parallel goals, the, you know, Google and SEO, you know, has speed as a ranking factor now, as we all know, but for the user, you know, the first thing that comes to my mind is sub one second, for at least, the relevant content, you know, and this is something I’m sure we’ll get into, as we go into detail here on the call, but for, you know, now it’s, I’m having a mind blank on the name of What am I thinking of here? top up, not above the fold? Go ahead. Yeah,

by default, auto say another way of describing above the fold content or critical content,

thank you critical, critical content. So sub one second, less than a second, give me give me a three digit milliseconds number in Google page insights. And I’m loving that. So you know, I mean, my first impression is, I’d love to have every website page open in less than a second for the user and for Google, what do you think, Andrew?

Oh, you know, I, I don’t feel the need for it to be like, like lightning, like, you know, I know that if I see anything happening, but I’m not sort of this sub was I mean, like, I could look away and rest my eyes for a second. Like, I guess I don’t really get, you know, to bound up have some insight takes a little longer to load if I want to get there I want to see progress. But yeah, but and a lot of it has to do with your hosting and your image. And you know, what’s the first thing and like, you talked about critical information, while really you’re loading a page from the top. So you’re always like, hopefully the critical stuff. Is that the top right? So I’m not quite sure on that concept of the critical stuff. Because the page always loads from the top mostly, I mean, I don’t know so I don’t know. I just I don’t I don’t need it to be there at lightning speed. I’d like to see it get there. But you know, I certainly not into waiting, you know, 10 seconds, so maybe I’m just more forgiving. But I mean, I like my site to load fast. But you know, images and hosting make a big difference.

Yeah, I just had to hi Samuel. How you doing? Welcome Samuel to stage. I think person we just discussed in the first question is what’s acceptable for a page load and we’re talking about if you like, the top, or the full content, one, click Bit of content and then also left the page. I think it The important thing here is right, as you said, Andrea is, is that someone should know something’s happening quickly. And I believe that we should deal with something we can talk about it relate to that kind of waterfall, where we prioritize. And this is important thing, the above the fold content on a page to load, as Greg said within that second, right. It’s not even at the whole of the content, loads of images, but that the user sees at least a title or we like if it’s a first page website, hero, area title. So they know that they’re on the right place, and they don’t mind waiting for the rest of the content to load. And I think that for me, is the first point is when critical are above the fold content to load as instantly as possible. Within a second, I think that is a good benchmark, Samuel, what do you think?

Sorry, I was like in a call just now. And I just jumped in. Yeah, for me, like, it’s good to have like a content delivery network. And it could have like a caching system, like a plugin that helps with, you know, deliver, delivering your website. It like be should have to, or like to beginner like WordPress should be aware on like, putting too much slider in their website, because that’s like, also take a lot of time to like, optimize? Yeah, I’m Sam, I’m done speaking.

Sure, Sam? Absolutely. And let’s get into some of the details of what, what can help us or what we should look at in order to optimize a site loading fast for the user, but 100% agreed, Andrea, like you said, there are things that can be deferred, right. And that’s when, when Alex was responding to your comment injury about, you know, he has lots of factors that go into it, and lots of things that are that can be loaded on the page, potentially, after the critical things, and when when we talk about, you know, critical CSS, and then deferring other items, you know, Samuel mentioned, kind of an old style, you know, having a slider or, or hero imagery, oftentimes, you know, what people desire for a website to have is, you know, gorgeous imagery, potentially video, large, full width sliders at the very top of the page. And as web designers, we’re conflicted that times where we want that item at the top of the page to load as fast as possible, right. So if there are things like, you know, certain if there’s JavaScript elements, or you know, CSS that is required, for either modules, or or sections of content that are below the fold, or below the bottom edge of the browser, when the website first loads, those items don’t have to load right away for the best user experience, right? They can be, you know, there’s something called lazy loading for images. And we can use techniques to defer JavaScript and defer CSS from loading, even Google fonts, we can defer those things to load after the critical items. And when we talk about critical items, just for everyone in the room, you know, critical items are those that are going to be visible to the user right away at the top of the page. And so if we can defer everything else to load afterwards, and just changing the order of the way things load can help us a lot. And I agree, you know, those top things those, you know, presenting the the first content full paint, that is another term for Google SEO, you know, to and to judge, how long does those first visual items take to load on the page? And then how long does it take for those to look complete to the user? Because it doesn’t matter if things below Oh, go ahead.

Something else that you know, what happens is if you go to a web page, and it’s not what you expect, you don’t have the headline you’re expecting or the the thing that you’re going there for so you can even, you know, make sure that that the first things that come up, make sense to the visitor, because when you get to something, you open a door and you go, Oh, I’m looking for the bathroom, and it’s a closet, like that’s not right. So you also want to pay attention to what is that first thing that loads so people know they’re in the right place, and then we’ll wait for the rest. Like sometimes you’ll get to a page, you’ll go, Oh, is this what I wanted, you know, and then people leave so you can really help your bounce rate by having that stuff at the top be really informative, like I’m in the right place. Now I can start to scroll.

Um, can I just add something to that? That’s right. Yeah, as I said, I think that tirely right. And yeah, and I think that’s the most important thing is, someone went the other way looks looking at this as well, if everyone had something called got analytics, just for those that don’t do a lot of stuff, what we look for a website, we’ll make sure that something called the bounce rate. And what we mean by a bounce rate is someone comes to page. They don’t like what they’re looking at, and they bounce straight off. Yeah. So what we’re trying to do on our website generally is try to get the bounce rate to be as low as possible, which means when someone comes to a web page, they love what they’re looking at, and they don’t mind unable to look around at other pages. So exactly, as Andrea said, that first title is the most important thing. I will put a mention about this with WordPress in just in case someone actually knows, and we will get into elements. In terms of images, though, WordPress has put a few features in recently to do make images more efficient. And I will mention quickly what they are, I know we’re going to get into a subject, but it’s worth mentioning this. The first thing is something called lazy load, right? lazy loading is when the images only load when they get into the window, which means that it should load the images that are above the fold first, and then as you scroll down, they’re loaded, rather than all the images loaded at once. And the other thing is another format, which WordPress now supports as native, which is called web p, which would make all the images more compressed. The only thing is though, if you have existing images on the website, that are JPEGs, it won’t compress those, it’s only that you cannot load web p images. But WebP II is the smallest file format for images. I just want to mention those two points. I’m Alexandre speaking.

Can I add also so in my experience, I think like you know, for a website, depending on your website, but if your website is like, he really image kind of focus or he really like video kind of focus, right. So they you know, like the quality of like a webpage sometimes is not really nice or not like really the same quality as like the bfgs. Or sometimes. So you what you need to do is if you can also like, do like a preloader. So I owe like for like my clients, I like to go one we have like a lot of like images, a lot of like slides there a lot of like things going on, I always like put a preloader so there’s like this fun little gimmick like pre loaded that like helps people to like, oh, wow, there’s like an animation on it, you know, makes people like stays. So yeah, I’m Sam, I’m done speaking.

Yeah, that’s interesting. Sam, i’d i’d love everyone’s thoughts on, you know, when you say preloader, that’s really kind of parallel to the idea of lazy loading, right, where it’s, they’re not the same thing. But you know, lazy loading images, which Alex stated is now included in the WordPress core software is something you can enable where you know, the images don’t load until they’re just about to be scrolled into the viewport window for the user, right. And then as Sam mentioned, you can install a preloader, which, when when items are loading on the page, the website detects that items are not quite loaded yet. And and then it displays you an animated, you know, kind of like the spinning beach ball or any kind of animation that really informs the user, hey, there’s stuff to be loaded in the background here. So hold on a quick sec. What do you guys depending on how on those things,

I understood that pre loading is you’re actually loading a low resin picture that looks you know, you go to a site, it’s kind of fuzzy, and then the picture comes in. So I actually understood it to be more like the image is there in the pre loading of the source set of these images, and it’s low res. And then it flushes in is sort of what I understood that pre loading to be. Let’s click Kevin, no, you finish you go.

I was gonna say, Well, generally, if you want to look at an example, probably one of the better examples of this, go look at the BBC website by so what the BBC website, they do a pre loader, which is a box to show where the image is going to be with the BBC logo in it, and then the image loads. So that’s generally what preload means that you’re showing the use. The space of the image will then fail, I also believe I think, is because to do it as well, because Facebook can take ages to load a page with all that content. So they have the preload isn’t actually the image the preload is a block where the image is actually going to go. That’s what I believe that they Do on the BBC stuff, Amanda’s sometimes making it into?

Yeah, cuz some sites they don’t even load. They don’t even load anything until you actually scroll down. So it kind of holds that it holds you putting anything even placeholders. So it depends on how they’re setting it up to run that.

Yeah, it was I know we’re gonna I’m a Divi fan. And so one of the things that Divi is doing now is this conditional rendering. So it’s, it’s so a long or complex page isn’t going to affect the speed because it’s not, it’s gonna load the same time as a short page, because it’s all conditional rendering, because you don’t need the data that’s down the page. And so if you have these long, complex pages, they don’t take any longer to load.

Yeah, that’s true, Andrea, thanks for bringing that up. And I’m sure we’ll go into a little bit more detail about that specifically in the Divi performance enhancements, but I think we’re really kind of we’re dancing around the same topic here, we’re, it’s a great place to start for speed and performance, optimizing your content, so that, you know, there’s nothing that really holds up the user experience. And from, you know, a an animation circular item to, you know, a logo placeholder where the image is supposed to be to a lower rez version, you know, like a pixelated version of the image, as a placeholder. All those are kind of the same thing. We’re, we’re improving the user experience by at least showing them something, right.

Yeah, can I also cover that as well, then. So another big factor now, which has been around for quite a while, I’m not, I’m not going to quote numbers of when it was available. But let’s say it’s been available, you can install a plugin called SPG. safe, and there’s quite a few SVG plugins. And ideally, what you want to do on a website. Now, we used to originally do logos, I suppose in the first days as gifts, then we then change to PNGs, to have transparency. And now we’re on for quite a while we should be supporting SVG. E for icons, go. Definitely. And the new format from that as well. is also I’m going to miss announced because I’m dyslexic, the Li or Li is the animated svgs as well, which is also becoming quite popular. I don’t know if some wants to comment on what the actual right spelling is. But if the point I’m trying to explain to you is is that for size, definitely. svg is better for logos, and for icons. And for the animation. I think it’s called leaders. I want to comment on that because I think I’ve got the name misspelled because I’m dyslexic, so responding incorrectly, and Malik sometimes speaking.

Oh, sorry for the delay, guys. I was all in, in the back channel away from the front trying to click around. Thanks for that reminder, Alex, I’ve made you guys mods. So you can invite more people to the room, we’d love to have more people come Come and join us. But yeah, SVG another file format that is enlargeable. You know, a vector. It’s a vector style format. So you can make icons and logos larger without deteriorating the quality at all. And so that’s an appropriate image format for items that are not bitmap style or photographs, but for graphics and that type of thing. Great. Great point, Alex. But I missed what, what you were talking about as far as what were you spell about the spelling?

So yeah, so I’ll get the right thing. It’s called the lead file. So what they are is they are animated SVG files. So SVG stands for Scalable Vector Graphics, which exactly as you said, means that it doesn’t pixelate. And it’s a mathematical calculation. And leaps are based on that which is animated. So they’re animated SPGs. I know, definitely, it’s supported as natively in elemental, supports the native file. I’m not sure whether Debbie also does as well. But if you will need to put animation on the side. In the old days, we used to use animated GIFs or special quick video on but you can now make a very, very small animated file with a Li. And what I do is, is that I’d get the website up, and then I’ll put it in the discord channel, if anyone wants to see it. And in there, they’ve got examples of stuff you can use on the website. So I was on a website recently. And when you sign up, they’ve got an animation of fireworks for like, congratulations for signing up. But the animation didn’t take any size because it was done as the leap by which I’m explaining which is like a animated SVG file. Yeah, I’m Allison speaking.

And can you spell that for everyone out?

Yeah, I’m going to Let’s get it on. Go to in a second is going to set it up. Let’s carry on. And then I’ll tell you when I put it up on the on the site. Alright.

Thanks for that, Alex. Yeah, I’m curious about the name of that to Charlene. And I do I am taking notes in the discord channel. By the way, I should probably just reset the room here quickly. Now just Welcome everyone and mentioned our discord channel where I’ll, some of us will usually take some notes and post links, where we can share things like that. But before I do that, just very quickly, you I didn’t want to want this idea to leave my head, as Alex was speaking about the animated SVG files. You know, when he talked about ways to use animated gifs, or gifts. And being a divvy user, you know, there’s a Elementor and Elementor, I’m sure as well there’s, there’s a lot of powerful animations and either hover or scroll animations that we can use in our designs that are very powerful and most often powered by CSS code. So that makes it a lot smaller as far as instead of loading, you know, an animated video file or an animated GIF. And if you’re, if you can’t use, you can basically take any element, not just an SVG file, like a logo or an icon, and you can animate it on scroll, like see things slide in from the left or fade in as you scroll. And it’s just nice features that these days can be done pretty fast with high performance using CSS animation. And so I just wanted to note that.

Yeah, so just let you know, you can also do you know, what the name of it is L O, TT I, II. And I’ve just put a link in the leverage WordPress channel. Also, following on from what Greg just mentioned, you know, you said on scroll, you can actually also program that to actually work on scroll as well. So that means you can actually have an animation working on scroll. Yeah. As as a separate delete file. So they are programmable, as well. So a very exciting thing. Yeah, it’s really good. And also the great thing as the conversation is around speed, the file size of them is my new compared to bigger animated GIFs and bigger video files. And by the way, just one little point as well. Never ever put video on your site always hosts that externally on a meeting server. Yeah. Anyway, Oh, shut up about that.

I think you’re talking about the lot. You files. I love those files.

Yeah. But what the files.

That’s it? Yeah. So I yeah. I’m Lahti is probably right now. Right. We’re spending, we’re saying I’m Alexandre speaking.

Awesome. Thanks for that. And yeah, very, very important. quick side note that Alex sir glossed over as he which is, you know, never put video in your WordPress Media Library, and then place it on your site, like an image. Definitely use a professional video hosting service like, you know, YouTube or Vimeo or Wistia, something like that in order to place video on on your page. And it’s an interesting idea, Alex to one last thing I’ll mention is that and this is something that potentially we want to discuss in this speed and performance room. If you’re loading something from an external source, like a video, or even Google fonts, then your website is kind of beholden to that server as far as how fast things can load and that’s why you would defer loading for Google fonts and things like that.

Yeah. But I was gonna mention one other point as well if you’re doing the video and this is this is I’m going to credit I’m going to credit SEO and we’re going to credit does the SEO rooms right No, okay, his name in a minute and no learner. The thing I can say about this is is that what you can also do to make it like we just mentioned if you’re running video, instead of displaying the video when someone comes to the page, like a YouTube video, you can have your own image on your own website to display and only when they click the YouTube video actually displays that’s another way of saving a lot of lot of external loading as well which is also worth mentioning. I might have been done speaking so yeah,

so in the video like tack you can put like there is like this element called Data dash poster and that like you can put it like that poster video as like a corporate images. So once you click on it, so if I for example, if you use like surfaces like under a video j s, or something like that, you can actually like manipulate like the video to have like a pastor video first and then when you click the video run.

Yeah, that’s right. And Noah I know a learner who runs a lot of the SCI rooms was mentioned in that as well. So I’m not going to credit myself for that mean say no a learner. He does a lot of rooms on SEO on clubhouse as well. So he made him always talk about stuff to improve the site management on speaking. That’s great. Thank

you Alex and welcome d to the stage Hello and thanks for coming on up. I know that I wanted to reset the room and just Welcome everyone everyone in the room. We’re talking about website speed and performance especially for WordPress, but in any topic is on the table for us. And if anyone would like to contribute welcome to come up to the stage ask a question or joining the conversation. Welcome Hello, D.

What’s going on kings and queens. This D heard the entre motivator out of Atlanta Georgia. Just loving the topic you are talking about that speed man speed is a thing. But myself personally I use in video it’s called in video for my video hosting. So YouTube is cool, but I don’t want commercials and previews and ads and stuff popping up on the video. But um, yes, I mean, definitely, definitely love in the speed. I actually have a question. You know, I don’t see a lot of WordPress rooms. And you’d have a Shopify partner, Wix partner, but I always prefer WordPress. My argument is I can build Shopify on WordPress, but um, my question is, like, Listen is I’m having problems with my server. I have too many files. And I’m, I’m pretty well versed. Just not in the optimization of servers. Yeah, so I mean, I know I could delete some stuff, but I don’t want to delete some vital things.

Okay, so the first thing I’d say around servers is we talked about WordPress sites in particular date. Yes, yes. Okay. So where are you hosting at the moment? What’s your current hosting?

I have I have four holsters. I mean, for four of them. The main one I’m having a problem with is hostgator.

Well, I think there’s your I think the first thing is you’re talking, right. So when it comes to hosting, I think I would put different hosting different levels Hostgator, I would put at the levels of McDonald’s, or Lidl, we have little in the UK as well. Or Audi’s there. They are really, very, very, they’re cheap. But really, they’re not focused on quality and stuff. So I would definitely say gate gate, I would definitely move the hosting way from there. Another reason why gatos in particular is they also support adult content, which means that if you’re talking about neighborhood of hosting, that’s another reason why you may want to look at changing the hosting. If you get better quality hosting, then they have more features, more power, more features, or they will pay more money, the quality will be much better. And it’s like driving a car, you know, if you have to pay a bit more money, you’ll get a much faster car, a more reliable, and it’s the same thing when it comes to hosting as well. I’m not going to start on who we recommend yet, because I think that’s a whole conversation. But definitely Gator host, I would look to move away from that. And we can give a selection of who we recommend posting. Anyone else want to add to that?

Oh, yeah, I love that. Because that is avid trying to retire. I’ve been planning on retiring them real soon. So definitely thank you for the second second wave of confirmation.

Yeah, with that one, I’m sorry, I think you’re on the head with that. Because a lot of times, we always, especially when you’re starting it, when you’re starting out, you’re not sure where to host your site, you want to test things out, then yes, it’s good to know start someplace where you might feel comfortable. But you never want to build a site that you’re really going to start investing your time in and investing your content in, if the hosting is not really stepping up and doing what they need to do. And you also want to make sure what you’re going to use on there, if you’re going to have a lot of large files, you want to make sure you’re optimizing them. So even images, PDFs, you want to optimize them, even though they’re going to be on your hosting provider, you want to make sure that they’re not going to take a long time to download when they get to that point, especially if you’re going to drive a lot of traffic to it. You also want to make sure that the hosting company will throttle and allow people to allow you to have a large spike and allow you to come down without crashing your website as well.

I would also say as well. But yeah, so when we’re looking at hosting D it also depends also how much traffic you’re gonna get. But ideally you want what we’re discussing is more scalable hosting. So there is a few ones that if you’ve got the budget for it, we look at you know how much traffic you’re getting on the site at the moment D that’s probably something to look at.

I mean that this app, I think it’s I think I won’t that suggested that she was about to throw out there. I mean, I’ve been looking into Amazon Amazon server but the main the main thing is Just building a site, I don’t really know, the kind of traffic that I’m going to have, because it’s gonna be a multi site network, and it’s gonna be a lot of people on it.

If it’s a multi site network, I would and the only thing you need to understand about Amazon, which is great is the difference between managed and unmanaged hosting. Yeah, there are a lot of support from people that can help me with that. But I would look at I would decide whether you want managed or unmanaged. So Amazon and Google Play are the terms and probably the more advanced, but both of them are generally unmanaged. Yeah. And if you want managed hosting, I would say, No, no, no, I’ll give you a couple you can look at fly will cloudways kinsta. Probably there. Oh, and also, I’d say they’re probably pretty good ones. I’m actually in discussion with a multisite at the moment with kinsta. And they’re going to offer me a multi site using unlimited subdomains, which means I can go client.my website, client to.my. website, client three.my. website, running for a multi site. So I think kinsta is a good solution. cloudways and flywheel I know Andrew, you like cloudways? Don’t yet. I’m Allison done speaking.

Yeah, I mean, hosting, you go down this hosting thing. And hosting is, is different as milk is different. Hosting is not like there’s PHP versions. There’s does your does your host update the PHP? Does the host have caching on their side that clashes with the caching? On the, you know, the WordPress site? Like, I’m just finding more and more and more that hosting is not? It’s completely completely different between things. And so you’re absolutely I don’t like managed hosting myself. I’m a cloudways. Fan. Um, it’s cheap. It’s different, but it’s fast. Hosting is not all created equally.

Yeah, I mean, like, it just depends on like, how you manage your business, right? So if you are like running a large scale, kind of like war based agency, right, you probably want to have like, some kind of like, you know, AWS, Google Fulcher, I don’t know something that you can manage yourself. Like, you know, you can manage, like, the database through like, you know, different clusters, and you want to connect it like to, you know, like the IP that you wanted to, like, point on, you know, I understand that, like, you know, just depending on your budget, like how you want to manage stuff, like there is like, a lot of like, ways to do it like with wh m as well cPanel, manage, manage, manage cPanel. So that’s also like one of the thing it shows like, depending on like, what your your priority are, what is like the client? And yeah, is it like multi site or not? I’m Sam, I’m done speaking.

Yeah, it for me, I always make sure that the support is as top notch as possible. I love a 24 hour support if it’s either through a chat, or I can jump on the phone, because I tend to work a lot in the middle of the night. So for me, I’m up at two in the morning. And I’m testing things out, or I’m fixing things for clients, that way, I know they have low traffic. So I’m not interrupting clients trying to purchase things or anything like that at a mass scale. But I always make sure that whoever I’m dealing with, I try to have actual access to a person rather than either an automated chat bots, or I have to wait 42 hours or whatever, I mean, 48 hours or whatever that may be for someone to respond to an email. So that’s also something that I highly consider whenever I deal with a hosting company. And for me, I love a to hosting to deal with as I can do my own updates for things. But if I need, if I run into any issues, they’re quick to jump on and help assist me they don’t put me through the wringer just to get help on things.

Um, I completely agree with that 100% I actually use in the UK, and it’s really up to you day by day is company called guru. And the and they respond like in 10 minutes for everything manually. So I totally agree with that. But I’m saying that the ones that normally come up, and the ones that I’m probably going to use is probably going to be kinsta or cloudways. Because, again, they’ve got phenomenal customer service. And plus, they’re scalable kinsta is built on the Google Cloud Platform. And also, yeah, and that means there’s a managed support, but they can also they’ve got their own caching thing built into it. So they’re really scalable as well. But I think any of those ones that were recommended would be a massive upgrade to where you’re at at the moment, which is the most important thing. Yeah, just look,

I just love all the answers, man, I just, it was actually it’s not too many WordPress rooms out here but I’m definitely the perspective I just I just learned a few things just listen to the answers like manage servers man is self managed I actually prefer self management as far as the you know just listening to what you’re saying about what the providers actually provide it’s actually a place I purchased a few servers for for a lifetime. So, so for lifetime service but now that I’m you know, comparing, I guess 100 200 to Ferrari’s I guess I’m about to get a new car. But, um, as far as I appreciate that, that now it’s because that that Hostgator, I think, you know, they’re, I think they’re the worst one, the worst server I have. So just listening and looking at all the, the things that it may include, you know, even the new server, I just got, it has like 100 WordPress themes, Hostgator, I got nothing in here, but so that just thank you, for all that knowledge in that info. I think, you know, like me, I just started using WP old, ultimate, ultimate ultimatum or something like that. But it turns my site to a SAS website as a service. And that’s what I was afraid of, because you’re not allowing people to create their own sites within my site, you know, I know, it’s about to be a big server problem. So appreciate all that knowledge.

Thanks for all those questions. D, this is Greg. And I love all the comments that everyone’s had. And yeah, you know, a lot of people can can, you know, optimize a shared, you know, budget server host hosting company like hostgator. to a point, right, but when you want to grow, you’d want to expand, you know, into a service that can that can support what you’re trying to do, without, you know, struggling or loading slowly, you know, with Hostgator, what one thing that occurred to me before I, I’ll just kind of summarize the different types of hosting, and thank you D for appreciating everyone, given their thoughts in the room here. I love it too. And I always learn a lot, as Alex would say, we’re always learners here, right, as well as a panel on the stage. But, you know, one of the things that I didn’t want to forget was that, you know, if you are having a site that’s giving you resource issues, potentially, you know, on a smaller server, like your Hostgator server, one of the things that you might watch out for is that if you have some, if you have any automated backups happening, like a backup plugin, for example, especially, you may be filling up file size space with extra backups that you don’t need. So that can happen on a shared server or a shared server that has, you know, lower amount of space resources on it. So just check that at least for an initial look, because, you know, there’s resources on each of our hosting servers, not just storage space, but also PHP workers, as Andrea mentioned, you know, Ram, memory, and CPU. And you know, if you can, if you look at your server stats, you can often delve deeper and find out what is it that’s holding up the website, and it might not be file storage, it might be RAM memory, or something like that. And when you look at going into WP, ultimo, or or WordPress multi site, like you’re talking about, I would definitely recommend going with either self managed hosting, where you can get your own servers at your own sizes and power that you need. Like, you know, Alex and Andrea were mentioning cloudways is a great self managed, where you can choose the size of your own servers and your infrastructure that you use, I use a company called grid pain, which is an excellent self managed server and hosting program for WordPress, where they have a great software stack that’s specifically built for powering WordPress. And then managed WordPress hosting a little more expensive in general. But basically, it’s like one stop shop and they’re taking care of everything on your behalf. And for somebody that doesn’t want to deal with maybe optimizing or, you know, figuring out what kind of things you can do best, you know, managed server like kinsta flywheel WP Engine, those are examples of managed WordPress hosting, hosting companies that are quite powerful and optimized for WordPress to so as a summary, I appreciate it. Thanks for for for listening, and thanks for your question. d. It’s excellent. And I’d love to welcome Ismail to the stage. I know you’ve been patiently waiting. Welcome and how are you? Do you have a question or comment?

Hey, Greg, and Alex and everyone else love to be here. Thanks for being able to stage. My question is around embedding Google Forms or jot forms or to a web page or not necessarily a landing page, but maybe longer support pages. Would that in any way affect that performance over the speed of a site, though?

Yeah. That’s a great question as well and, you know, jot form, along with, there’s other types of, you know, embedded services that you can use, that it falls into the category of you’re, in order to load your jot form that is a form, that it’s an interactive form that the user can use that’s hosted externally. And so you, it’s a good question, because when you do embed something on your website that is being loaded from a separate website, you know, jot form servers, then you’re kind of beholden to them for for their site speed, you know, and so, what I, what I would maybe avoid doing is, you know, putting an embedded form, like a jot form, at the very top of what my main pages, but for what you’re saying, you know, you’re really jotform and professional companies that are designed to have embedded forms are really, you know, there, you’ve got to rely on them to optimize their own servers, which they’ll generally do. But you know, even though you’re beholden to them to, you know, serve the forms as fast as possible, you’re generally you know, that you’re not taking the resources from your own server, you’re actually pulling the form from an external server. And so I’m kind of rambling a little bit, but you’ve kind of got both things going on. On the one hand, you’re not using your own server resources. So that doesn’t slow down anything else on your site. But on the other hand, you’re dependent on on jotform, keeping their site or other servers fast. And so I would encourage you to use embeds like that from reputable companies like jot form, and not worry too much about the site loading speed, I just wouldn’t put it at the very top of your homepage.

And I also wanted to jump in on that too, because we also have to remember when we’re embedding things, we’re adding code to our websites. So code also helps to add to load times if you’re not optimizing that properly. But you don’t also want to over optimize your site, because then you can tend to break it, or something else can go wrong. So you just want to be careful and mindful of what it is that you’re doing. So if you have a website that maybe you have a form that you can use in the website, and just connect through an API, so at least you can still use or or send your information elsewhere, just understand what was the purpose of the form, the embedded form that you’re going to use? And can you just utilize what you’re already have that’s on your site.

Or you can use like something like a fluid back loop form plugins, to help you embed like, you know, this form, so you don’t need to like use like external resources.

I think the advantages of that service like jot forms, there’s so many more advantages to it, that they correlate your data. I’m a big fan of job forums, just because often you have 30 people filling out the form, you can download it as an Excel spreadsheet, like there’s just so many advantages that I would not be concerned too much. With the other things. I mean, I’m not that familiar with other forms, but I just know that job forms i can i can any of my clients can any assistant can go to job forms and get the information. So I really like that that sort of stuff is off, you know, somewhere else. I had the experience once thinking of putting things on websites is I was sharing. In my newbie days, I was sharing a graphic, and it was on one client site. So I thought, well, I’ll just quickly copy the code. Well, their site got hacked, and it took down the other site. So I’ve always been very, very cognitive of sharing, even documents and other websites, because you know, you want to check those links and make sure things are working. So that’s just something that came up when we talked about, you know, putting things from other places on your site. xandra. And I’m done.

I would just say, I’ll just add to that. And I think that doing external forms, okay, the repeatable sites. I actually think what Greg said is absolutely right, as long as the embed isn’t at the top of the page, and you can use a waterfall system to stay the the you want externals to load later. That means that the PageSpeed shouldn’t be affected, because the contents loaded super quickly from your server from the top of the page. I think that is that was the best comment, I believe. But I think external content wise, I mean, we all use YouTube and other places, as we said, ideally, what you could also do as well, where the form placeholder is Luigi could maybe put a box around it saying, no, please fill out the form and then it loads. That’s also another way to do it as well. So at least the user can see that the form will load into that place. I’m Allison done speaking

Thanks for that, Alex, I was just taking some notes in the discord channel about this stuff. And yeah, thank you for mentioning that I, you know, I agree we do and we should feel free to use embeds in different ways. And so just looking at the waterfall, basically the way that your website loads, you know, if you look at gt metrics, com, for example is one resource we can use to look at the speed of our websites. And if you go a little bit deeper than just the, you know, the score, the percent, you know, the score as far as a number, or ABCD, F, for how fast your site loads and click the waterfall, you can see what is loading first, and then what items you can really defer to be loading loading afterwards. And Andrea had a good point too, when you’re looking at, you know, using an external embed, or using a service and placing it on your website, and this is true of a lot of different tools that we use, there might be a compromise, that would be good, you know, that would be very, very positive. With a tie a few milliseconds of loading time increase, you’re getting the benefits of say, with jotform, you know, having the the data collection and analysis that you might not be able to get from an included form plug in with WordPress, or at least it might take a lot more configuration for you to be able to save and analyze that data and take it out of the the form, you know, inputs itself. But for me, you know, I do use WordPress form plugins for that. And there are some that do that excuse me. Sorry about that. I don’t know if you heard Siri just came up. Sorry, I think I press I pressed Siri by accident. But I guess that’s where I was. I was finished with that I use WordPress plugins for my contact forms. And I like ones that save the data in the database so that I can at least export it and analyze that myself.

Yeah, I can. I mean, I think, generally speaking, I’m similar to you, I’ve actually got a lifetime license, something called formidable forms, that if I didn’t, I would definitely be using Gravity Forms probably the most advanced form system for WordPress. But I want to put another point on this as well, which we haven’t, we touched on it. But I think we’ve really mentioned it, the power of caching, right. And remember that it’s the size of the page, and also the quality of the caching software. So when we say caching, what that means is instead of the page loading, again, many have to keep connected to the server. If the page is static and doesn’t have a lot of dynamic content, dynamic content would be shopping carts and checkouts, then the page can actually be loaded directly from the cache, right. And there’s different levels and different quality of caching software, that massively increases the speed of a page load. And also, there’s something that we did touch on, which we will be talking about, which is called CDN or content delivery networks, which means the content is loaded locally, globally. But caching is very, very, very, very important. And I think it’s it should definitely be a subject that’s discussed here. I personally like something called lightspeed because it’s built into the server. Another one that comes up a lot is called CloudFlare, which has got a very good caching system in it. And what does anyone else think I’m done speaking.

So with this, actually, like, if you’re like, really like a hardcore speed performances WordPress geek, there is like, in WordPress, or there’s an article there? Well, you use if you wanted to use like nginx instead of Apache, like with a lot of stuff to like, load your website. Of course, like there is like a few, kind of, like, you know, Ms. haigler. Positive and negative of like, using like nginx. And also like for caching, I would love to, like I use, like Redis caching, to help me like to, like, cache, like the whole thing. So if you wanted to set up Redis, you can just like download the plug in, but the thing is, like, you need to like be able to, like install the Redis from the server itself. So if you do it manually, this definitely helped.

Thanks, Sam, for mentioning that. It’s a good point, you know. And we get into caching just a little bit. From my perspective, you know, you we all Alex and Samuel just mentioned some server side caching methods, right? lightspeed or open lightspeed, oh LS as it’s referred to a lot, and then nginx and Redis caching are often needing to be configured at your hosting company and at your server and many of the best hosting companies have their own kind of configured and answer Setup caching systems that work quite well. And one thing I would I would caution is there’s another kind of type of caching where if you’re on a cheaper server that isn’t offering a robust caching system in the server, you there, there are many caching plugins for WordPress, you know, some of the popular ones WP rocket, WP total cache is another one. But those are, those are great caching plugins for WordPress. However, if your host is already providing a caching system, it’s not a best practice, it’s not a good idea to layer on top of that an extra, you know, caching plugin, like WP rocket, unless you don’t have that at the server in the first place. And so it, it’s very important that you look at what your server and your hosting company is providing, at the server side, before you go and try to, you know, set up and plug in a bunch of caching plugins or a caching plugin on your site, you really don’t want to layer those on top of each other. You want to use a single caching program that’s had some thought put into its configuration. And this is Greg, and I’m done speaking, I’d love to hear all of your thoughts about them.

Yes, I have my clients. Now if it’s not a host that I’m familiar with, I have them as their host. What do you recommend for caching that works best for your setup? Because again, in my earlier days, she thought cat hosting was hosting, but it’s not. And so I asked them to have the conversation. And then they come back with suggestions that work for their host xandra. I’m done.

Yeah, I think that’s, I think that’s a great comment. And as I say, what I tend to do now is is that I look for the caching, and we were going to mention the CDN as well. But cat two, particularly, I think, is majorly important. So I think from now on be, you know, you were talking about your hosting, but you’re looking at a grading, I would definitely make a note of asking around what caching they have in a caching built into the server is always going to generally outperform just a caching plugin, because that means that it’s configured to work with that server, and therefore it’s optimized for that server. So I’m totally with you guys. But definitely look for the hosting. I think server caching is definitely the way that everyone should try and go, they can get some done speaking.

Yeah, that made me actually when I was talking about caching, it made me go look at my servers, like hold on which one of these got some caching but uh, you know, me, I just think about, you know, you know, getting get these plugins, myself and Chuck, purchase lifetime for unlimited sites as possible, but I love the idea of, of in, in the site or, or out of the site, you know, what, what you were just talking about? You know, because I do have no, when you were telling Ishmael as far as embedding embedding format, absolute data, embed, know my my forms, but as far as the right now, I embed whatever my course, my course platform, but I bought a WP course, where a WordPress course making program. So I mean, I know, that course being built in the site, versus the iframe, you know, the iframe embed or whatever, of a platform? You know, I just, I mean, I meant the dilemma of it being all in one. But, you know, it’s just being slower. I mean, I like I think Greg said that,

yeah, can I just say a couple of things, you can actually do that, if you don’t matter. learning platform, I would say what you could do is what I’d recommend potentially splitting up the service, or what you end up doing is that you run the main site as the sales vehicle, Eg, maybe just a mainly lead gen and sales. And then what you do is to run the actual LMS, which can take a lot more resources. And the one thing you can do is you can run that on a subdomain, and then have that as its own resources, that’s a way to do is lit up the tours together. And that means that you’re not affecting the speed. The reason, the main reason is you’re not affecting it, you’re not going to affect the speed of the main site, which you want to be super quick for when people come in at the sales part of the site. And it means that you’re not affecting that speed. And then you can dedicate resources separately for the sub domains where my cat always decided she wants to play with a radiator, as we’re talking

about because I can make the course and make it a suit and then give it its own

and give it its own notes. domain. So what you’re doing, it doesn’t even need, it doesn’t need to have its own domain. It just needs to have its own sub domain so it can still sit on the same hosting package even if you want it to, but it has its own resources, which then means it won’t directly affect the main site. That’s one way you can actually do it in order to not affect speed. Yeah, so that’s what I do quite a lot of times whenever I’m working, I got my main site that I have its own resources for the sales vehicle. And then if I need to do other operations, I set subdomains with their own hosting packages. And then each resource can be given to each package. Yeah. Also, I think we just want to mention as well, we touched on it, we should also talk about as well, content delivery. Now, we’re back to someone else will explain what that is and what that means.

I’m sure, Alex, thanks for bringing that up. This is Greg. And I’d love to talk about CDN. It’s, it’s it’s a little bit related to caching. And one thing I would mention before I introduced a CDN, just very quickly as we transition from the topic of caching. And you know what, we’ve gone over it a little bit, but relative to what Dee was talking about, you know, he’s talking about some dynamic websites that need to there are certain pages in either like WooCommerce, or e commerce sites LMS, or courseware. As deep mentioned it where the users who are taking the course need to be logged in. And whether they’re logged in or not, depends, you know, the the page might look different. And therefore, there are certain pages within systems like that, that cannot be cached, they need to be loaded in real time on the server, so that the user gets the appropriate information at the time, you know, for their shopping cart, for their, their course pages. So they know where they are in the course and what you know which videos they didn’t see yet, and that sort of thing. And so sometimes, you know, LMS sites and e commerce sites are known to take more server resources in general, because there are certain pages and sections of the website that can’t be cached. Meaning that they can’t be pre made at the server and then just delivered as is. But they do have to be kind of built in the background as soon as the user visits them. But one thing you can also do as I transition to the topic of a content delivery network, and I know that Alex mentioned, the company CloudFlare. CloudFlare, does a lot of different things there. But one of the things that CloudFlare, if you if you use CloudFlare, and they have a great free service, if you use CloudFlare, to send traffic through CloudFlare first, and then to your website, they do a few things all at once they, they provide some page caching, but one of the most important things is, is that they do provide a content delivery network, even in their free service. And let me define that as I’m getting around to it. But thank you, Alex, for that. But for everyone in the room to understand what a CDN is, basically, it means that, you know, your, your WordPress website, your website is obviously hosted on a computer somewhere in a data center, connected to the internet internet in a fast way, right? It’s actual code that sits there on a computer in a basement with air conditioning, hopefully, right? And so if that data center is located in California, for example, and then somebody over in Europe wants to open your site, you might think well, okay, they’ve got it, you know, get the data from that site all the way across the ocean, or across our through a satellite connection. And because they’re on the other side of the world, that’s going to be slower. And it would be except that in a content delivery network, what a service that can provide you with with a CDN is that they put copies of your website and its pages on different data centers all over the world. And so whoever browses to your website, wherever they’re located in the world, geographically, they you load the site from their closest data center. And that’s what a CDN does. It’s a network that delivers your content from different places around the world. And combined with caching. It’s a really powerful way to have ideal speed and performance for your WordPress site. So this is Greg, and I’m done speaking. I’d love to hear your comments on that.

Yeah, I think everything you just said is massively bought us want to just touch on something before we get onto the CD ends anyway, is that the the reason why sites like for example, if we’re talking about e commerce site, training sites, and also membership sites, I’d say probably three categories. That’s why they need a lot more resources. Also, I definitely would also say what you’re planning to do is setting up multi site those sites in a lot more resources because of what Greg is saying, because a user has to log in and those pages aren’t cached. That means the server is doing more work. And if you times that by 100 200 500 1000 people trying to work on site once, or buying on a site at once, or looking at videos on a site once in a training course, that’s why they need a lot more resources. I mean, we probably should touch on some of that. But I’d probably say is speak to your hosting company or speak to you’re planning to do or tell them what you’re planning to do. And then they should allocate resources will tell you what type of server would be able to run that on their network, because I believe that everyone is slightly different on how they allocate their resources. But that is the big point if someone has to log into the site, and it can’t be cached. that uses a lot more resources on the actual server. And that’s one point. My point about CD ends, I think cloud where I think CloudFlare is a brilliant solution. I will also mention I believe now, lightspeed has also added CDN as part of their solution. I’m not I’m not saying it’s perfect, but they have added it. That’s my only comment about CD ends. But definitely, besides global, you think you’ve got a global audience, use the CDN. Definitely.

Great. Thanks for that, Alex. And Hey, hello, Mark, I’d love to welcome you up to the stage if you had a, an even waiting patiently and listening in but loved it love to have you here. And if you have a question or want to contribute to the discussion, Hey, Mark.

Hi, everyone. Yes, I do have a question. It goes back to when the room first started. And you were talking about the one second PageSpeed timer to one second load time for like that main section on the site. And so I started thinking about it, I wanted to get the opinion or the views of the panel, when you all are calculating that because there are different load speeds depending on you know, internet speed, connection and device. And and all of that. Do you look at like the average speed of a mobile user in your target demographic or desktop user? Like, it seems like that would be important to, to kind of target who you’re actually making it fast for and vice versa, like who you’re not going to make it fast for? So I’m just curious, your you all’s thoughts on that. But that makes sense. Let me know if it hasn’t,

it makes sense. But usually, that’s where when you start testing, and you’re looking at gt metrics and things like that, that’s what they’re helping you look at, they’re looking, they’re helping you look at the mobile response. And they’re helping you look at the desktop and stuff like that. So you have more of a it’s more not really a industry, speed of thing that you’re looking at first to keep make sure you’re on track, you’re just wanting to make sure that as opposed to all sites that are either the size of your website and things like that, that you’re in that type of a category that you’re actually loading, according to what that would look like for for the size of your website, if that makes sense.

Can I just also comment as well, that what I tend to do is is that when a site it? It depends what you got? I mean, ideally, it depends on whatever site is brand new. Secondly, if site is a Rebuild of an existing website. So generally, in my discovery, when I’m dealing with a client, what if they’ve already got analytics, there was already a site there. What I tend to do before I build a site is look at audience and technologies. And in there will tell you how many what the split between mobile, tablet and desktop is, I’ve worked on businesses that are aimed at festivals, where 95% of all the traffic is mobile. 95% of all the traffic is actually mobile. Yeah, I’ve dealt with older sites that deal with older people. I’ve dealt with charities help the AG, which is a massive charity in the UK, to do without and and that was the opposite. So literally, like 20% only use mobiles, right? So I think the important thing is to prioritize on the traffic of the business. And then exactly Charlene said, what I would then do is I optimize for each situation. So optimized for desktop, burst, or depends on the priority the desktop. And then for most people, I would do as little as I can to get that mobile loading as quickly as possible. And also remember, if you use Google check, which is Google PageSpeed, which I think Greg needs to put a link to that, that uses something called lights speed. I think it is all light out loud like that. Yeah, that’s a lighthouse. Yeah, and it works at 3g. So actually, you’re testing how the mobile will load on a 3g network. But I think gt metrics you can actually do it as well. 3g, 4g 5g, and that is a really good way to test what do you guys think? Yeah.

Actually, go ahead. I’m sorry, Greg.

I know, please go ahead, Mark. Yeah, I

was gonna say, I’ve been using web page test for a while. I’m starting to use gt metrics every now and again. I don’t know, I’m just used to web page test. I think they’ve been around the longest. But yeah, I appreciate your answers. I was, you know, a while back, we became really popular to the idea of mobile first design. And I guess the trend, and maybe it’s still going that way. And maybe mobile has surpassed desktop and tablet at this point for a lot of sites. But yeah, just wasn’t sure if if the mobile first performance was like, the way to go, you know, start with mobile and have like a performance budget. And and, and then let what happens on mobile kind of dictate what goes on with the rest of the design of the site. I know with with oxygen, but he’s an oxygen and Devi a little bit with WordPress. And it’s mainly kind of built for, like desktop down. And, yeah, we’ll just think through those things. So any any comments on that? I appreciate I appreciate the comments that you’ve already made. Thanks a lot. I’m done.

Because Alex, hit it on the head, you want to you want to still no matter what it is that you’re looking at, you want to know what the overall speed is for each for each instance. But you still want to focus on where How are you getting your audience? How are they coming in, and then you can start tweaking. And you could also if there’s things that you have on the desktop, not everything needs to be on the mobile. So you can also gauge how to really build out the mobile layout, and what should what should you hide and, and things like that? Or maybe you have things that are mobile only. So you can definitely take that course as well.

Yeah, I said, I’m still trying to figure out with, with, with WordPress, how that affects performance and everything. Like if it was just a straight HTML and PHP and all that. I mean, it’s not PHP, but like JavaScript site, like hiding the removing things. I’m still figuring that out when it comes to WordPress, and how well that actually works. Because some of that stuff still loads, it seems sometimes and it’s just doesn’t appear, but it still takes up resources. So but yeah, that’s a good idea. Thanks.

Yeah, thanks for that mark. I would also add, you know, as far as testing from these different services like Google PageSpeed, insights, gt metrics. Another one is another good one is pingdom, which will give you some data, oftentimes, it’s recommended that you kind of vary up your your testing methodology by testing from different locations in the world. And that, of course, in PageSpeed, with Google, you can test mobile and desktop and Alex’s point, yeah, it’s a, you know, they’re, they’re testing mobile at a at not the fastest possible mobile speed, but more like a 3g speed. And so you can optimize for what your traffic is going to do. But I guess my point was gonna be, you know, when I’m testing my sites for speed, I’ll get different results. Every time I click, so I’ll do three or five tests in a row, and then kind of throw out the highest and the lowest numbers and take an average. And because you’ll find that they, you know, they give you different results Five minutes later, because of, you know, all the different factors, there’s too many variables, that it’s not always the same. But that’s my two cents.

I’ll just add to that as well. And I’m going to say this statement, again, from no learner who actually I did actually learn this from so I’m not saying I invented this or anything like that. I like to always try and give credit to everyone. And I’m always learning and always beginning. I’m always learning, as I say, anyway, what he actually said is the best way to do speed tests, which is now what I do is, if you’re using Chrome, click on your profile and open a window as a guest. And then do the speed test. Don’t do it when you’ve got your word tool, profile open. Doing it again, it’s not even a private window, just do it as a guest. Nothing, no plugins, nothing loaded in it whatsoever, and then did speed tests. And that is a better, more accurate way of doing it. I’m not speaking.

Yeah, that’s interesting. I guess the only thing with that is that how many people who actually will use your website actually will view it that way. Most people will have, you know, plugins and things like Yeah.

But the fact is, is that it’s a bit like saying, if I was if you’re a musician, I’m actually going to put your studio together not to do music work, but to do podcasting, but you get studio monitors, which should be the most accurate sound, which is just natural, accurate sound. So if you log in as a guest, right, you’re logging in the base. Why’d the browser loads? Right? If you don’t, I’ve got in my browser, I’ve probably got what? 40 plugins, 30 plugins? Yeah, we’re, if we’re developers, we’ve got loads of plugins. I mean, I’m not going to go. I mean, if we went around the room and said, How many plugins we’ve all got, it’d be loads. But just doing as a guest, should give you the base number of how long that page loads. That’s my last comment, mainly medicine. Does

that make sense? And then you will know that any back? Yeah, that’s it? That’s good point. Thank you.

Yeah, that’s great. Thank you for that, Alex. And, you know, I haven’t gone down that road very far. But I know, using the Chrome dev tools that are included, you know, enable you to, to look at the waterfall in the most detail as well, to see what things are loading, that you may be able to either get rid of, or defer for particular pages. And so I like that idea of cleaning up and using just kind of an empty browser to get, it sort of just gives you a baseline, you know, you know, marks right, you know, a lot of people probably do have some plugins in their browsers, maybe not as much as developers, but just gives you a nice baseline to go by. And really what we’re measuring against is ourselves. In many cases, we’re trying to make a website we’re working on load as fast as possible. And every website is unique, right? So you want to what we’re really doing is looking at the numbers and then improving them and comparing them to our past tests. And so, you know, going with, with an empty browser is an idea where you have you know, you’ve basically got an empty an empty, empty box, a clean slate to go from, and then try to improve from there.

Yep, like to ask the question about the CD, CD, CD ends I was talking about. I was I know some, I think my platform already comes with CDN. But as far as additional CDN is that, you know, I know with the cache, you know, I know, having two of those doesn’t doesn’t really make sense. But just having more than one CDN. Does that make sense?

No, no, you only want one CDN. You want everything to work through one CDN. And now I think CloudFlare probably would say is the industry standard. Does anyone agree with the CloudFlare thing? But you want one CDN? Generally?

Yeah. Yeah. D This is Greg, I would agree with that. 100%. Oftentimes, you know, you can you can look at like media or or image optimization plugins that you use, like,

I think I think that’s what what I was. Yeah, didn’t that I just, I just found one. It’s actually called search IQ. It’s called search, search IQ. And I didn’t know if that made sense. It said it had a plug in, but it’s for the images itself. So I guess, and and the e commerce Oh, and, and that’s Yeah, I guess that was the question. How

can I just let something about that with the images. And what you want to search for is, as I said, t we discussed this as an earlier point. But the new format, which is the exciting formats, and it called web pay, WordPress, on the latest update, which we did, which was 5.8, added web p as an option that you can now upload images as web pay. But what it doesn’t do is take your existing images on the website and convert them to web pay. The one that there is a web p conversion, I’ll get the plug in for you that I’ve used. And I’ve converted the site and e commerce, I think with 7000 images on it all to web P. And that interdite improve the site speed massively. So that is what I’d say I’d look for is a web page. And the caching should be loading the images from cache anyway, or the CDN. So I wouldn’t put more, too many things on I would have one CDN, decent server caching, and then something to convert all the images on the website to web pay probably would be what I probably would say is good to do anyone else agree with that? Or have any other comments around that?

Yeah, 100%, I would agree, Alex, everything that you just said, makes a lot of sense. And just to kind of wrap up that idea. I, you know, D if you’re going to use, you know, an image optimization plugin, that also offers a CDN for those images. Basically, that plugin company is taking the expense of hosting your optimized images elsewhere on their own servers and serving them from there around the world. But if you already have a CDN working, you know, on your server, for example, by using CloudFlare as a layer in between your domain DNS and your website itself, and so it’s taking traffic using its own CDN, you’d basically want to turn off the image CDN, you could still use that plugin for optimizing your images, even converting them to web p, or optimizing them as far as compression to smaller file sizes like Alex was talking about. But you wouldn’t want to double up the CDN. Just like you wouldn’t want to double up caching because it can cause conflicts.

And that becomes, you know, important when you’re building your own site. And you don’t really know what’s in each of these tools. You can start having clashes with things because again, it’s a detail that you’re not looking for your you don’t know like I work in Divi, and I can’t tell you the number of Divi sites I go into fix or rescue or redo that have like a header and footer plugin, because you already have it in Divi and so I see these redundancies because people they they don’t know. So, you know, again, it’s just one of those things that comes with experience and seeing enough of them and things like that. Somehow another topic I’d love to talk about because cloudways and flywheel and those hosts don’t come with email. And so I like I believe in separating email from hosting. So that’s something else that we can talk about, because, like cloudways, doesn’t have email support, they offer it, but it’s not built into the hosting, like it is at siteground and places like that.

Yeah, I also wanted to piggyback a little bit off of what you were saying, Andrea about, about the plugins having a clash, because what I also have to remember and keep in mind, I have a website that I’ve been doing since 2004. So as things were evolving with WordPress, and they were releasing things to become part of the core, I have to go back and install a lot of the plugins that I needed, because WordPress just didn’t have that before. So whenever you’re doing now, whenever you’re building your site, and you’re seeing the releases that are coming out, you want to keep an eye on what is it that they’re now supporting, that you no longer need the plugins for and start deleting those plugins, so you don’t have that clash.

Yeah, I think that’s a great point. It’s brilliant. Likewise, if we just mentioned that we now have lazy load images, and so forth, and plugin to use to do that beforehand. I completely agree with you totally. And doing that will definitely increase the website, if you want the best websites, the ones with the least plugins generally, a lot of the times. Yeah, I totally agree.

Yeah, thank you for that. And, you know, the, the people talk about, you know, oh, can you have too many plugins, you know, or how many plugins is too many plugins. And then, you know, of course, if they’re clashing and trying to do the same thing in a different way, that’s when you can have real problems that can cause your website to go down or at least load slower. But it isn’t the number of plugins it’s really how those plugins are coded, right. And so, you know, within a plugin, the the longevity of that plugin is often tied with whether that plugin is is updated and maintained over time. And and so really, yeah, it’s not the number of plugins but it’s the quality of those plugins. But Charlene is absolutely right, you really should not only deactivate but just delete completely any plugins that aren’t being used, and especially ones that have duplicate functionality elsewhere, like Andrea talked about with Divi, oftentimes, you know, now with Divi we have, we have global elements like header and footer. And, you know, oftentimes, especially as we make websites for clients, you know, clients will potentially go in and be like, Oh, I need a, I need a welcome bar for a coupon sale I’m doing at the top of my website, I’m gonna go and look for plugin. Ooh, look, here’s one. It’s called, you know, the header bar coupon plugin. And now the way that should be done is to go within Divi in the global header that’s already being used and build it there. But oftentimes, we find those issues. Very, very true. But I would love to address. Well, Alex, do you have a comment on that before I move on?

I just want to say I think we mentioned this before me and Andrew, he told me it was another room or whatever it was. We talked about the site that we’ve encountered with the most plugins, the one I’ve actually encountered was, I think, for university that I manage. I think the count was around 65 plugins that she had on the website. That was like the worst ones I’ve seen. Anyone else want to comment on.

I had one that was 110. And it was custom built Devi and it was running on PHP five and I had to add it wouldn’t let them use the visual builder. So I turned the plugins off 10 at a time I did a screenshot of all the plugins and I turned them off 10 at a time Like pool testing, and I figured out which one it was which pool it was in, and then I had to manually go through. But it was one of these sites that had had 10 developers in it over the years she’d had it. And you could see, when people didn’t know the functionality of the theme, they were just adding things in, because that’s what they used on other sites. And so it was really a mess. So I pressed the button to update it to the newest divvy and held my breath. It all worked. But it was Yeah, it was it was scary.

Yeah, I think that’s the point here. And this one, again, had loads of other people working on it, and everyone was doing their own special thing. And then things get super messy. So I think just to finish on that, no, the best thing you can do is, is if a site’s big, or you’ve had it a long time, and it’s running slowly, sometimes it’s better just to deactivate it, or just kind of start again and rebuild it, and then just take the content out there that will do a major job for speed as well. I also want to touch on something else that was mentioned as well. I know you said that bill has been updated. But I still think oxygen is a very, very good boss builder. Definitely also very, very good as well. How are you guys finding the building? Now endeavor, you said that they’ve done a major update? Greg, Andrea, how you finding was that with speed, but I would also say that I still think native WordPress is still the way that we should be going. Because that, you know, Gutenberg, and native should be faster, because there’s nothing else to load. How’s Divi for you guys?

Yeah, you know, I i’ve been slowly following all the commentary. And if you’ve read about it at all, there’s been certainly it’s a big big update, there’s like seven different dynamic loading changes that have happened in the background with the new Divi version at four point 10. And, you know, in the Facebook groups, you can see a lot of people just, you know, clicking up day and going, Oh, my God, what’s it broke my site, you know, and so of course, you basically don’t hear when it goes really well. You hear when things are broken more often. But one thing is the most major. Some of the most major things I’ll just give us a quick overview is that, you know, what Devi is done in the background is they basically modularized and broken apart their CSS and their JavaScript that powers the theme, and powers your website into these. And it only loads the CSS or the JavaScript that is being used for the front end, meaning it leaves you know, instead of having a huge CSS file, they basically made the default CSS, something from like 800 kilobytes down to 80 kilobytes, in a general sense, for Devi sites. And that’s just one particular thing. They’ve also addressed a lot of the new modern, like Google and SEO needs, like critical critical threshold height, you know, deferring JavaScript and things like that. But one thing that’s happened is that because Devi is using some caching techniques in the background, in order to, you know, like minify, and combined CSS files and JavaScript files, and display them in line, instead of loading them at the front, it differs all that loading until after the top of the page has been loaded for the user. However, if you’ve already got some caching systems in place, the biggest issue has been that when people just update their Divi site, and then take a look, there’s caching conflicts. And so that comes back to you and you only want one cash at a time happening. And so the thing to do is, is within divvy in the new options, you can turn on and off these about seven different systems for caching and modularizing the code in the background and you can turn off each one of those individually and see which one is conflicting and then decide what you want to do. If your server is already minifying your CSS then you don’t need to have Divi do that as well. And that’s where some conflicts were coming from. But people are talking about and in you know in the people are talking about getting their Divi sites with no design changes from you know, like in 70s and 80s mobile page speed score in Google PageSpeed Insights up into the 90s to 99 and 100, using just the Divi update, and so it’s been a really positive thing. Like we’ve talked about before. It’s great to have those design tools layered on top of WordPress that Divi offers, but oftentimes that does slow down the loading for the user depending on how you use it. And so I know all the page builder companies are working on it and aware of these kinds of issues. I’m really happy that Divi has been making strides in this area. But I would agree with Alex and oxygen builder has been built for speed and performance from the very beginning and is still one of the fastest for sure. WordPress core with the Gutenberg block editor. And you know, with a fast theme, like cadence, or Astra or something like that is really the fastest you can get as far as what the user needs to load and

cannot start to that. As we’re talking about speed as word. That’s okay. What I’m now doing is not, I’ve got my second site I’m actually doing with so I’ve rebuilt an entire ecommerce site. Originally I was using elemental, I’ve fallen out of love with elemental various reason not in partly because their price increase that they did. I think it’s disgraceful. But generally, I don’t want to be beholden to them. So I switched over to oxygen. And me and Greg have been talking quite a while and we’ll have here. But what I’m now doing is a hybrid oxygen solution. So what I’m now doing is, me as the developer uses oxygen to develop out the templates for the for what I’m doing, but the user, meaning the person actually updating the website only uses Gutenberg. So what I’m doing is I’m building all the templates out in oxygen, but I’m using cadence blogs and various blocks to actually build out the page. And I can also use oxygen to build out blocks to use in Gutenberg. And that means a pages load natively. And all the client has to do is just hit the edit button, nothing else to load. But I can still use oxygen to build out all the templates. And I’m finding that is one good for the clients to updating. And secondly, load speed. Definitely because it’s native. So I’m just saying that I’m actually using oxygen in combination with Gutenberg, that’s the route i’m actually going down. I’m adding some time speaking.

Can I can I like imply or so if you guys like also, there’s like another way like also to like, be having like the super fast website without a plugins and natively I created this, like WordPress, with like, tailwind, and cool. And with the cursors and brosur things. So I will like share, like the GitHub on like the group. So you guys can check out like how like, you know, if you are into like, you know, bundle your minify your CSS or JavaScript yourself is definitely like helpful to like using like this bundlers that you like such as like Webpack a gulp grunt and there’s like several other more that help with, you know, your development process. Of course, like, you know, you can like also put like your website also, like, run with like, Gutenberg, or like, you can have like custom fields like using like ACF to just show the field and their client can fill in and you show the data in the front page. I’m Sam, I’m done speaking.

Thank you for that, Sam. Yeah, that’s, that’s great. I think I understood properly that, you know, there’s this there are some different ways to build things more robustly, but then only allow the client what exactly what they need and and you don’t let them get into the weeds with say, opening up the oxygen builder, for example, or even in Divi, you know, I’ve had, I understand that the Divi Builder and the visual builder is easy for me to use, but it has a lot of functionality. And it’s complex, right. So for some clients, I’ve done this as well as you can do it with Divi as well, with the global theme builder, you can use a template for just blog posts, for example, where I’ve built, you know, a design using the Divi tools where it it pulls data from each post, and it displays it in a colorful and a design a way that matches the website design. But when a user when that when the website owner goes in to create a new blog post or edit a blog post, they’re just working with the Gutenberg block editor. And they’re not allowed to open up Devi and get all confused and call me on the phone. And so it is important to know, also the benefit of that is that the you know, the client has ease of use, but also improves the loading speed on the front end where the you know, everything has been transferred into the block editor like in your oxygen example. Alex, I really liked that. That idea.

Yeah. Yeah, I just think that I mean, I’ve encountered this And generally speaking, I don’t think oxygen, oxygen, I love what it does oxygen and a bit like Devi can be complicated as well. Visual Composer was complete nightmare. I mean, we don’t even get to go down that I’ve noticed using that if you are, please consider changing digital from visual composer. But the point is that the user just wants to update their content. And I do think that oxygen is not designed for an end user option is definitely designed for a developer. So I think that I’ve come to the realisation that a user or the person doing daily updates on the site should never see the complicated builder because it’s too much for them. And I do think I’m not saying the actual Gutenberg is perfect. It’s still being developed. It’s not great. But because I can output from oxygen to Gutenberg Glocks, I can do anything I need to do with that. And therefore, I think we should all be conserving the native is the way forward for editors better edited website, that’s only my thought, I’m speaking.

Yeah, agreed, Alex, the Gutenberg block editor is getting better and better. And it’s, it’s approaching all the functionality needs for many projects that, that, you know, the originally, all the page builders took over that role, when WordPress did not include that. And so, I think it is important. Go ahead, Samuel.

I think like, it’s great to use, like, you know, oxygen, as like a, you know, if you’re like you as a developer, but one thing that I hated, like using, you know, oxygen is like, you know, if I update, like some content, and if I’m like, heikkila, it’s like, there’s like a delay, and also tourists like is loading things that I have to like, manually reload itself. So I definitely hate that I think like, you know, natively bundler, your site, like natively, you use coding, like, you know, manually then from PHP, like from the scratch is like way much better and in like, the depth as your developer experience. So we’d like processing. First of all, you can do it automatically loaded, like, like the files for you, immediately whenever you change it. And the tailwind have a functionality called just in time CSS. So it only load the CSS that you use in that page only. And it’s controlled by JavaScript. It’s just amazing. I’m certainly done speaking. Great. I’m

just making some notes there. Go ahead, Alex.

Yeah, I was gonna say that I think I mean, I do agree with you that Samuel on, you know, certifications, bespoke coding and hand coding is great. And I think the everything you just said there, I haven’t checked out tailwind, but I have heard a few people mentioning about it. So I will check that out. I think it just depends what’s needed from the client and what you’re basically doing. But yeah, I mean, ultimately, hand coding everything is generally going to be quicker by thing. But oxygen still is pretty good in terms of, I can get a page out pretty quickly in oxygen. I do agree. The only annoying thing about Austin is the load speed of loading origin. But I have found that if I load it in Firefox, it does load a lot quicker than if I use it then if I try and do it in Chrome, so that’s one thing but I do go the obviously encoding is always going to output out when in terms of developing. So yeah, I mean, it’s nothing.

Thank you. Thank you. And Colleen Hey, welcome to the stage. I know you’ve been up here for quite a while. I didn’t know if you had a particular comment or question. I’ve seen you blink your mic a little bit agreeing with one of the topics we were talking about. But are you there calling welcome.

I am Hey guys, I apologize. I was looking forward to this chat and I had to rush the kids off to school so I’ve been in and out but I’m at my desk and listening and loving all the valuable information. I actually have a question to pose to the panel if I may. And if you guys have already covered this in when I wasn’t here Please tell me to go back to the discord channel and I will go through the notes but wanted to get your thoughts on loading fonts and what is the best way to do that whether it be using you know a font face hosting them on on the server or using Google Fonts or Adobe you know what what do you guys what’s your your mo for font loading?

I prefer to use the Google fonts, Divi comes with them. And I like to use them I had the issue recently that surprised me. We we custom loaded up a font called Cameron sans, which is fine. You can upload that into your WordPress install and it’s fine. But what happened was I had to this was a translated website. So it had to be in French. Now when I put the accents on top of the letters of this uploaded font, it made them bold. And it was the weirdest thing because I couldn’t see the bolding in the code. It was like was that this mystery? It was like why is this he with the accent above it? bolded. And it was a font issue. So we actually had to go back to Google Font. We went back to Open Sans which is my favorite. And that at that bolding went away with the accent. So again, there’s some funny things I like to stay with what’s there. It’s fast. You don’t have to buy anything. What I’ve found with fun his clients get really creative in Canva, for instance, and they start using some weird font like Bob’s Red River, rock font or something. And then it’s not available, you know, if you want to use it on your website, so I find that Canva kind of gets clients confused. So when I work with brands, I try to get them to, like, I try to work with them earlier. So they’re not using some weird font that I actually can’t use on the website, like it only can be a graphic. So those are my thoughts about fonts, I like to keep it clean and lightened what’s sort of their

eye. I agree. And I recently ran into an issue with loading of a font that the client had access to they had it but for whatever reason, it just wasn’t translating. So I got them to go back to a Google, I don’t always like Google. Because, you know, at one point, now everything looks the same on across all different websites. So if it’s a font that it’s more for a heading, then I don’t mind trying to customize that and make and upload that. But I tell my clients to first think of your branding, if this is part of something that gets actually a font that you purchase, then yes, let’s upload it, let’s make it mainly focused on the headers and stuff like that everything else can stay generic, I would say, based off of Google just to make it easy for other browsers and stuff to pick up and also keep it maintained. So then they’re not worried about updating and purchasing different fonts, if they if they change their mind, for whatever reason. So that’s what I usually say to them, if they want to make a font different, I asked them, if it’s something that pertains to their brand in particular, if it’s something that they purchased, and then we move forward.

I totally agree with Charlene there it like, it’s just all depending on like, the branding, all depending on like the design of the website, you know, if you’re like starting from scratch, of course, like it’s so much better to like, you know, if you can control the design, How’s it look like? I think like, if you’re using oxygen or like whatever, like builder use, you can use like, there is like this plugin called use any fonts. It works very well for me. And also, like, as a designer, you should do like accessibility testing. You know, and like in the checkout, like if the phone are like, you know, you know, available in like the, you know, brother for language that like, you know, you’re using, for example, if I am like in Vietnam right now, and I have a Vietnamese client, then there’s some form, even in the Google Form, it doesn’t work. So you have to like find a font that like support your languages. So it’s all depending on like in, don’t forget, like, you know, to offload the user experience and the user interface.

Can I just add to that, if that’s possible, as well as want to say, Samuel, I think what you touched on is really massively important. Accessibility is massively important. But obviously, this topic is meant to be around load speed and Page Speed. But I completely agree with you that I’m now test everything, I build all my sites now in dark mode and light mode for dyslexia. I don’t use anything less than a 20 pixel font size, and I’m totally with you on full accessibility, which is massively important. I will also say as well, if you want to get slightly creative with fonts, let’s not forget as well, if anyone has got an Adobe account, then Adobe fonts, also pretty extensive as well. And they’ve got some really nice font pairings as well. And also you can use, there’s a font pairing setting also in Google Fonts as well. There should give you some font pairings as I like, I do like to sometimes mix up the headline and then the main font, but I’d say definitely look for Adobe fonts as well, which was a pretty extensive if people want to make things look nice. I’m done speaking. Okay,

guys, that’s that’s been great. Sorry. Great. Go ahead.

Oh, no problem. I was gonna say, Thanks, Alex. That’s awesome. In all of you guys. Great input I just was gonna answer, answering it with what with what I do as similar to Andrea, using Divi for quite a lot of websites these days, and especially Astra after the speed and performance updates. I like to use Google fonts, it gives me a lot of font pairing options, you know, there’s a lot of options. And, you know, even if you have a weird Canva design that you’re trying to match, there’s often, you know, Google Font that can be used. And for everyone in the room, you know, Google fonts, that enables you as a website designer to use a custom font and load it from the Google’s servers and deliver it to the user in their browser. Even if they’re, you know, they don’t have that font loaded into their browser. You know, there are a couple there are some standard fonts like, you know, area Helvetica and you know, sans, that are just automatically used and would be used as a default if the user couldn’t load the font, for example, but I guess my point is, I like to use Google fonts. And I’ve just wanted to mention that one of the many, Divi speed and performance updates and four point 10 is that they’ve improved the Google Fonts loading. In fact, you would want to defer the loading of your Google Fonts if you can, till after the top of the full content has loaded, because that’s another example where you’re depending on Google’s servers to give you that, you know, those fonts and load them fast enough, right. So what Devi is doing is it’s enabling caching of the Google fonts. And it’s loading them in line instead of a separate, you know, script in the background. So it reduces the render blocking requests that Google might penalize you for, and it loads, it improves the page load times on that. So I tend to rely on Google fonts, because it’s easy. But I love that idea of if you need to, like Alex mentioned looking for Adobe fonts and other font sets that you can load. And Samuel, thanks for mentioning that plugin, use any font. I think that’s another good way to go if you’re stuck and need to find your particular font for a design you’re trying to accomplish. And so those are my comments. Thanks for that question. Colleen. This is Greg. And I’m done for now.

Thank you guys, that’s been really helpful. Because I also use Google fonts and Adobe fonts, but I try and pick one or the other. So I’m not pulling from multiple sources. But I do have one other kind of follow up question. I would assume that using Google fonts. So for example, I have a client that’s going to use railway as one of their their fonts on their website. So obviously, I can get that through Google fonts. Just apples to apples, if I were to download Railway, convert it to, you know, a w f font file and load it using font family. Would that do you think be quicker? As far as just just straight speed optimization, not talking about accessibility or anything else? But just straight speed? Would that be quicker than using the embedded Google Code? Do you think? Or does anyone have any thoughts and the reason I’m asking is because I have a similar situation with an Adobe font, and Google is penalizing me for, like, when I do my page speed test, they’re like, oh, you’re not loading this, you know, it’s not, not this, it’s not that we’re docking you. So we’d love to hear some thoughts on that if, if possible,

I would probably say the best thing to do is the only way to really test it is to run a test and actually do what you were talking about. And then test both of them, I would imagine that actually an embedded webform with good caching. And remember, server caching also comes into factor here, probably would be quicker, because it’s loading natively without having to go anywhere to get the data. Samuel, do you have any ideas around that? or anyone else?

Yeah, I do. Like that’s like the part of like, you know, usability testing process, I guess. You know, like, the usability testing, or like accessibility testing. Or like, you know, you have to check the contrast you have to check like if the phone like no penalize in the way you checked, like, you have like a deficiency emulator. You check like in like, different, like, type of like, browsers and like a mobile phone, and things like that. I don’t have like any kind of like, you know, a good way solution to do this. Because like, if like the phone is kind of like generic, kind of like phone. I will like just use like the Google phone. But if like there is something else out there that you know, we want to add, I used to use any form. I’m Sam, I’m done speaking.

Thank you guys. The usability test, I think is what it’s gonna boil down to. And you’re right. It’s just a matter of, you know, testing both and seeing which one works the best. So I appreciate your feedback. Thank you.

Yeah, and Kelly, just a final thought I would check specifically why Google is saying that, that is a negative in your score as far as the font and loading the way that you’re loading it, we’re like, what do they want you to do is they want you to defer that loading until after you know, the critical stuff is loaded at the top of the page, or, or what and and see if you can solve that problem specifically, of course, if you need to load the font to get the top of the page content looking right, you know, you’re gonna have to do that. And so, yeah, I would look at specifically what Google saying is the issue and see if you can fix it.

How about how do you not load a font and it’s at the top of the page

Yeah, you may have to write. And so of course, you don’t want to defer that loading and then have the wrong font load first, like, what is that an fo you flash of unstyled content? You don’t want that either. Because that’s also, you know, it’s a very poor user experience. And it also Google Doc, you for that as well. So good, good stuff.

Thank you guys. Um, if I can I post on? I feel like I’m coming so late. So I apologize if any of this is redundant. But can I ask another question? Or does anyone else want to jump in with the with another question? I don’t want to dominate here.

Please go ahead. I’m enjoying it. Thanks, Colleen. No, we haven’t talked about this stuff yet. So

go awesome. Okay, so my next question is, I know, we, we touched a little bit on images that I had heard, I have just started playing and I feel a little bit silly copying to this, but I have just started messing with the image source set that WordPress offers now, and I know that it was already that code was already generated, if you are using, you know, whether it be the Gutenberg or even the classic editor in previous versions, they would, I think it was as of WordPress, 4.4, maybe they, they would code that for you when you use it in the content editor. But I am just now starting to use some of that in the themes that I’m working on, and wanted to see if anyone had any thoughts on. Because I’d previously used background images to do like full width, so it would crop properly. Because basically, I didn’t want it to look like narrow and skinny on a phone, but perfect on a desktop and vice versa. So, um, has anyone had good success using the image source set in their, their coding adventures?

Yeah, I actually like, have like, a good like, you know, experience using, like, image source that. I think like, I’m not really sure, but like, you know, when you using, like, how you call it, like a page builder or things like that. But when I code it myself, I just like, you know, put like, the source sets, for example, like, you know, for like 200 pixels or 400 pixels. And also, like, depending like, there is like, also like a CSS as well for it, you know, like, you know, just like CSS, like object fit cover, as well, you know, like, led like, you know, the image to haigler fit within like the, like, diff that you are in like that you, you put? So it’s Yeah. Anyway, um, some dental.

Thanks, Sam. Yeah, I’m just starting to play around with it. And I’m not, you know, I only understand broad strokes of it, to be honest, you know, it, the browser then loads when when using the image source that the browser will load the appropriate sized image. Because, of course, WordPress makes all those beautiful thumbnails automatically when you upload an image. So I’ve just started using it for, you know, like, if I have thumbnails, or featured images that are on the homepage, and, you know, just wanted to see if anyone else was using it for in their their theme development, and things like that, because I think it would be I would imagine, it’s going to be more optimized to use an image tag than it would be to do a background image with a cover. And, you know, doing what Samuel had mentioned, of doing an image tag with an object fit cover would be more optimized than a background image, I would think.

Yeah, Colleen, it’s a great, this is certainly a topic we could go deep into the weeds on and I think and, and to, to, I’ll confess that, you know, I haven’t learned about or played with this very much I’ll often rely on on my theme, and on WordPress to do what it does, right. But you know, just for everyone in the room, source set, the the source set attribute SRC, s et, is basically a way to use to display the correctly sized image depending on the user’s browser. So right, it’s all about responsive images, and responsive design. And so as far as, you know, site speed and performance, I think that you’re we’re on the right track going in that direction. As far as showing the right image for the right user. Of course, you don’t want to show 1000 pixel image when someone’s looking on their phone and the largest they would see is 300 pixels wide, right? So using that and having it be included by default in WordPress, very important. I don’t have any deep insights or strategies and I haven’t played with it too much myself. But I just want to get in here and define that for the room. Before We move on. Thank you for that, Colleen,

I just want to say I have actually no come to it because I have actually used that. And I’ve used it with a background image in the hero area, just to just anyone doesn’t really know hero being the top of the page. So I’ve actually used that feature actually works that you imagine having the image in the page? Yeah, I’ve in the background images, I’ve definitely I now optimize all my background images for the hero area to load on mobile load a different hero image. Because exactly as you just said, They’re two different ratios. So I’ve managed to save speed. And I have actually used the actual image attribute actually being the actual image in the page, I have actually used that now as a feature as well. So I’ve actually tried to play down with it, it is a great, it’s a great feature to better use. Definitely. And I think we should be optimizing images for different devices. I think it’s something that everyone should be doing. But I think the healer area is the big one. Because that’s the big, you know, image when someone looks at the site, and you got maybe some text over the top of it. I think that’s the biggest one to actually optimize, and have a different one for mobile. For me, personally, I might sometimes be.

I’m curious, because in Divi, Greg, as I recall, you can’t get an attribute to a background image. And so I try not to use background images, if I want an attribute to be attributed or if for accessibility, it won’t show up with an alt tag, if someone’s trying to read it, because you can’t in dB attach that to a background image. So yeah, that’s you can’t

do that. You can’t do that. But I think what you can I mean, for accessibility, I wouldn’t do an alt tag on a background image. But what you could do for accessibility, if it’s very, very important is you could do something with the title tag and put a, you could put another attribute on a div tag, or on a container tag and say something about it all, then maybe there’s another way you could do it, basically. But I think that I still like on a hero image, the image in the background with text at the top of it. But I think I’d make the I’d make the title more descriptive, or using an alt tag, you all the other ones you actually could do, I’ve witnessed it happening a bit. The other way you can actually do it is you could load a a space again, which I know is really old thing, right? It’s basic, if we can do a PNG, which is a one by one pixel PNG, and in there, you could put in an old title tag for accessibility. If you were used to using a background image, that would be another way to do it.

So what I do rather than background images is I load an image and use absolute positioning for the text on top. So in Divi, you can do absolute and relative positioning. So I very rarely use a background image anymore. And I use an image module, and then I absolute position, text on top if I want like a module on top of that image, because then you can have the the alt tag, but yeah, it’s just it was just interesting that you can’t do that on a background. Image easily.

good tip, I want to add like unreal, let’s say also like the diff on the top of that image, the absolute top up. So CSS have to be like really related. So it stays around that like diff that you put.

Yeah, that would be really important. Yeah. I mean, I still I mean, I still personally use background images. And if I wanted to make it descriptive, I would do the same thing by putting in just a blank image in and then putting all the description on that. And that way I know that background will be correctly responsive, how I want it to work, but I mean, each the right as long as it works, that it’s accessible, responsive, and also loads quickly for desktop and mobile users. That’s what we’re looking to achieve. So there’s more, there’s more than one way to do it. I think I’m listening and speaking.

Yeah, cuz for elemental, I put I use spacers on top of in the areas where the background would be. So it kind of helps that out too. And I just size out the area. So wherever the photo is, I make sure that the the focus of the photo especially for the for the mobile is seen properly. So I just adjusted, it just allows us to adjust it a little quicker.

I just want to say guys, it’s been fantastic with the room. I’m gonna head out. I’m actually going out this evening. So want to thank Greg for running the room. And for everyone here. It’s been really amazing. I learned loads and I love modern with all of you guys. I hope we can always meet in the future. And I’m also really congratulations Greg also recording the session as well as the first recorded clubhouse session. So I want to thank everybody, but I’m going to be heading out of that. So okay, it’s been great to see everybody. And thank you so much all of you.

Thanks so much for being here, Alex. Yes. And II mean, we’ve been going for two hours. It’s almost the top of the hour. And I had been waiting for my moment to mention that we’re going to be landing the plane here soon. You know, wrapping up the room, I know that we’ve had a great discussion about speed and performance for WordPress. And of course, there’s much more we could discuss, we could probably go all day on this topic. But Andrea, I do appreciate you bringing up we did not discuss it. But bringing up you know, hosting email separate from your website is something really important for speed and performance. And, and I’ll just let everyone know, there’s a new leverage WordPress YouTube channel that I’ve just created. And that is exactly one of the topics I’m addressing in my first video series there at leverage WordPress on YouTube. So I appreciate you guys coming to the clubhouse room today, everyone in the room, Monique and Carlos, I see you Alexandra Henry. Thanks for being here. All the mods, and mark up here on the stage. I appreciate you guys being here. I’d love for you guys to fire up any final final comments on any topics we’ve discussed today. And we’ll wrap it up in the next few minutes.

Thank you for again for hosting the room.

You’re welcome. And we’ll see I hope that my recording has has come through and I was able to record everyone on stage in addition to my own voice, we’ll see if I was able to technologically accomplish that. If so, I’ll be placing the recording and a copy of the notes over at leverage wp.co the new website to support this brand and the club. Also don’t forget that we have a discord channel at WP hQ chat.com with forwards to the discord channel and I’ve been taking notes there which I’ll also post a copy of at leverage WP co I appreciate Alex for putting that together and connecting us with the discord channel here along with the other moderators in discord that contribute there. Everyone in the room here and on stage. Welcome to join. There were we exchanged some written info and links, etc. And the schedule for our clubhouse rooms. So thanks, everyone, I think I love seeing everyone and talking about WordPress. And we’ll be back again, I’m sure. Thanks, everyone for being here. Thank you.

That’s great. Thanks a lot. It’s been a great room.

Thank you. Pleasure. Thank you.

Thanks, Samuel. Thanks, guys. Thanks for being here. Charlene, Alex, and we’ll see you guys next time. I’m just gonna give it a minute or two are more like 10 seconds and close the room. See you guys next time.