Solve the problem of Optimize images to increase website loading speed - WordPress

Day after day, the complexities of customizing and organizing sites increase in terms of the speed of site performance, as well as the speed of loading images and other matters that must be taken into consideration with every new update to search engine algorithms, and the many complexities in SEO that increase day after day. Many people try to check the loading speed of their website using the website checking tool 

PageSpeed Insights  

From Google, they find many problems that prevent their site from loading quickly, and one of these problems that we will solve today is the problem of the size of images on our sites, which we see in the scanning tool under the name  Optimize Images, and Google offers us several options to reduce the size of images and solve this problem.

The solution method that we will rely on today in our explanation

It is for sites running on WordPress blogs only, and the explanation does not include any other working platform. I hope that in the future we will be able to support other platforms within the provided explanations. First, we will explain the type of error that will appear in the site performance test from Google: When this error exists on our sites, this means that we have to do and start working on reducing the size of the images to suit the policies of site owners in Google, and any other search engine. In WordPress, we find many plugins that deal with this type of error, and today we will focus our explanation on a plugin with the name: 

EWWW Image Optimizer This add-on will customize all the images on the site and will also save a lot of space, which will provide us with SEO compatibility and also compatibility with the site owners’ guidelines. To install this add-on like any other add-on, this is done via: Control Panel > Add-ons > New Add-on > Then we search using the full name of the add-on and click on Install add-on and then click on Activate to activate the add-on. The second step will be adjusting the add-on settings. 

EWWW. Make sure to make the wp-content folder writable by giving it permission 777. To go to the main page for the add-on settings, we follow the following sequence: Control Panel > Settings > EWWW Image Optimizer > Then the general settings page will open for us and we will quickly preview them to explain the function of each option among those options provided.

The first section: Ensure that your server is equipped to work with the add-on. Our server must be equipped with the following add-ons: jpegtran, optipng, pngout, and also gifsicle, which are Linux add-ons responsible for controlling images, minimizing them, and compressing their size. As we can see in the previous picture, the presence of the word OK in green means that this server is compatible with the add-on’s requirements, and there is no need to take any additional steps on our part. Note: If there is any problem adjusting the server settings or some add-ons are missing, we must contact the hosting and request the installation of the missing package and then ensure that it works correctly.

Section Two: Uploading and hosting website images in the cloud

In this section, we will be able to choose to upload images to external hosting, Cloud Host, which is a paid service and is used in the event of increased downloads or bandwidth on the site. It can be used on participating hosts to reduce monthly data consumption on the site. Explaining this point will be skipped since we work on a private server that has enough space to process this amount of data.

Section Three: General settings for the EWWW add-on. In this section, we find a set of settings that must be in the same format that appears to us in the image above. To activate the option   optipng, we must remove the checkmark placed on this option, and after pressing Save, the installation of this add-on on the server will appear above. We will choose to install optipng on the server, which is a auxiliary package that enables the resizing of images with the extension PNG. We keep all the options as they are without making any changes, and if we want to tell the add-on to work automatically after completing the settings, this will be by selecting the option Scheduled optimization, and then we put the link to the images folder in the box next to this option, and this add-on will undertake the process of resizing the images in the way we want, which we will specify later.

Section Four: Settings for adjusting the image size. In this section, we will be able to adjust the appropriate settings to adjust the image size. These settings and their selection will depend on the resources available in the server. If you are working on a private server or working on shared hosting, you will have different options to adjust, and we will explain them here: Private Server: If you own a private server, you can set the options settings as shown in the image above without the need to make any additional changes. Shared server: The pngout optimization level option must be set to 2. If the problem persists that the add-on is unable to complete work on the image, try lowering it to 1. Raising this option will also lead to facing the problem of Time out. Section Five: Converting between image suffixes. In this section, you can choose to convert between image suffixes PNG to JPG or vice versa. It is preferable to leave these options as they are and not change any of them. These steps and this add-on will solve the problem of Optimize images, but we have one last step left to do to make the add-on work. After pressing Save, we will have two options for you to work with. The first is to customize the images of the template used and the second is to customize the images uploaded to the site in the media library.

Customize the template images: To do this step, follow the following image: After going to Control Panel > Appearance > Optimize > we click on the Run bulk optimize option to then start reducing the size of all the template images. If the add-on does not detect your template files, all you have to do is return to the third section of settings and specify the location of the template’s images folder, and the add-on will automatically reduce the size of the images.

Customizing media library images: This step is completely similar to the previous one, so it is not necessary to put an illustrative image. After entering the control panel and then going to media, we choose bulk optimize, and we continue by customizing all the existing images. We may encounter the problem of the addition stopping several times, but do not worry, the images that have been allocated will not be worked on again. You can start again from where you left off.

Here I hope that the topic has provided the desired benefit and addressed the problem of Optimize images, and the topic is open for any inquiry or question. #PageSpeedInsights #Increasing website loading speed #ExplanationEWWWImageOptimizer #ProblemOptimizeimages