Sticky Ask anything!

🚀 Speed it up! Get answers to any performance-related question from a list of experts tomorrow!

🚀 Speed it up! Get answers to any performance-related question from a list of experts tomorrow!
Userlevel 7
Badge +6

Do you have questions about performance optimization? Or speeding up your site for a better user experience and SEO ranking, as another would put it? Well.. I’m very excited to tell you that tomorrow we’ll have a list of Experts from our community ready for your questions.

We’ve hand-picked a list of experts from the Elementor Experts Network and verified their speedy claims ourselves. They’re all the real deal! Tomorrow, for 3 days straight, you can ask them all your questions both here on the Hub and on Facebook.

 

🐢 If that’s too slow for you, drop in here today! https://elemn.to/optiroom 

 

Ps. the amazing @Roni, head of Elementor Experts Network, will be around too.


14 replies

Userlevel 6
Badge +3

I’m honored to have been selected as one of Elementor’s “Optimization Experts”.  I guess over the last couple of years, I’ve analyzed well over 400 websites looking for optimization opportunities for page-speed improvements so, I thought to kick off the Elementor Optimization Week,  I’d share with you my thoughts and findings.  I’m sure the other members of the Expert’s Group will also be happy to share their findings and thoughts too.

 

  1.  Around 76% of sites I’ve tested are being slowed down by large images which are not only larger in file size than needed but also in terms of pixel dimensions.  No website needs an image 5,600 pixels wide at 13Mb.
  2. 64% of websites tested are slow simply because of poor quality or poorly configured hosting.  Shared hosting almost always a bad idea and will lead to variable page speed results - sometimes it may look good while at other times, really poor.  I always tell clients “If you’re serious about your website, you must be serious about your hosting”.  It is futile trying to speed-up websites using slow hosting and a slow host will always be a slow host and adding optimization plugins etc. will only ever be a sticking plaster masking the true issues.
  3. Almost equaling poor hosting as a reason for poor page speeds at 60% is “plugin overload”.  It’s very tempting when starting out with Elementor to get overwhelmed by the huge number of free add-ons for Elementor but, it’s a fact that every plugin you load is going to have some impact on website performance either on the back-end, front end or both. 
  4. What we’ll call “Poor page structure” covers a lot of ground but, accounted for >45% of websites analysed.  What we mean is web pages (and single posts) containing a large number of images, widgets, sections & columns.  This is particularly an issue with single page websites where the creator is struggling to fit everything in.  One single page site analysed contained 56 images, 32 sections and had a total page size over 40Mb - to put this into perspective, I would always be trying to get that payload down to around 1Mb max. for best performance.
  5. Not necessarily a reason for poor page speed but a big factor and area of frustration is the understanding of the numbers and chasing “A grades” at the cost to the overall user experience.  One mistake new users make is to use various different speed measurement tools until they find one that they like.  We call this “Number chasing” and it’s almost always going to result in you tearing your hair out!  Mobile scores can be very misleading.
Userlevel 6
Badge +3

… and so, having outlined the most common causes of poor page speed (above), it’s only fair to offer a few words of advice based upon experience.

My over-arching advice is “Make optimization all about the overall user experience and not chasing elusive  numbers”.  Of course, page speed is a large part of the equation as nobody likes a slow website but, it’s not everything, not by a long way.

A well structured web page which uses good semantic markup and contains valid, relevant and appropriate content will always trump a hyper-fast page with lesser quality content for search engine rankings.

Understand what’s happening and what the numbers mean.  There are a great many tools out there which all claim to accurately measure website performance.  The most common are GTMetrix and Google’s own Page speed insightsThe key point to remember is that these are termed “Lab Results” and are a measure only at a single point in time. They are not a real-world measure of what your website visitors are likely to experience - that information is only, currently, available via Google’s page insights and the Google Search Console.  What’s more, many (most?) websites may never accrue enough real world data for Google to show an accurate representation of what a real user’s experience will be.

The mobile experience

Since the announcement of Google’s “User experience” update to its search engine rankings algorithms, website creators all over the globe have been panicking at the fear of being “de-ranked” because of a ‘slow’ website and, because Google only crawls and indexes the mobile version of your website, that means everyone is chasing an A-Grade mobile score. But, let’s look at the facts.  

For lab data (the here and now test) Google emulates an almost worst case scenario - a mid range smart phone (Motorola G4) with a throttled 3G connection.  Given that, it’s no surprise that a true A-Grade mobile score is about as common as a golden unicorn!  It’s going to vary depending on your country and region but, here in the UK, 3G is going to be phased out by British Telecom and the major mobile networks in the next 2 years as 4G and now 5G coverage, quality and speed improves dramatically.  Furthermore,  according to our own telecoms regulator, Ofcom, mobile users are connected to Wi-Fi 85% of the time, meaning they’re only going to be using cellular data for 15% of the time.  In my opinion, this makes Google’s lab data pretty meaningless for a large proportion of the planet.  The good news is that as your website accrues real-world data, there’e a strong likelihood that your website will start to score well, even if lab data is poor.  To illustrate the point, Amazon.com rates only 59/100 for mobile lab data but the field data passes the core web vitals assessment.  See below.

 

Elementor Speed Expert Needed!

Ok, so I have this one site and it's a tricky one! I've managed to solve most speed issues, but this site is really sensitive. It's not even an ecommerce site. I need a real expert at targeting speed and getting it to improve inline with the web core vitals, mainly on mobile. Desktop seems ok, but mobile is a real pain. I’m at the point where I’ve tried so many things, and we’ve agreed between myself and the client to get onboard an expert to optimise it. If you are a speed pro and feel up to the task, please let me know :)

Userlevel 6
Badge +3

So, mindful that optimization is foremost about the user experience, let’s take a look at how to solve the top 4 reasons (above) for poor page speeds.

 

  1. Image optimization for both file size and pixel dimensions.  This is a topic that could fill a book in its own right but, put simply, your image only needs to be of a height and width appropriate for the need.  For example, a hero image (full screen) only really needs to be 1920 x 1080 pixels, maximum.  There is an argument that these days a 2560 pixel-wide image is best to cope with higher resolution displays but, according to our own research of Google Analytics data in July 2021, this still only accounts for 1.6% of visitors measured across 63 websites. The decision is yours.  This site offers a great insight into display resolution trends in your area. Having then dealt with the dimensions, we than have the issue of compression.  There are many image manipulation tools which allow you to compress images.  We use Photoshop but, there are online resources such as OptimizillaTiny PNG and Compressor.io which will do a good job.  For website use, we find that compressing to a quality of around 43% in Photoshop will produce an image of sufficient quality and optimal size for most use cases but,  you will need to experiment to find which is best for you.As a guide, I always try to compress an image down to around the 100Kb mark - which can be a challenge but is worth the effort.
  2. Hosting.  Again, a massive topic in its own right but there is a general rule.  “There is cheap hosting and there is good hosting but there is no good, cheap hosting”.  Having said that, if your website is just a simple personal blog and you’re not reliant upon your website for income,  then good quality hosting becomes less important.  Shared hosting is best avoided for most serious websites and my preferred option is Cloudways which offer great VPS Cloud Hosting from as little as $10 a month, is fully scalable as your business grows, reliable and includes many easy to use features such as automatic backups. 
  3. Plugin overload  Use only those plugins which are absolutely essential.  Most add-ons for Elementor simply add extra widgets and while many of these can look attractive, many can be created from the standard array of Elementor Pro widgets with a little imagination and creativity.  It is sometimes best to compromise on design in favour of a better optimized website.
  4. Avoiding poor page structure  Build with optimization in mind from the get-go.

 

Userlevel 4
Badge +2

@7suite sure post your URL, let me see and give you more insights on what you can do.

Userlevel 6
Badge +3

Reach out and request an audit if you need help.

Web Squadron - YouTube

So, mindful that optimization is foremost about the user experience, let’s take a look at how to solve the top 4 reasons (above) for poor page speeds.

 

  1. Image optimization for both file size and pixel dimensions.  This is a topic that could fill a book in its own right but, put simply, your image only needs to be of a height and width appropriate for the need.  For example, a hero image (full screen) only really needs to be 1920 x 1080 pixels, maximum.  There is an argument that these days a 2560 pixel-wide image is best to cope with higher resolution displays but, according to our own research of Google Analytics data in July 2021, this still only accounts for 1.6% of visitors measured across 63 websites. The decision is yours.  This site offers a great insight into display resolution trends in your area. Having then dealt with the dimensions, we than have the issue of compression.  There are many image manipulation tools which allow you to compress images.  We use Photoshop but, there are online resources such as OptimizillaTiny PNG and Compressor.io which will do a good job.  For website use, we find that compressing to a quality of around 43% in Photoshop will produce an image of sufficient quality and optimal size for most use cases but,  you will need to experiment to find which is best for you.As a guide, I always try to compress an image down to around the 100Kb mark - which can be a challenge but is worth the effort.

 

Is it ok to use an image optimization plugin (i.e smush or shortpixel) instead of manually editing each image before uploading?

Userlevel 6
Badge +3

Yes, it’s fine - but I find that Tinypng or compressjpg.com are my tools of choice.

And then I convert PNG to JPG to slice off more.

And then Images to WebP

Sounds long winded but always works for me

What do you guys think of Optimole? Is it a one-stop solution or should I go back to Tinypng?

Thank you very much!

Userlevel 6
Badge +3

I prefer TinyPNG much more.

 

Userlevel 2
Badge +1

I think Elementor is being a bad boy and not cleaning up his messes. I think there are duplicate images shoved willy-nilly into the /wp-content/uploads/elementor/ folder.

 

Is there documentation on this, and if it is, an explanation of why, and what you can do to clean up a site if you encounter a bunch of images generated by Elementor? Seems like it should be a tool or auto-managed  within Elementor.

 

For example, I find this in the wp-content/uploads folder:

/elementor/thumbs/exterior-showing-light-detail-nvgatg3k22pr0ms03tsontxtie8c43sbnlk3gcsryg.jpg

which is a 500px square image. The original is stored at

/2018/08/exterior-showing-light-detail.jpg

If I replace this image using the  Enable Media Replace plugin by ShortPixel, will it also replace that 500px square image? If not, whose responsibility is this, Elementor’s or ShortPixel’s?

 

The image was put into a Media Carousel Widget with a setting of 500px for the image size.

When I change it to 640 pixels square, I get another image named

exterior-showing-light-detail-nvgatg3lrh0r9u78ab0bmcbiyo4m8kabw3zc2bgw00.jpg

and the 500px square image is not deleted.

In this situation, I think Elementor should auto-delete this image. Or, failing that, when I go to the Elementor: Tools: General tab, the Regenerate CSS & Data button should do this.

Why does Elementor leave this file here?

(Also seems sort overkill on the random file name thing, just take the milliseconds or nanoseconds, or maybe just append -500x500 like you would expect.)

We already have enough file size overhead with WordPress itself generating hidden image sizes (beyond the thumb, medium and large sizes you can set in Media Settings--WP now creates medium_large , 1536x1536  and 2048x2048 images, which can fortunately be defeated by this technique.)

True, these extra files do not slow the site down, unless a plugin is perhaps reading in a list of files and now there are more files to count. But have you ever had to back up a very busy and large website that is 10 years old, and on top of the existing mess of images, there are bunches of images that Elementor has tossed into the mix? Sort of like picking through trash along an interstate trying to find a lottery scratch ticket.

In another site, I have added Elementor and discovered that it seems to have created intermediate image sizes outside of this /thumbs/ folder, right next to the original image’s location. Perhaps this is an earlier version of Elementor that has done this, or maybe another plugin is to blame, but based on this behavior, I strongly suspect Elementor.

I would also like to know the CDN ramifications of this.

Userlevel 6
Badge +3

Do you normally set the Wordpress settings for media to all be 0?

I do that and don’t get duplicate images in my content folders.

Userlevel 2
Badge +1

Do you normally set the Wordpress settings for media to all be 0?

I do that and don’t get duplicate images in my content folders.

Hi Imran, That’s a great tip, but I generally need a couple of other image sizes for Classic posts and whatnot. Those are expected. What trips me up is the clutter from Elementor. I’m trying to future-proof some websites as much as I can. For a lightweight brochure website with a lifespan of two or three years, these extra images are not a really so much of a bother. A news-portal-evergreen-content type of site needs to be clean.

I have a website that I am trying to optimize, and I have already compressed images and I’m using these tools on the site:

  • WP Rocket
  • Asset Cleanup Pro
  • ShortPixel

I currently have WPengine hosting, which I will probably replace in spring 2022 once the yearly hosting contract is almost up. The company does not want to remove the slider, and it also needs GTM/Facebook tracking, so I can’t touch those items.

I really want to increase the performance, especially on mobile, but I could use some help figuring out what would be the most impactful changes.

Live Site: https://truebuilthome.com/

Test Site: https://tbhtest.wpengine.com/

Thanks for any advice you can offer!

Reply