Introduction
Page speed optimisation is not as technical as it sounds. Since 2010 Google has announced to rank websites according to the speed of the website. Thus Google compares the site with the competitive one predicated on finalised new segments. Most of the people pay heed to everything, but sometimes they turn their back on the page speed optimisation. Which, in result, can lessen their revenue, and the visitors may not become the paying customers. You won’t be able to attract your viewers to come again and again because delay in loading times will make users frustrated.
Therefore we cannot afford the negative impression on our users by giving them a poor performance through the site.
Code compression
There are a lot of ways to make your website work faster as compressing your code can make your site work better and quick, whereas it also reduces the amount of space needed to store data. Compressing your code doesn’t mean that your file is going to affect the execution, but it will erase unnecessary characters from the code (such as White Space, Comment out code, etc.). By compressing, you can have high SEO (Search Engine Optimisation) score.
Hosting Server Speed
There are innumerable options for you to select Hosting Server for your site. Here you choose to host your website according to your requirements. People mostly use Shared Hosting for their first site, but they don’t know the bottlenecks they are going to face. In Shared Hosting, you will have to share your resources with other customers as hundreds of thousands of customers will be using the same server at a time. Just being a cheap one, people choose this. The significant part is that your website will face a slow speed for your website to load. Whereas VPS (Virtual Private Server) Hosting or Managed Hosting packages can work tremendously and pay your invested money back. Furthermore, these hosting services are secure, scalable and high bandwidth.
Enable GZIP
Gzip is a method that can do both compressing and decompressing, which can surely make the size of your files smaller and let your website work and load faster. Apache, Nginx, Litespeed and .htaccess are the most common web servers that can enable GZIP.
Image compression
Images take a lot of space which can affect your site speed. The less the size or the number of the images on your website, the better it will be to load the site quickly.
Use PNG for images which are cropped to the pixel size that is required to display on your website. It improves your site speed, and above all, the quality of the image remains impressive. There are several websites which can compress your images.
If you are on WordPress, we will cover a list of plugins below which will minify the images to will help the speed of your website to load faster.
If you are not, Caesium and Mass Image Compressor is recommended to compress the size of the image.
Slow loading Page will escape your audience to come, and if they ever happen to visit again, they will immediately close your website. Remember (First Impression Is The Last Impression). Make the first impression vivacious and do follow the instructions.
Which image format is the best for websites?
JPEG
(Joint Photographic Experts Group) is also called JPG. It is a format of an image in which a lot of details are confined in small size by removing unnecessary details and called lossy compression. Most of the people who know about image compression use this format because it gives advantages to the owner of the website as compared to the other types of images. JPEG format comprises a small size of an image and saves space which you can take advantage of. JPEG can easily be uploaded to the website, and after compressing JPEG file, it doesn’t affect the quality of the image, and its appearance looks nice.
GIF
(Graphics Interchange Format) is used for animated small clips and uses lossless compression. After compressing GIF, the quality doesn’t remain as same as of JPEG. The size of this format remains larger as compared to JPEG. GIF supports up to 256 distinct RGB colours. This format is used for line art, but people do not use this excessively. GIF is the best usage for animated images.
PNG
(Portable Network Graphic) was created to replace GIF. PNG format creates a larger size of images as compared to JPEG. PNG is used for transparency in the image, and it uses lossless data compression. If you want to have transparency of an image, do use PNG. PNG is used for photos with text, illustration, signs, logos and icons. PNG compression is lossless, so it means that there will be no loss of quality. Images can be compressed efficiently and consistently. Its filename extension is (.png)
Webp
Here is the modern format of image compression which provides fantastic both lossless and lossy compression. This amazing format speeds up the loading time of your site. It keeps the quality of your image intact, reduces the size of the image and as well as efficient. Google Chrome, Firefox, Opera, Waterfox, GNOME Web and Falkon all these web browsers support Webp . This format is a mixture of all the formats. There are two types of Webp:
Webp Lossless
Webp lossless images are 26% smaller in comparison to PNGs. Webp lossless doesn’t remove the original data when the file is compressed.
Webp Lossy
Webp lossy images are 25% -34% smaller in comparison to JPEG images. Webp lossy removes the original data and reduces the size of the file.
Webp in WordPress
To use Webp in WordPress, you will have to use plugin Webp Express and Optimole, to convert your file into Webp format but there is one that this plugin uses Webp Convert Library for the conversion of the images. You can also enable Webp by combining EWWW Image Optimizer or ShortPixel with Cache Enabler, and both of them help you in converting JPEG or PNG files into Webp.
Google has proposed using Webp as an alternative to GIF format. This format also supports animated files and transparency. Its filename extension is ( .webp)
Recommendation
From all the above types/formats we have discussed, we recommend Webp for you. From every way, it fulfils your requirements. It not only gives you the quality of an image but also makes the size of the file too small and to be ranked.
Ways for compressing an image
Lossless Compression
You can guess from its name as there will be no loss. Lossless image means there will be no loss in the quality of an image, but the size of the image will be larger. The lossless image does not delete the original data bits ( binary digits in data code); it just rearranges them. Moreover, if you want to modify or edit a compressed file in future again and again or if you want to use a specific part for other purposes/project, you can do this. In lossless compression, you lose nothing but the file size of your image of the highest quality can also be reduced and it will not affect any appearance of your image.
Lossy Compression
A lossy Compression can be easily perceived by its name that there will be a loss of something. But the loss of something doesn’t mean that there will be a compromise on the quality of an image. It just removes unnecessary data which can be negligible. Lossy image compression can dramatically reduce the size of the file. Do you know what lossy does to reduce the size of a file? Lossy image deletes the original data bits ( binary digits in data code). Majority of the people use lossy compression because when the image is compressed, there happens a slight difference in the quality of the image but it is impossible to catch that difference because compressed image almost seems like to be original and untouched. It is also beneficial that it provides a smaller size of the file as well as quality image.
Recommendation
Lossy image is used by JPEG to create smaller sizes of files which gives better quality result rather than lossless compression. Moreover, lossless compression does not reduce the size of the file as much as Lossy compression does. That’s how Lossy image is way better than lossless compression. Now you are free to choose.
Impact of compression in WordPress
We have seen a lot of about compression and its types and its ways to use. But here we will discuss how compressing an image affects on WordPress?
Undoubtedly compressing an image impacts the same as we have read before about the working of compression. On WordPress, it has provided so many plugins that can automatically compress images. Compressing a picture will help you to save your disk space on your WordPress hosting account. Many beginners upload images without compressing them, but WordPress has made it convenient to use its plugins for compression. Here are the most popular plugins:
Most popular image compression plugins for WordPress (2020)
- WP Smush 1 Million installs with 5-star ratings.
- EWWW Image Optimizer 800,000 installs with 4.5-star ratings.
- Imagify 300,000 installs with 4.5-star ratings.
- ShortPixel Image Optimizer 200,000 installs with 4.5-star ratings.
- Compress JPEG and PNG images 200,000 installs with 4.5-star ratings.
- reSmush it 100,000 installs with 4.5-star ratings.
- Optimal 50,000 installs with 5-star ratings.
Using any of the Wordpress image optimization plugins will make your website work faster. They are easy to use and convenient.
Image Compression from Adobe Illustrator
Adobe Illustrator has a built-in feature of compressing an image. Let’s see how we can compress our image in Adobe Illustrator
- Bring your image in Adobe Photoshop
- Open “File” from the upper toolbar
- Then click “Save for web”. A new dialogue box will open
- On the right side, you can select different formats
- Choose JPEG, and you will see different options
- In the bottom left, you will see file size and then select according to your need as to how much you want to compress your image.
Browsing Cache
When the visitor comes to your site for the first time, whether it will take time to load but by an enabled browsing cache, the webpage will be cached in the visitor’s browser so that there will be no need to send the request to the server and if the visitor opens your site again, it will take no longer to load your site as it is stored in his cache.
Set up Content Delivery Network (CDN)
Everyone wants to beat their competitive website sumptuously by the content and countenance of the site. But Google has increased the standards of ranking and given the ways to boost the speed of loading the website. CDN is one of the ways, stands for Content Delivery Network and a distributed network. It deals geographically and finds the location the visitor of your site. Wherever the visitor is found, the server nearer to it serves him.
Summary
Small and medium businesses usually try to evade from investing in page speed. But they don’t realize that the money they invest in page speed pays them back as sweet fruit. Here you will have to be a pedant. Do not find short cuts or easy ways. Take out some time to fix your page speed or hire a professional.
There are trillions of web pages live on the internet. So everything matters when you make a website and choose everything that ensures quality work.
