In today's article, I'm going to introduce you to the low hanging fruit of speed optimization. These are tips that will take you just a few minutes to implement, and they'll actually make your website faster and give you a higher PageSpeed Insights score. They actually work—we've done it on so many projects. You spend very little time, and these are the first things you should always focus on before you optimize your website's speed. You can do them quickly and see a real difference.
1. Optimize the Largest Contentful Paint (LCP)
Very simply put, one of the most common issues affecting speed optimization and lower scores is the LCP—the Largest Contentful Paint. When you load a page—for example, your homepage—it's typically the biggest image on the page. It's your sliding banner on your homepage. In this demo site, it's your main image on your product page, or it's the biggest video embed on the page. This is before you scroll down; it's at the top of the page always.
This is what's going to give you a worse score and slower load times. So you want to focus on the biggest things first—that's why we call it the low hanging fruit.
Very simply, you're going to do two things:
a. Compress That Image or Video
If you make it smaller, it takes less time to download, less time to wait for the page to load, and more time to just load it quickly.
How do you do this? All you're going to do is download those main images. If you're not sure what it is, you can do a PageSpeed Insights test, and it will actually show you. Check the diagnostics below the PageSpeed score—it'll show you the image, and it'll give you the URL. You can download it or just download it from your page.
For example, right here, this is my image. Download it and compress it. We made a video about image optimization in more detail.
But very simply put, if you have a Mac, we suggest something like ImageOptim, which is a software you can just drag in your files. It'll compress it either lossless or lossy.
- Lossy is reducing the quality slightly, but it's very hard to tell. The file size will be much, much smaller.
- Lossless means it'll make the file size a little bit smaller, but it'll keep the quality exactly the same.
If you don't have it, you can use Compressor.io or any other tool. There's so many tools out there—it's crazy.
b. Preload the Image
The second part of optimizing this biggest image, the LCP, is you can actually do a preload. You add one more line of code that says, preload this image, which basically means, in simple terms, load this in the beginning. Load it before you load anything else. Preload it so you don't have to wait for it to load, and then the page has to wait for it to load.
If you're not sure what to do, or if you're not sure about preload, ask a developer, because if you abuse it or you do it wrong, you'll actually make a slower webpage. If you do too many preloads, you did the wrong order, or you weren't sure what you're doing—ask a professional. Anybody that knows what preload is and understands it really well can do it within a minute or minutes.
Very simply put, preload will load it quicker, you'll have a better score and a lower wait time, lower delay, lower load time, and you'll have a better score and a faster website. It's the biggest no-brainer thing you can do. Focus on that.
2. Lazy Load Images and Iframes
Lazy loading—we talked about this as well. We'll link all the videos of what we did for our speed optimization series.
Very simply put, when the page loads, it'll actually load everything—including all the scrolls, all the elements below. As you notice, there's five images here, and there's another image here, and there's all these images here. There's two per product, and there's eight of these, and there's this image. There's so many images.
So what you can do is specify anything that you need to scroll down to—don't download it. Don't affect the page speed by downloading 100 images. Only download these five and maybe the icons and this one. But anything below, you want to be lazy—load it only when you need it. So only when someone scrolls down, then it's going to download these. And then you scroll down more, it's going to download this.
How do you do that? Very simply put, you need to add an HTML tag. It's a simple tag which basically specifies loading="lazy". Right here, you have to specify the width and the height dimensions, and loading="lazy". And that's it—you did it.
Most browsers support this. It's very, very easy. Very, very simple.
A few tips, a few important things:
-
Do not lazy load something that's above the fold, which you can see without scrolling. That's what "above the fold" means. This is the fold—this line. Anything below this line, which means you have to scroll to get to it, is below the fold. Above the fold is here. Don't do that because it's actually gonna make your website score worse and can actually cause conflicts.
-
If you have an iframe or you embed a YouTube video (which uses iframe), you can actually do the same thing. Specify the width and the height,
loading="lazy". Very simply put, and it'll actually give you a better score and a better page speed.
3. Optimize All Images
The third thing is to make sure you optimize not just the biggest banner—optimize all the banners. Download all your product images, all your blog post images, all your banners, all your icons—everything—and use a tool to bulk do it. Either Photoshop bulk or, what we suggest, ImageOptim or any tool, and optimize them. Just re-upload them.
You'll be able to save between 10% and 50%, depending on how you do it—if you do lossy or lossless. It's a no-brainer. Images are one of the biggest, heaviest things on the page. They take the most time to download because a normal page might have 50 to 100 images to download.
4. Use a Content Delivery Network (CDN)
If you don't have a CDN—Shopify already has Cloudflare built-in, so you don't have to do anything—but if you have WordPress or Magento, or you have any platform and you don't have a CDN, it's a no-brainer.
I like to use Cloudflare Pro—$20 a month. They have so many things; I'll show you what it is, but you can use any CDN as long as it has advanced features.
For example, I'm in the Cloudflare backend. I pay $20 a month; I integrated once, which took me like ten minutes maybe. And they have all kinds of optimizations for speed.
One thing they have, which is really nice, is compressing the images automatically. You don't even need to use ImageOptim or compress yourself—download, compress, and re-upload. They actually do it automatically for you. You just specify if you want lossy or lossless. You specify if you want also WebP format, just like JPEG, PNG, GIF—you also have WebP, which is a smaller size. You turn it on, you click, and you're finished. It'll actually do it automatically on the fly for you. It's really amazing.
It also has other optimizations like improving the load time for mobile devices on slow networks and all these other things—for example, compression and font compression, and many, many other things. You just click a few times. You don't need to be too technical; obviously, you need to test the site to make sure you didn't break anything, and you're good to go. $20 a month—amazing.
There's other CDNs—do your own research. Everybody has specific requirements. I like Cloudflare, and that's it.
5. Remove Unnecessary Elements
This is kind of a no-brainer, but I think very few people consider it, and people are really married to their content.
If you look at a page—for example, especially homepages—have so many elements. There's five rotating banners, and there's a banner here, and there's images, and there's two of each product image, and there's banners, and there's more images, and there's a YouTube video, and there's icons right here.
Very simply put, most people don't scroll to the bottom. Most people are not going to remember all your five banners or your seven banners. What about just removing one banner? What about removing the YouTube video at the end? What about making things a little smaller? What about monitoring if people actually scroll to the bottom?
Removing elements—do you really need your Instagram feed? It looks beautiful when you look at it, but how many people really look at it? Okay, maybe you can move things to other pages. You can reduce—reducing elements is very, very simple. It works. Don't be married to the design you made; be married to what your user, your visitor, likes. If they don't scroll, remove it. It's actually making the webpage slower, the user experience slower for everybody that doesn't scroll.
Everybody has—a hundred percent of the people have a worse experience, and you only have maybe ten or twenty percent of the people who get to the bottom of the page. Do that. At least lazy load it. You can lazy load code or other—just remove elements. You don't need five banners; you don't need seven banners. Have three. Focus people on your business goal and what's good for them. Very simply put.
