One of the most important things you should pay attention to when building your webpage is page loading speed.
The most important argument of it is this: people hate pages that take too long to load. “Heavy” pages that take longer to load are simply bad user experience, and lead to more people bouncing off your site. You don’t want them to leave, do you?
If you don’t believe me, then this useful infographic sums it all up with real statistics:
As you can see, the bounce rate increases as page speed goes up, which gives you a solid proof of the fact: the longer your page takes to load, the more people are going to leave it before it fully loads.
Today we’ll discuss what you can do to dramatically increase your page speed and give your page visitors a simply satisfying user experience.
HOW TO ASSESS PAGE LOAD SPEED?
While you don’t need a degree in computer science to see that your page loads pretty slow, there are some very useful tools that will give you an overall assessment on how well your page loads.
PageSpeed Insights by Google (https://developers.google.com/speed/pagespeed/insights/) lets you enter the site and test your web site speed effectively. However it doesn’t give much detail to what you should change + many programming terms will leave you very confused.
On the other hand, there’s GTmetrix (https://gtmetrix.com/) which is our favorite, because it gives you detailed information on what exactly to change to improve your page speed. We will use this tool throughout this guide.
This is IcebergBuilder homepage before it was web-optimized. As you can see, GTmetrix indicates you exact files on your site which need to be optimized. How you can do that the most easy way, don’t worry, we’ll discuss that in this article!
WHAT CAUSES YOUR PAGE TO BE SLOW?
There are two sides to what influences your page loading speed. One part is influenced by servers and hosting, and that’s on us – we’re doing the best we can to ensure your page is hosted on a secure and fast server. As we are growing, we are always willing to find faster servers for your all convienience. Whenever a better opportunity arises, your page speed time will be slightly improved, but your project operations won’t be in any way affected by the change.
The other side of the coin is your responsibility. As you might already discover in the page speed reports, the top factor that damages your page speed is the files you have uploaded in the site, and it’s most likely images. That’s why in this article I’m going to give you a quick action plan on how to reduce file size of your images and optimize them for web.
This is IcebergBuilder’s speed performance before the optimization took place.
This is IcebergBuilder’s speed performance after the optimization. Just changing the size of 18 images, we were able to improve the score from 66% to 91%. This is a spectacular improvement on website speed, and you can definitely achieve the same if you follow these steps below.
KEY NOTES FOR WEB-OPTIMIZED IMAGES
These are some key things to always take in mind whenever you upload new images to your site. The following points will ensure you upload optimized, size-reduced and still pixel-perfect images to your site, which will let you dramatically increase your page loading speed.
– Don’t upload images that are too big in file size
Upload images that are 300 kb of file size or less (way less (!!) for smaller images in your page – follow the action plan below). You’ll see the actual file size of the image in your PC library or in your WordPress Media Library where you’ve uploaded the image.
– Upload images that are true to their pixel size in the intended spaces
You probably take an image of whatever dimensions, e.g. 1080 x 1920 px, and then upload it in Media Library, and then resize it in Elementor by changing the padding or by tweaking the “Width” function. After you’ve finished the webpage design, use a Chrome extension like the Image Size Info extension to assess what is the actual pixel size in the place where the image is put in your page, and then resize the images on your computer or web apps to meet these actual dimensions.
– Resize the images in your computer or web apps
Resize your images using a photo editing software like Adobe Photoshop or Lightroom, OR resize in your built-in image editing programs, like, Microsoft Paint or Mac OS Preview app. Follow the instructions in this helpful guide to learn how to do that. Or you can use a free web tool for resizing pixels like LunaPic.
– Optimize the images to a reduced file size
Upload the resized images to TinyPNG – a free web tool that optimizes .jpg and .png images greatly reducing the file size. We’re using this tool all the time, and we’ve found it works even better than Photoshop.
Taking note of these things ensures from the very beginning that your page will load faster. But what to do when you have already uploaded huge images on your site that are making your page load slower? Proceed to read the full action plan.
THE FULL ACTION PLAN: HOW TO REDUCE IMAGE SIZE TO IMPROVE YOUR PAGE LOADING SPEED
STEP 1: IDENTIFY WHICH IMAGES ARE TOO BIG IN FILE SIZE
Use the GTmetrix and click on the “Optimize images” item in your report recommendations. There you’ll find all the files that are deemed too big. Simply find them in your PC, or library, or click on the link in the list and download it again to optimize them properly. Don’t worry – I’ll show you how to do that.
What counts as a big file size, again?
Some sources say you can upload full resolution images up to 1 MB, but I strongly advise you not to. Basically anything around 1 MB or over, is way too big for websites. I know it feels like the right thing to do – you want your images to be really good quality, right? However, there are ways to preserve the quality, while ensuring the file size is low.
I advise to have images of under 300 kb file size – that’s the absolute maximum I recommend for full resolution images in places like full-width backgrounds etc.
STEP 2: IDENTIFY THE INTENDED SIZE FOR THE IMAGES ON YOUR PAGE
In the GTmetrix report, click on the “Serve scaled images” item in your recommendations. There you’ll find all the images that have been uploaded too big in pixel size, yet they were resized in CSS.
Before our page optimization, many of our images were resized in CSS, meaning that they were bigger, e.g., 960×960 px in real life, but scaled down by simply tweaking the Elementor image width to 183. While it certainly is awesome that Elementor lets us do that, the problem is – it costs our users extra load time.
I get it – it’s a hassle to go over every image on your site and try to understand the real size that your website is displaying. That’s why it’s very awesome that GTmetrix shows us which images are way too big in pixel size for their intended size on the site, and what is the size you should reduce your image dimensions to. You can click on the blue link and download them again, or simply find these files in your PC library.
Alternatively, if you want to keep an eye on the image size when designing your page, there are other tools as well, like the Image Size Info extension for Chrome (If you don’t use Google Chrome on your computer, I highly recommend using it while creating your site). Once you’ve installed the extension, this tool will then allow you to find out the image sizes of every image element on your site.
Make notes on what is the real size in pixels for your images in your website, and then with this knowledge you’ll be able to resize the dimensions of your photos to exactly fit the spaces as they are intended in the design.
STEP 3: RESIZE THE IMAGE DIMENSIONS FOR THE INTENDED SIZE
If you have a photo editing software like Adobe Photoshop or Lightroom, then you can easily change the size of the image there by clicking on “Save for Web” and entering the required dimensions. However, you don’t necessarily need these programs to resize your images to their true pixel size.
Your computer probably has these built-in image editing programs, like, Microsoft Paint or Mac OS Preview app. Follow the instructions in this helpful guide to learn how to resize in these programs. Or you can use a free web tool for resizing pixels like LunaPic that lets you do that.
In the slots for indicating pixels on the horizontal and vertical axes, enter the pixel dimensions that were recommended by GTmetrix in the STEP 2.
STEP 4: OPTIMIZE THE IMAGES TO REDUCE FILE SIZE
Find the files listed in the GTmetrix report recommendations under “Serve scaled images” and “Optimize images” items (STEP 1 and STEP 2 in this action plan). Probably, there are some file duplicates in both of these lists.
The top priority for you to do the resizing for “Serve scaled images” first, as described in STEP 3. You don’t need to necessarily resize anything for items under “Optimize images” if they haven’t been listed under “Serve scaled images”.
Upload the resized images and anything else listed under “Optimize images” in the GTmetrix report to TinyPNG – a free web tool that optimizes .jpg and .png images greatly reducing the file size. Download these files from TinyPNG and use them in your page. We’re using this tool all the time, and we’ve found it works even better than Photoshop.
If you use Photoshop or Lightroom, click on “Save for Web” and lower the quality a bit to reduce file size, while it is still looking decent (just check it with your own eye). Then proceed to TinyPNG for a sort of double-proof optimization.
STEP 5: UPLOAD THE RESIZED AND OPTIMIZED IMAGES WHERE THEY BELONG IN THE PAGE
Open the page in Elementor editor and change every image to their resized and optimized versions. Delete the huge files that you had previously uploaded so that your WordPress project also loads faster for you.
Update the page and start a new test on GTmetrix to see the new page speed score and if there is anything you have missed that needs resizing or optimizing.
I hope this action plan was helpful to you and may your page load in lightning speed!