Website Performance Optimization in Elementor

Hey there, it’s Ash from Elementor.

Speed optimisation for your website is one of the most important aspects when it comes to user experience. A slow loading website is frustrating for any user and will usually result in a high bounce rate which is never good for business.

There are many factors which can affect a website’s performance, from images to server configurations, too many plugins to bloated themes, the list really does go on.

Here at Elementor we are serious about performance and in this 5 part COURSE we will teach you how to:

Create page and post layouts using optimal techniques, ensuring we don’t overuse sections, columns & widgets which simply aren’t needed and we’ll also explore some built in widget functionality for improved loading times.
We’ll then teach you how to optimise your images, both before they’re uploaded to your website and also afterwards using an image optimisation plugin. We’ll cover best practice on when and where to use different image types and explore the impact unoptimised images can have on your website.
Next we’ll take a look at additional performance boosts you can apply to your website. These will include some Elementor features as well as teaching you about theme and plugin usage.
In lesson 4 we’ll look at choosing the right web host as well as teaching you about the different types of hosting which are available and the common performance based aspects which you should be looking out for.
Finally we’ll take a look at page caching. Caching can really boost the performance of your website and we’ll explore the WP Rocket plugin which will enable you to apply caching to your website.

Finally, we’ll take a look at further optimisations with third party tools. We’ll explore caching, minification as well as some other tweaks that we can apply to our website.

Feel free to jump to any of these videos if you’re looking for something specific and don’t forget to save them for future reference.

So if you’re ready, let’s dive in and get started.

Hey there, it’s Ash from Elementor.

Speed optimisation for your website is one of the most important aspects when it comes to user experience. A slow loading website is frustrating for any user and will usually result in a high bounce rate which is never good for business.1

There are many factors which can affect a website’s performance, from images to server configurations, too many plugins to bloated themes, the list really does go on.

Here at Elementor we are serious about performance and in this 5 part COURSE we will teach you how to:

Create page and post layouts using optimal techniques, ensuring we don’t overuse sections, columns & widgets which simply aren’t needed and we’ll also explore some built in widget functionality for improved loading times.
We’ll then teach you how to optimise your images, both before they’re uploaded to your website and also afterwards using an image optimisation plugin. We’ll cover best practice on when and where to use different image types and explore the impact unoptimised images can have on your website.
Next we’ll take a look at additional performance boosts you can apply to your website. These will include some Elementor features as well as teaching you about theme and plugin usage.
In lesson 4 we’ll look at choosing the right web host as well as teaching you about the different types of hosting which are available and the common performance based aspects which you should be looking out for.
Finally we’ll take a look at page caching. Caching can really boost the performance of your website and we’ll explore the WP Rocket plugin which will enable you to apply caching to your website.

Finally, we’ll take a look at further optimisations with third party tools. We’ll explore caching, minification as well as some other tweaks that we can apply to our website.

Feel free to jump to any of these videos if you’re looking for something specific and don’t forget to save them for future reference.

So if you’re ready, let’s dive in and get started.

In our first lesson I’m going to teach you the most efficient way to create your pages and posts in the Elementor editor.

Often we see the usage of far too many sections, columns, inner sections and widgets, when the same layout could have been achieved using much fewer of these elements.

Using excessive amounts of these elements will contribute to slower performance on your website, so let’s dive in and learn how to build websites with Elementor in the most efficient way.

To better understand optimal layouts in Elementor we’ll explore this template which has been built with some common section, column & widget misuses.

By the end of this lesson we will have completely rebuilt this entire page using many less columns and widgets. Our initial page currency has 9 sections, 31 columns, 5 inner-sections & 44 widgets.
Our optimised page will have 6 sections, 7 columns & 16 widgets.

We’ll be using the free lightweight Hello Elementor theme and we’ll recreate each section of the template while utilising best practice techniques which will result in improved performance for the website.

Before we get started on optimising our layout, we’ll run a test on our page to fully understand what is going on when somebody visits our website. We’ll then retest this once all of our optimisations have been made and compare the results.
Let’s run the test on our page which has been created with “bad practice” and check out the results.

We’ll perform the test in a private window of our browser, which is also known as “incognito mode”.

Open up a new incognito window and type the link of the webpage you are testing.

Make sure your link displays the direct path to your page.

If you are unsure what your page link is, you can easily find it by navigating to your WP Dashboard.

Click on “Pages” to see all your website’s pages.

Hover your cursor over your page and click the VIEW option. This will take you directly to your page.

Copy and paste this url into the incognito window and once the site loads, you are ready to test it!
Now, right click anywhere on your page and click select “Inspect”.

You will see several tabs where you can read your HTML and CSS, find errors, get SEO results, and perform various tests.

Select the Network Tab and hit the cmd or ctrl + R buttons to load the results.

As you can see our current page layout is taking 2.88 seconds to load and is running 81 requests.

If we switch over to the Lighthouse tab now we are able to run an audit report on our page which will give us more insight into its current performance.

Select ‘Generate Report’ and after a few moments your report will appear.

We’re currently receiving a Performance score of 73/100, which we can certainly work on. Ideally we’d like these numbers to all be green.

Now let’s get to work on optimising our page so that our stats are improved.

Back in the Elementor Editor, lets begin with the header.

As you can see in this design, the header was made with 3 columns….

In the first column, we have an image widget that displays a .png image file of our logo, and a heading widget.

The second column has our nav menu widget.

And the third column has an inner column that controls the position of an icon and a heading for our contact information.

Let’s see how we can minimise the use of widgets and sections here…
Create 1 section with 1 column…

And on the widgets menu…

Find.. and drag the site logo widget into our new section.

As you can see, we have updated our logo to include both the symbol and its text.

We’ll explore this in more depth in the next part of the course where we speak about image optimisation.

But since we are here, let’s mention a few must-have practices for the website images.

Let’s check the logo we used in the bad practice. As you can see, the title isn’t relevant to what the image shows.. it also doesn’t have an alt text…

Setting relevant alt text is important as it helps screen-reading tools describe images to visually impaired readers and also allows search engines to better crawl your website.

Just like we have here, make sure you give every image on your website a relevant title and alt tag to improve your page accessibility & rankings.

Another important factor to notice, when adding images to your page, is to set their dimensions.

This allows the page to be laid out with the appropriate space before the images have loaded. This helps to avoid layout shift which is a factor measured by browsers.

Let’s switch to the style tab and set the width to 200px.
Back in the widgets panel, drag and drop the nav menu widget underneath the logo.

Set the pointer to none.. to match our previous design,
and in Style.. Add the font of your preference.

When building your page, ideally you want to avoid using more than 2 different fonts that include multiple weights.

Select the font family that you need and save the styles you will be using across the template as global fonts, by clicking this plus icon.

For each one of your widgets simply select the global font from the list you created.

By doing so, you will be generating less requests on your website and this will help with improving the loading speed.

Now, Select the global colour of your choice.
—–
It’s best if you can avoid selecting different colours for each element with the colour picker.

Simply save your template’s colour palette by clicking this plus icon to create your global colours… just like we did with the fonts 3

Each time you need to set a colour to an element or a widget, simply select it from the Global Colour list.

This way, you avoid repeating unnecessary code twice, and maintain consistency and control over your template.

You can find our dedicated video about the globals in the description below.

Set the vertical padding to zero and we are done.
Back to the widgets panel, find… and drag the icon list widget under our nav menu. 1

This widget includes both an icon and a text, which are positioned right next to each other and this helps to keep the widget use to a minimum.

Delete the extra list items, and add your text…

Then choose the icon of your choice….

In the style tab..

Set the global colours and fonts of your choice.
Great! These are all the widgets we need to complete the rebuild of our header.

However, as you can see, they are currently stacked and aren’t inline with each other.

We can fix this easily!

Select the Site Logo widget to enter its settings…

And in the Advanced Tab…

Under positioning.. Set its width to inline.

As you can see when a widget’s width is set to inline, the widget stops taking up the whole space of the column.

It will limit the width to its actual size, helping us position them next to each other.

Select the nav menu, and in the advanced tab..
under positioning… set its width to inline…

Repeat this step one last time for our icon list widget….

OK, great! We’ve finished placing our elements next to each other, now it’s time to position them properly.
We can use the column’s layout options to control the position of inline widgets.

Select your column, and in vertical align, choose bottom…

For the horizontal alignment, we are going to select space between…

This option will position the first and last widget at both ends and will give equal spacing between all of the other widgets.

Since the width of the first and last widget is not the same, the equal space may not always center our inner widget.

You can amend its position to make your design pixel perfect with margins.

Select your nav menu widget and in the advanced tab, unlink the margin, and remove the spacing difference with a negative value.
Great!

Let’s now find out how this works on mobile devices.

Switch to responsive mode and select the tablet viewport.

It’s common to see the same section redesigned specifically for tablet and mobile devices.

Just like you see in this header which was created twice, one for desktop and one for mobile and tablet use.

Simplify your design and think of ways to make the same sections responsive, to avoid using twice the amount of code which will affect your page speed.
Now, let’s see how we can make our header responsive and position our widgets exactly where we want.

Click on your nav menu..
And on the advanced tab.. Under positioning … set its width to custom.

This will allow us to set the custom width that we want this widget to take.
Select %…
and give it the same width of the empty space around it…

Now back to the content’s tab…
you can easily align the toggled menu anywhere within its width under these options. Select right.3

Let’s finish styling it…
Enable the full width, to remove any extra padding..
and in Style… remove the background by dragging the bar all the way to the left.5

And that’s it!
Now let’s check it on mobile.
There are many ways to approach the mobile design of our header, but in this example we will keep all three widgets shown in the mobile viewport.

In the advanced tab of our nav menu widget, under positioning, set the width to custom and alter it to fit next to our logo.

Next, select the icon list widget, and in the advanced tab, add some padding to the top.
And that’s it.

We managed to optimise our header from using the same section twice with a total of 12 widgets and 10 columns to just 1 section containing 3 widgets and 1 column, achieving exactly the same result!

At this point we understand a little better how layout optimisation works.

Let’s delete the old header sections and keep going through our template to see more examples.1

A common mistake we often see, is to control the position of a widget using extra columns and spacers.

Just like we see here.. We have a section with a background image..

The heading and text is positioned horizontally using two columns.. and vertically, using a spacer..

We can simply use 1 column for this, so delete the extra column on the Right.

Then delete the spacer, since this can be controlled from the column alignment options.

Great, now select the column…

And set the vertical align to middle.

Next, in the Advanced tab… unlink the values…

And set right padding to 50%.

As you can see, we have achieved exactly the same result using the column settings correctly.

Select the section and double check that you have set the minimum height of this section.

Just like we mentioned before this helps to determine the image size and avoid layout shift.
and before we move to the next section let’s discuss the clarity of this section.

It is important for every website to have a good contrast between the text and background. Non readable information not only affects your website scores but also drives visitors away.

Make sure your text and background colours, create strong contrast and the text is clearly readable.

For sections like this one, which uses a colourful image as a background, there are a couple ways that can easily improve the clarity.

Click on your heading, and in style… simply add a drop shadow to it. This will boost the readability of the letters and make it stand out from the image.

Another way to make your text more clear is by using overlays. Click on the section to enter its settings, and in style, under background overlay..

Play around with the opacity and the colour until you get a desirable result.
Scrolling to our next section, we have an inner section with 4 columns and each one includes an image, heading and text editor widget.

Let’s see how we can simplify the section.

On the widget menu, drag and drop the icon box widget in our column.

Hover your cursor over the icon, and select upload svg to insert your custom icon.

Please note that to upload SVGs you will need to first enable this in the Elementor settings.

Next, Type your title…

And a description….

And in style.. Choose a global colour and… change the icon’s size… and padding..
Next in the advanced tab… under positioning… set the width to custom.
Since we want to make 4 of them, we’ll give them a width of 25% each which make up the full column space. 7

Great!

Right click… and duplicate your icon 3 more times

Replace the images and text..

And that’s it, an easily optimised section which is now using many less assets whilst appearing exactly the same.

Next we are going to rebuild this section.

It’s designed using a section with 2 columns, 2 images, a heading, and the text editor widget.

Let’s create a new section with 1 column..

And set the content width to take up the full width of our section.

In the widgets panel..

Find.. and drag the image box widget into our column…

This widget includes all of the assets that we need to achieve exactly the same result.

Type your heading.. and description..

And for our image, we’ll combine the two images into one since this gives us the same effect.

Set the image position to the right..

In style.. let’s make some customisations…

Set the spacing between our elements… and increase the size of the image…

Under content.. align the text to the center horizontally…
and vertically.

Next, set the global colours… and fonts of your choice..

In the advanced tab… set some padding to the widget…

And we are done optimising the section with less assets!!
The next section presents a call to action for our services.

It has two columns. In the first column a background image with a spacer.

In the second column we have 2 headings, an inner section, a text editor and button widget.

We are going to create a new section with one column…

and set its content width to full width…

Select the column, and in the advanced tab…

Delete any extra padding…

On the widgets menu, search and drag the call to action widget in the column.

The call to action widget has many options which can help us create complete sections just by using this widget.

Set the image position to the left..

And select your image…

Expand the content tab, and type your title….

Description…

And button text…

While we are here, it will be good to mention the best practice when you have links like buttons, menus and social media links.

Make sure all your links work correctly and your page’s buttons include a link.

You can easily add a link to your pages from a button just by typing it’s name like this…

If you add a link that takes you to a different website, like your social media or a partner’s website, make sure you include this attribute.

Click on the gear icon, and under custom attributes type this value.
Rel|noopener

This is an HTML attribute that’s added to all WordPress links that are selected to open in a new browser tab and will boost your score on best practice.
Now let’s continue editing our widget.

In style.. Add some padding…

And adjust the image width…

Next, expand the content’s tab.. Select the global font for your title..

And increase the space between the description and the button…

Choose the right global colours for each asset…..

Now expand the button’s tab
Select the size of your button..
And customise it to your design requirements…

Once you have finished, you have completed minimising your entire section with just one widget.

That’s a big improvement!
Scrolling down to our next section we can see a common error when displaying multiple images.

Here we have a section that has an inner section with 5 columns. Many users tend to do this to control the size of their images but there is an easier & more optimal way.

Create a new section with one column…

Set it to full width…
and on the widget menu…

Drag and drop the image carousel widget.

Select the logos of your choice, and set their size to medium.
Now, adjust the slide settings…

And in style… set the vertical align to middle… and give your images some spacing…

Lastly, in the advanced tab, give your widget some padding.

This will provide a nice motion while maintaining an optimised solution. 8
In the next section we are going to see how we can optimise videos on our websites.

Select the video widget… and under style… find the lazy load option.

When we apply the lazy load option the video embed code is replaced with a static image. The video is only loaded when the user clicks on the image which really helps with our page loading times.

You can find this option in a variety of other widgets like the lottie and the pro gallery ones.

Make sure you enable it to improve your website’s loading times.

We’ve seen this structure in many footers, using multiple headings for the date and description and an icon for the copyright symbol.

In this last section we will see how to optimise and keep our footer always up to date.

Delete the extra widgets and select the remaining heading widget.

We are going to use the dynamic tags to keep our copyright date always updated automatically.

Click it.. and select current date and time.

Next click on the wrench icon…

Under date format options, select Custom.

We will keep the Y which stands for Year and delete the rest.

This will always display the current year.

Now expand the advanced tab and in the before option, hold option + g or Ctrl+Alt+C to type the copyright symbol and press spacebar to add a space…

On the after option, enter some text like so, starting with a space… and we are done.

As you can see in the final format, we easily added our text, symbol, and dynamic date with just one heading widget.
To help this tutorial flow easier, we created a new section for each example. Widgets like this, or this one.. Can be merged under the same section. Simply drag and drop them into the previous section..

And delete the remaining ones… this will remove any unnecessary HTML.

And with this step we have completed optimising the layout of our page..

Now it’s time to run the results again to see how our score is affected.

We’ll first see the results in the network tab….

We can see a lot of positive changes here. Our website is loading in just 568ms and we’ve gone from 81 requests to 46…

Let’s check the Lighthouse tab as well…

As you can see our scores are great and we’ve gone from a performance score of 73 to 98/100. The best thing is this was achieved without using any 3rd party plugins, just some simple adjustments using better practice.

What about the interactions and motion effects though?

Let’s quickly go over our template and make it more playful.

How will this affect our scores?

Select our header and in the advanced tab, expand the motion effects… and set the sticky option to top…

Next, select the hero section, and in style… Set the image attachment to fixed..

Then select its heading and in the advanced tab, under motion effects, set the entrance animation to fade in. Repeat for the text description.

In the next section I will apply the fade in effect to each one of the widgets with 500ms delay each.

I will do the same for the next widgets for a subtle effect when the page loads…

Great, now let’s go ahead and run the test again and see how the motion effects have affected our score.

Cool, we see that our score has been reduced with just 1 point. This is certainly not a big difference and it makes your website more interesting and playful.

Be sure to save this guide for future reference and use what you have leant to review your websites pages and apply some best practice techniques to fully optimise your layouts.

In the next part of this course we are going to take a look at image optimisation. We will go over each image in our example and learn how to improve them for even more efficient loading times.

Hey there, it’s Ash from Elementor.

In this lesson we’re going to explore the importance of optimising your images.

When building a website it’s a good idea to try and keep your page size to 1MB or less. One of the biggest factors which can affect this is the images you use on your website.

A website without images is a rare thing and rightly so. Images can transform a website into a piece of art, provide a better user experience and in general really bring a website to life.

However with the use of images, comes more elements for your website to load. This doesn’t mean you shouldn’t use them, quite the opposite. With some simple planning and optimisations, using images on your website can have very little impact on your websites loading times.

Before we get into how to optimise images, let’s first look at the common image types used on websites.

First of all we have . These include JPEGs, GIFs & PNGs.

Raster images are made up of pixels and each pixel is assigned a color. If we were to expand our raster image beyond its original size, it would become pixelated or blurry.

JPGs are one of the most widely used formats and are best used for photographs and large web images. JPGs can easily be compressed, making them ideal for many website projects.

Next, we have GIFs (or JIFFs – however you like to pronounce it). This image format is useful when you need to create a web animation which has a very small file size.

And our last common raster image is PNG. PNGs have built in transparency and can also support 16 million colors, making them the perfect choice for usage on websites.

The next common image type we’ll cover is SVG.

SVG stands for Scalable Vector Graphics and is an XML based vector image format. This incredibly versatile image type is very useful as it can scale up to any size while maintaining its original quality, while maintaining a small file size. Common use cases for this are logos, icons & computer generated graphics.
The first image type we’re going to optimise is a JPG. As you can see on our website we have several photographs being used which are all JPGs.

In our hero area we have a very large JPG which is set in the background of our section. Whilst this image is beautifully crisp and clear, it hasn’t been optimised and is therefore loading a much larger version of this image than what is required.

Now let’s do some testing to see just how long this image takes to load.

We’re using Chrome and will open the Chrome developer tools by typing Option + Command + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

Switch to the network tab and then select ‘Img’.

To perform the test we must now refresh the page, before we do this make sure you have ‘Disable Cache’ enabled as we do not want our browser to save any previous data.

As you can see our hero image has taken … seconds to load. Bear in mind that Google recommends your entire page should load in less than 3 seconds, so this isn’t a good start as it’s only one element of many which need to load.

We can also see the file size is 3.4MB which is far too large for an image on a web page. And if we click onto the waterfall stat we can view in detail a little more information about our image and how the entire load time was calculated.
Whilst there are other ways to optimise images already uploaded to a website (mainly with a third party plugin which we’ll cover later on), the best option for any website creator is to optimise their images before they’ve been uploaded to the website. This will give you more control over the sizing and quality of your image, ensuring it is right for your project.

We’ll start off in Photoshop which is a premium image editing tool from Adobe. Photoshop is a great program to have in your toolkit as not only does it allow you to resize images, it will also compress them for you while maintaining the quality of the image.

Launch Photoshop and open your image.

Now whilst there are a few ways to optimise and export images from Photoshop, the following steps provide a foolproof way to optimise your JPGs.

Navigate to file > export > export as and you should now see the ‘export as’ screen.

As you can see our current image is showing as 2753×1856 with a file size of 3.1MB, it seems by simply importing our image into Photoshop we’ve shaved off 300kb which is a start at least.

Next, let’s select the ‘2-up’ option so that we have a side by side comparison of our optimised and original image. Our optimised image will show on the left hand side, so let’s make sure we have that one selected.

We can use the plus and minus icons to zoom in on the image to really test the difference.

In the top right hand corner the first option we have is format. Here we can switch the image type if required, let’s leave this as JPG as it’s the best option for a photo.

Next we have ‘quality’. Here we can adjust the quality of the image to reduce the file size down. Photoshop does a great job at maintaining a very high image quality so don’t be afraid to experiment with the lower settings. As you can see we can move this all the way down to 40% without much reduction in image quality.

If we now check our image file size, you can see it has reduced from 3.1GB to a rather impressive 548kb.

We encourage you to experiment with the quality setting as depending on the image sometimes you can reduce the file size down even further with a minimal loss in image quality.

The final step here before we export our image is to alter the image size. At the moment it is 2753px wide, when in fact the largest we need this image to be for our website is 2000px.

Under the ‘image size’ settings, enter 2000px in the width field and the height will automatically update.

Now when we view the file size, we can see it has now been even further reduced to an impressive 310kb. That’s a really great result and we’re now ready to export our image and upload it to our website.

Click the export button and save the optimised image to your computer.
As previously mentioned, there are numerous ways to optimise and export images in photoshop.

Another popular method is to use the ‘Save As’ option.

Before we do this, let’s first resize our image by going to Image > Image Size and amending the fields shown here.

We’ll set ours to 2000px wide which will also automatically update the height and select ‘ok’ when finished.

Now if we go to File > Save As we can save and optimise our photo for use on the website.

First of all choose a location to save your image to, add an image file name, then select ‘Save’.

You will now see the JPG options screen.

Here we can adjust several settings for the image.

Ensure preview is selected so you can witness the changes in real time, and keep an eye on the image size when you’re making changes.

There is a dropdown which provides some preset options, and you can also amend this manually.

Under format options, ensure ‘Progessive’ is selected as this will further help with optimal loading time as it displays a lower resolution image when the page is loading.

Once you’ve finished with your adjustments, save your image and it’s now ready to be uploaded to your website.
A great free alternative to Photoshop is a website called PhotoPea. Photopea has many similar features and most importantly we can optimise and export JPG images.

Let’s open our image first of all, and then head to ‘file > export as > JPG’.

Unfortunately we’re not presented with the same by side comparison Photoshop offers, but we can see a live view of our image which will update when we adjust the configuration.

As you can see Photopea automatically applies 70% to the quality field which has produced a great result and we’re now seeing an image size of 552kb. Just to remind you, our original image size was 3.4MB.

Very much like with Photoshop, we encourage you to experiment with the quality setting as depending on the image, you will see vastly different results and it’s a case of individually fine tuning your images for the best quality and file size. It’s also worth noting that the quality slider isn’t exactly the same as the one we saw in the Photoshop example. Reducing this down to 40% like we did in Photoshop blurs our image a little too much, so we’ll leave it at 70%.

Now if we resize our image to 2000px wide we can see the file size is even further reduced to 285kb.

Let’s save this image and head back to our website.
Back in the Elementor editor we’re now going to replace our image with our newly optimised image and rerun the test we performed earlier.

Let’s select the section, switch to the style tab and click on the background image to replace it.

In the media library, upload your new image, give it an alt description and insert into your page.

Let’s now update our page and head back to our live website where we have Chrome Developer Tools already open.

We need to perform a refresh, but let’s be sure we’re clearing any browser cache by holding ‘shift & refresh’.

As you can see our newly optimised hero image is showing some much better results.

We’ve gone from an image size of 3.4MB to 270kb and a loading time of 6.23 seconds to 656 milliseconds.

This is a great improvement and if we continue to work through all of the images on our website, we will be able to dramatically improve the performance.
Next we’ll take a look at optimising the PNG images used on our website. If we scroll down you can see we have these company logos. Whilst these logos look great, if we take a closer look you can see that these PNG images are very large and roughly 25 – 50 KB in size each. We can certainly reduce these numbers to help with our page load time.
The first step is to resize our PNG images. They are currently around 2000px wide, yet the website is only displaying them at a maximum of 300px wide. For this we’ll open up Photoshop again, import our PNG and then resize it using the ‘export as’ option.

With the export window open, ensure the format is set to PNG and the transparency option is checked.

Now adjust the width to 300px and as you can see we’ve just reduced our PNG from 19.9 KB to 3.4 KB. That’s a great start for our PNG optimisation, but we can still do better.

Let’s save our newly resized PNG and head over to TinyPNG. TinyPNG is a free tool which compresses PNGs whilst maintaining quality for faster loading times.

On the TinyPNG website we’ll simply drop our PNG onto the upload button and let TinyPNG work it’s magic.

Instantly we can see our newly optimised file has been reduced by 56%. We’ve gone from a file size of 3.4 KB to 1.5 KB.

If we now download and view our two PNG files side by side, you can see that TinyPNG has done a fantastic job and there is virtually no difference between the two versions.

We’ll now repeat the process for our other images and once finished, we’ll upload these optimised PNGs to our logo carousel to replace the unoptimised versions.
The next image type we’ll take a look at is the SVG.

SVG which stands for Scalable Vector Graphic, is a very useful image type which works in a different way to JPGs & PNGs. JPGs and PNGs are raster images, meaning they are made up of pixels and if over sized can become pixelated or blurry.

An SVG image is an XML based vector format image. This basically means it can scale to any size without losing any of its quality. They’re not suitable for all image types though and are best used for logos, icons and computer generated graphics. They also maintain a very small file size which is great when looking at the performance of a website.

Please note to be able to upload SVGs in Elementor you must first enable this in the Elementor settings. Simply navigate to Elementor > Settings > Advanced and then enable unfiltered file uploads.

Going back to our optimised web page which we improved in lesson 1, we can see two occasions where we used SVGs to improve the performance of the site.
The first was the logo. Previously this was made up of two widgets, an image and title. By combining the two into a SVG we were able to display a much clearer, scalable and faster loading logo.

We used Adobe Illustrator to create and export our logo, but you can use any vector based software to achieve the same result.

Here you can see our logo file which we’ve recreated in vector format.

To save this as an SVG file, simply head to File > Export > Export As, choose a location and amend the file name if required.

Select ‘Export’ and now we are presented with some additional options.

The default Illustrator options shown here work great. Ensure the minify option is selected, as this will further reduce the file size by ensuring the generated SVG code has minimal IDs, indents, lines, and white spaces.

Select ‘OK’ when done and your SVG is now ready for your website.
The second example saw us convert a 4 column layout, where each column contained an image, title & text editor widget into an identical layout using the icon box widget. The great thing about the icon widget is that you can upload an SVG icon, further improving our loading times.

Displaying this type of image as JPG is not ideal and would be much better suited if the icon graphics were SVGs.

We’re using a free tool here called Inkscape.

As you can see we’ve redrawn our icon images into vector graphics.

We can now export these as SVGs and upload them to our icon box widget which will provide not only faster loading time, but also cleaner, crisper images.

In Inkscape head to File > Save As, choose a location, amend the file name if required and then choose ‘Optimised SVG’ from the dropdown.

Inkscape does a great job with it’s default settings but feel free to experiment here for more customised results.

The new icons are now saved and we can upload these to our icon box widgets to further optimise our website.
In the final chapter of our image optimisation lesson, we’re going to take a look at a third party image optimisation plugin.

As we’ve previously mentioned, it’s best to optimise your images before you upload them to your website.

However, there may be an occasion where you are working on a website which already has images uploaded, and these may not have been optimised.

This is where a third party plugin can be useful. Rather than downloading, optimising and reuploading the images used on the website, we can use an image optimisation tool to optimise the images already on the website.

The plugin which we’re going to use is called Smush, which is a highly rated free image optimisation plugin from WPMU DEV.

Smush will automatically compress your images to achieve smaller file sizes, whilst maintaining great image quality. And with smaller file sizes, comes faster loading times!

Let’s first install the plugin and explore what it can do for us.

Head to Plugins > Add New and search for “Smush”.

Select ‘Install Now’ and then ‘Activate’ the plugin.

Once the plugin has been activated, you will now see a new menu item called ‘Smush’. Hover your mouse over it and let’s head to the dashboard.

As you can see Smush has a set-up wizard which helps with the configuration of the plugin. Select ‘Begin Setup’ to get started.

The first option allows you to apply the ‘Automatic Compression’ option. A very handy feature which will automatically apply your compression settings to any new images you add to your website in the future.

Next we have the option to strip EXIF Metadata from your photos. Often this data is not needed, so if this is relevant for you enable this option to help with reducing the file size of your images.

Smush also has a built in Lazy Load feature which can be applied to your pages and posts. Lazy Loading will stop offscreen images loading until they come into view. This really helps with speeding up your website loading times.

Finally, we’ll select ‘Finish Setup Wizard’ to complete the initial setup.

Smush will now run a scan of your images to gather some data on the images which need to be compressed.

As you can see, we have 49 images which need to be compressed.

Before we compress these however, lets just double check our configuration.

Scroll down to the ‘Settings’ area and the first option we see is for our image sizes. As stated here, WordPress generates multiple image thumbnails for every image uploaded to your website. If you do not wish for a particular size to be compressed, you can select it in the custom tab.

We can also amend any of the configurations we made during the setup wizard, and finally we can amend the image resizing settings.

We’ll select this option and change the width to 2000px as this is the widest our images need to be on our website.

When done, select ‘Update Settings’ and now it’s time to compress our images.

Select the ‘Bulk Smush Now’ button and wait for the plugin to work it’s magic. Please note, you need to keep this window open for the compressions to work successfully.

Once finished you should see an alert telling you “all images have been smushed”.

And at the top of the page you can see the file size reduction which has been made.

On our website we managed to save 1.4 MB in space over all of our images.

To further inspect the exact size reduction in our images let’s head over to the media library.

If we select our hero image you will now see a new option underneath the file URL called ‘Smush’.

We can see that this image and it’s thumbnails have been reduced by 13.1 KB which is a reduction of nearly 3%.

We also have the option to view more information about each thumbnail version of the image by selecting the ‘View Stats’ link.

Using an image optimisation plugin on your website is crucial for unoptimised images, but can also help shave off a few more kilobytes for images which have already been optimised in a tool like Photoshop.

Be sure to experiment with the available tools to find the perfect configuration for you.

Ensuring your images are fully optimised for performance is quite likely one of the biggest improvements you can make to your website.

Faster loading images will have a large impact on your website’s performance and will also improve the user experience.

In our next lesson we are going to explore additional performance boosts we can apply to our website to further enhance your websites performance.

Hey there, it’s Ash from Elementor.

In this lesson we are going to explore web hosting options for a WordPress & Elementor website.

Web hosting is one of the most important factors when it comes to optimising your website for performance. There are several different types of web hosting available and your decision on this can have a big impact on the experience your customers receive when they visit your website.

Whilst there are many more types of web hosting available, in this lesson we will explore the most suitable web hosts for the majority of WordPress & Elementor websites. These will include, Shared Hosting, Managed WordPress Hosting, Virtual Private Server (VPS) & Dedicated Hosting.

Before we explore the different types of web hosting which are available, it’s a good idea to consider some other important factors first.

Uptime is the amount of time your website is up and running. As a website owner the minimum you should accept is 99% and this should be something you continually monitor to ensure a better user experience for your website visitors.
Resources account for several elements when it comes to web hosting. These are most commonly RAM, hard drive space and bandwidth.

RAM or ‘Random Access Memory’ and is a component needed on a server which allows data to be read almost instantly. The higher your RAM, the faster your website will respond.

Hard drive space will determine just how much space is available for you to store your files.

And bandwidth will control how much data can be transferred to your users in a given amount of time.

Security is a major factor to consider when choosing a web host. We highly recommend you choose a web host which provides the following features:

SSL certificate, many actually provide these now for free
Backup and restore functionality
Malware scanning & protection
Firewall implementation

The last important factor to consider is support. When looking for a web host, you should look out for companies who provide around the clock support. Live chat is extremely useful as it means you can normally resolve your issue in real time.

Now that we understand some of the key elements to look out for when choosing a web host, we’ll explore the different types which are available.

Let’s get started by looking at the most common type of web hosting, shared hosting.

Shared hosting is the most affordable option, and provides a good starting point for many users.

As a shared hosting customer, you are allocated a section of a server to host your website files. On the same server, there could potentially be hundreds of other websites hosting their files on the server as well. The resources of the server are shared between all websites which are hosted on the server.

Whilst this is an extremely cost effective way to host a website, it is better suited to small, lower traffic websites as the other websites on the server can impact the resources which are available.

If you have a high traffic website it may be wise to explore the following web hosting options instead.
Managed WordPress hosting can certainly be more expensive than shared hosting, but it does come with many more benefits.

Because of the success of WordPress many web hosting providers have created a dedicated service for these websites.

Being a managed service the web host takes care of all the WordPress updates, daily backups, uptime, scalability, speed & security.

This provides an uncomplicated service which allows the website owner complete freedom to run their business without the worry of having to maintain many of these aspects.
Moving on from managed WordPress hosting we now have a virtual private server, or commonly known as a VPS.

This service partitions a physical server into multiple virtual servers which are specifically configured to the customer. Whilst you are technically sharing a server with others, the resources associated with your VPS are entirely dedicated to you.

There are two types of VPS, which are managed and unmanaged. If you do not have the technical knowhow to manage a VPS yourself, it would be wise to consider a managed VPS so that your web hosting company can take care of all the system upgrades and will be available for support if required.
Our last web hosting option is a dedicated server. A dedicated server is likely the most expensive option, but it does provide the most flexibility.

Having a dedicated server means your website has its own server all to itself. It is completely scalable and tends to provide the most reliable service and security for your website visitors, all of this does come at a premium though.
In the last topic in our web hosting lesson we’re going to explore what a content delivery network, (or CDN) is.

A CDN is a widely distributed network of servers that helps reduce the physical distance between the server and the user, resulting in faster loading times for web pages. This allows users all over the world to access the same high-quality content without slow loading times.

Hosting companies like Bluehost have their own CDN included in their web hosting packages, but not all web hosts provide this service.

A great free option is a service called Cloudflare. But what is Cloudflare?

On their website Cloudflare describes their service like so:

“Cloudflare is one of the biggest networks operating on the Internet. People use Cloudflare services for the purposes of increasing the security and performance of their web sites and services.”

Not only do they have a network of servers around the globe which will help deliver your website to users in a speedier way, they also provide security by protecting websites from malicious activity like DDoS attacks, malicious bots, and other intrusions.

Signing up and using Cloudflare is free and easy, however it does require you to amend your nameservers. For more information on how to do this, please consult your domain name provider.

Choosing web hosting doesn’t need to be a daunting task and I hope you now have a much better understanding on what you should be looking out for when choosing a web host, as well as the different types of web hosting services which are available.

In our next lesson we’re going to explore some further optimisations with third party tools.

Hey there, it’s Ash from Elementor.

In this lesson we are going to explore web hosting options for a WordPress & Elementor website.

Web hosting is one of the most important factors when it comes to optimising your website for performance. There are several different types of web hosting available and your decision on this can have a big impact on the experience your customers receive when they visit your website.

Whilst there are many more types of web hosting available, in this lesson we will explore the most suitable web hosts for the majority of WordPress & Elementor websites. These will include, Shared Hosting, Managed WordPress Hosting, Virtual Private Server (VPS) & Dedicated Hosting.

Before we explore the different types of web hosting which are available, it’s a good idea to consider some other important factors first.

Uptime is the amount of time your website is up and running. As a website owner the minimum you should accept is 99% and this should be something you continually monitor to ensure a better user experience for your website visitors.
Resources account for several elements when it comes to web hosting. These are most commonly RAM, hard drive space and bandwidth.

RAM or ‘Random Access Memory’ and is a component needed on a server which allows data to be read almost instantly. The higher your RAM, the faster your website will respond.

Hard drive space will determine just how much space is available for you to store your files.

And bandwidth will control how much data can be transferred to your users in a given amount of time.

Security is a major factor to consider when choosing a web host. We highly recommend you choose a web host which provides the following features:

SSL certificate, many actually provide these now for free
Backup and restore functionality
Malware scanning & protection
Firewall implementation

The last important factor to consider is support. When looking for a web host, you should look out for companies who provide around the clock support. Live chat is extremely useful as it means you can normally resolve your issue in real time.

Now that we understand some of the key elements to look out for when choosing a web host, we’ll explore the different types which are available.

Let’s get started by looking at the most common type of web hosting, shared hosting.

Shared hosting is the most affordable option, and provides a good starting point for many users.

As a shared hosting customer, you are allocated a section of a server to host your website files. On the same server, there could potentially be hundreds of other websites hosting their files on the server as well. The resources of the server are shared between all websites which are hosted on the server.

Whilst this is an extremely cost effective way to host a website, it is better suited to small, lower traffic websites as the other websites on the server can impact the resources which are available.

If you have a high traffic website it may be wise to explore the following web hosting options instead.
Managed WordPress hosting can certainly be more expensive than shared hosting, but it does come with many more benefits.

Because of the success of WordPress many web hosting providers have created a dedicated service for these websites.

Being a managed service the web host takes care of all the WordPress updates, daily backups, uptime, scalability, speed & security.

This provides an uncomplicated service which allows the website owner complete freedom to run their business without the worry of having to maintain many of these aspects.
Moving on from managed WordPress hosting we now have a virtual private server, or commonly known as a VPS.

This service partitions a physical server into multiple virtual servers which are specifically configured to the customer. Whilst you are technically sharing a server with others, the resources associated with your VPS are entirely dedicated to you.

There are two types of VPS, which are managed and unmanaged. If you do not have the technical knowhow to manage a VPS yourself, it would be wise to consider a managed VPS so that your web hosting company can take care of all the system upgrades and will be available for support if required.
Our last web hosting option is a dedicated server. A dedicated server is likely the most expensive option, but it does provide the most flexibility.

Having a dedicated server means your website has its own server all to itself. It is completely scalable and tends to provide the most reliable service and security for your website visitors, all of this does come at a premium though.
In the last topic in our web hosting lesson we’re going to explore what a content delivery network, (or CDN) is.

A CDN is a widely distributed network of servers that helps reduce the physical distance between the server and the user, resulting in faster loading times for web pages. This allows users all over the world to access the same high-quality content without slow loading times.

Hosting companies like Bluehost have their own CDN included in their web hosting packages, but not all web hosts provide this service.

A great free option is a service called Cloudflare. But what is Cloudflare?

On their website Cloudflare describes their service like so:

“Cloudflare is one of the biggest networks operating on the Internet. People use Cloudflare services for the purposes of increasing the security and performance of their web sites and services.”

Not only do they have a network of servers around the globe which will help deliver your website to users in a speedier way, they also provide security by protecting websites from malicious activity like DDoS attacks, malicious bots, and other intrusions.

Signing up and using Cloudflare is free and easy, however it does require you to amend your nameservers. For more information on how to do this, please consult your domain name provider.

Choosing web hosting doesn’t need to be a daunting task and I hope you now have a much better understanding on what you should be looking out for when choosing a web host, as well as the different types of web hosting services which are available.

In our next lesson we’re going to explore some further optimisations with third party tools.