What do you do when a web page takes too long to load?
You close it, don’t you? Or at least stay on the page for the valuable content but promise yourself to never come back. I mean, what page loads longer than 10 seconds in 2020?
What is the optimal page speed then, you may ask.
There’s no exact number, of course. But we’ve once discussed when people start leaving your website in this blog post:
- According to NN Group, the first 10 seconds are crucial: readers bounce the page if the content isn’t fully displayed within that time.
- All your efforts will be justified: studies indicate that 79% of users dissatisfied by the speed of the website never visit that site again.
- Moreover, 47% of the dissatisfied clients not only personally reject your service, but also discourage other potential users by writing negative reviews or by simply sharing their experience with friends.
Conclusion: keep your page speed at least under 10 seconds, most preferably under 3.
Factors affecting your page speed optimization
So what do you do to keep that page running faster than Usain Bolt?
Here are the main points:
1. Use lightweight images
Try to compress all of your images as much as possible without visibly losing the quality (it’s called lossless compression; we’ll get back to this point). Use an image optimizer.
2. Optimize caching
Set up a caching system that keeps and clears cache whenever necessary both automatically manually and automatically. Follow this link to learn more about cache.
3․ Use the best hosting
Find a managed hosting provider that offers higher server response time and preferably data centers in multiple regions. We have this managed WordPress hosting option for you.
4. Optimize your code
Minify your code. Remove comments and formatting. Get rid of unnecessary spaces, commas and unused code. Google recommends using HTMLMinifies, Uglify JS or CSSNano.
5. Reduce redirects
Redirects are sometimes necessary to avoid 404 errors. But whenever possible, avoid the multiple use. You can’t go to website.com > anotherwebsite.com > anotherwebsite.com/index and expect it to take less than 3 seconds.
Now let’s get back to where we started. What is image optimization and how it works.
How to optimize images for web?
You need software that reduces image resolution; namely, you want an image optimizer or at least a photo editor.
How image optimizers work
There are dozens of ways to optimize images for search engines. But by image optimization, people generally mean image compression.
So, an image compressor is a type of software either installed on your device or accessible online through a web browser. You upload your image and it slightly changes the tone of some pixels, making them look alike and use less data space. The change is often invisible to human eye, which is why this optimization method is called lossless compression.
The same technique is used in audio file compression: high frequencies are reduced in an amount not detectable by human ear.
What are the types of image optimization tools?
There are so many ways to optimize images! Here’s a few of them:
1. Desktop photo editors
Photoshop users don’t often need extra image compression. They can just export any image in a resolution they like. Same goes for any other editor.
But let’s be honest. Who uses this complex software just to reduce the image weight? Unless you need most of its tools, you won’t even bother to buy Photoshop, will you?
But similar online tools, maybe.
2. Online photo editors and mobile apps
Online photo editors and photo editing apps such as Pixlr and Fotor are designed for basic editing and the tools often include image optimization. But again, there’s so much effort (and often money) required to do such a simple job. You must still be thinking of a simpler solution.
3. Online image compressors
Now that’s better. Dedicated software is always the best. You google “image compressor online”, select the one with the funniest/smartest/simplest name and go with it.
There’s imageoptimizer.net, imagecompressor.com, and so on. Just upload your image and select the compression type. Many of these services have bulk optimization which may be handy for large amounts of media.
4. Built-in compressors
Compressors can be integrated with your CMS (content management systems).
As a WordPress user, you can have an optimizer installed directly on your website. It’s usually implemented through plugins. So you upload the image, and the optimizer automatically compresses it with your predefined settings. Or, you can still use it manually.
There are dozens of image optimization plugins for WordPress: you might have come acoss TinyPNG, EWWW, WP Smush, and so on.
After studying all of the available options, we’ve developed 10Web Image Optimization Service which is now available in premium version absolutely for free.
The service allows to compress images up to 90% without visibly affecting the quality. Let’s see some examples.
This photo below is originally 867 KB. After compression, it’s reduced to 385 KB. Can you feel the difference? Yeah, me neither.
You can compress your images both manually and automatically, while uploading them to your WordPress media library.
The ideal image resolution for your website
You might wonder if there’s an ideal resolution for images on your WordPress website. For example, the best resolution for printing is 300 DPI (dots per inch) in most print formats.
See, dots are the equivalent of pixels in printing. So is there a perfect pixel per inch (PPI) number for web as well? What should I aim for when I’m compressing an image?
Some resources say 72 PPI is perfect.
But in reality, there’s no ideal image resolution for web. Here, the image size is determined by pixels, not inches or centimeters. So whatever your resolution is, a 1000x800px image will remain 1000x800px. It may stretch or shrink, but will weigh the same.
Is there an optimal size-weight ratio?
No, there is not. Colors play a huge role in image weight. While a 1000x800px black and white photo with few elements can weigh 100KB, you can find another photo with vivid colors and high contrasts that weighs over 8 times more.
We can even compare two already optimized images in similar color palettes and see how the weights differ.
The photo of a house is now reduced to 283 KB. The photo of the old man, on the other hand, has the same size and is also optimized to the maximum but still weighs almost twice more — 538 KB.
You can be limited in maximum weight and can have limits in size. But the ratio is up to the image structure. You can just try your best to keep it as low as possible.
What’s the best image format for a WordPress website?
The most common formats published on the web are JPEG and PNG. WordPress Codex recommends both.
Each of these file types can work better depending on the exact image and its content.
JPEG (.jpg) is great for everything raster (comprised of pixels instead of lines), especially photographs. When you save your photos in JPEG, it usually gets compressed automatically. The best photo editors let you control how much detail is removed by compression. You can select the minimum amount and compress it later with Image Optimizer to avoid visible distortion.
PNG is for both photographs and line art. It compresses photos without losing detail, but usually takes more storage space than JPEG. This format is the best for vector files as it doesn’t distort them regardless of size.
WordPress (as well as Image Optimizer) also supports GIFs but as you might have noticed, this format causes maximum distortion, regardless of how carefully you convert your file.
What types of websites need image optimization?
Long story short, all kinds.
Do you display your logo in one of the top corners? You won’t believe how heavy the tiny image file can be. Check it; you might need some optimization.
Are you managing an online store and uploading images on a regular basis? You better set up automatic image optimization on your CMS (content management system).
Andrew Woods, co-founder and CEO at Duckpin, says:
“At Duckpin, we optimize images on EVERY website. Website page speed is a major factor in both visitor satisfaction and search engine rankings, and image optimization is a simple way to improve it. Lossless compression (reducing the file size while maintaining the same visual quality) can reduce image file sizes by 30% or more. Further image optimization techniques such as lossy compression and rendering appropriate image sizes can bring those savings to 50% or more which is an enormous impact on page speed! Image optimization is the “low hanging fruit” of improving page speed, so it shouldn’t be ignored.”
And whatever your website category is, you should think about its speed optimization in the design stage, not after everything’s ready. TagDiv has published a guide to avoiding common web design mistakes, and 10Web offers a lot of templates for WordPress, well planned to load fast on any device.
How image optimization affects SEO
You must’ve heard about optimizing images for better search results.
After learning all about image compression, you might think that it’s enough for SEO. But you need much more.
Image compression, however, does affect SEO. Let’s see how.
Image size and SEO
Size affects your search results in two ways.
1. Bounce rate
You know how heavy images slow down your website.
Search engines estimate pages’ load time and rank faster pages higher.
People visit, wait, and bounce slow websites. Bounce rate is a well-known ranking factor. If yours is high, your pages won’t make it to the top search results. The lower your bounce rate is, the higher your Google rank will get.
2. Faster page prioritization
Google has announced on multiple occasions that page speed itself has been an important ranking factor for years now. On average, images take 60 to 70% of your webpage. If you don’t compress, the number can get higher and higher, dramatically slowing down your website load time.
So if you care about SEO, never forget compression.
Tihana Drumev, content marketing executive at Best Response Media, doesn’t draw a line between image compression and image optimization for search engines:
“I’ve never uploaded an image without getting it optimized. However, more often, I cover the clients’ mistakes (enormously big files, pics named as code numbers etc.).
The main reason why I do it is search engine optimization (SEO). If the images are too big, it lowers the loading time which affects the user experience, not just the SEO.
Also, giving images a descriptive alt text and a title text is a must do. Alt text is a cue to search bots that the image is connected with the text on the page, and matches a certain query on Google images. The title text is for the reader. It’s an old print newspaper practice – readers love to read captions.
Following just these two basic image optimization practices, the visual and textual content is more connected, and you make the users feel much better while browsing through a website.”
Image metadata optimization
Well, first of all, what is metadata? It’s information about information. Image metadata is text information about your image visible to search engines.
As a WordPress user, you’re lucky to have an easy form to fill out with meta whenever you’re uploading an image to your media library.
Here are the main parts that you need to fill in after publishing your images.
- Alt text
With all these attributes, your images can easily be found with image search and suggested as related to other images.
Basically, image optimization is quite similar to overall page optimization: you need to make your content searchable through relevant keywords.
Besides keyword optimization, make sure your images are included in your XML sitemap. You can automatically generate a sitemap and edit it manually if you wish with 10Web’s free SEO service.
The service also allows adding OpenGraph and Twitter cards. With these tools, you can make sure the correct image will be displayed in previews when people share your page on their social media.
Did you learn something new from this article? Share it in the comments and ask us anything about optimizing images.
Are there many videos and images on your website and want them to load without slowing down your website’s performance? Optimize them not to lose efficiency!
Speed /spi:d/ (n.) the rate at which someone or something moves or operates or is able to move or operate. It a drag having to wait for a month to receive a letter from your lover or traveling 3 hours to get somewhere to have your fancy dinner. That’s why speed is considered one of the most important criteria when measuring the quality of service. Your website isn’t an exception. A slow website with blank error pages isn’t what you need, unless you’re, like, trying for zero traffic. Your website speed, often referred to as “website performance,” is the average amount of time it takes for the content of your webpages to be displayed on the screen of the browser requesting access. But when can you know for certain that your website speed is good enough? Where is the limit of a user’s patience? To understand the phenomena of the…