One of the most common elements that increase the loading time of a website is precisely unoptimized images. This mainly concerns the format of graphics, their compression and the dimensions of the photo located on the server in relation to the image displayed on the page. They should be the same. For example, you should avoid: reducing the size of the photo using CSS. Remember to make a backup copy when performing any operations on photos!
photo compression
Photo compression
By changing the image format, for example to WebP, which is a format with better compression, we can save a lot of KB and significantly speed up the loading time of the website. In the case of graphics in the PNG format, we can gain about 26% of weight, and JPEG on average by 25-34%. With some photos, the weight can be reduced even several times. More about graphics in the WebP format on the Google website - https://developers.google.com/speed/webp
How to use the WebP format? If the site is based on the WordPress engine, it is worth using the Webp Express plugin, however, the server configuration often affects its correct operation. You can also place photos in standard and Webp formats on the server and prepare an original script that will display the appropriate image format depending on the browser. This is especially important because some browsers do not yet support this format.
How to compress photos? If we have few photos, we can use the application https://tinypng.com/ . All we have to do is upload the photos, wait for them to be compressed, download them and replace them on the server. If we want to compress many more photos, I suggest using a plugin for popular CMS systems or our own script. Image optimization has a key impact on speeding up the website.
You can read more about graphics in Justyna's article about positioning images in the Google Images search engine .
2. Lazy loading
What is lazy loading? It is a mechanism that aims to load graphics skype database on a page only when they are needed - for example, when we scroll through the content of a website and come across a fragment with graphics. As a result, the page will load faster.
How to enable lazy loading? This function is available by default from version 5.5 of WordPress, in older versions of this software it is worth using e.g. the A3 Lazy Load plugin. You can use a light script of your own that will delay loading of graphics or manually add the loading="lazy" attribute to the img tag - popular browsers support this solution.
3. Video on the website
Of course, we are talking about all kinds of videos displayed on the site that are hosted on the same server as our site. This can be deadly to the server, especially if it has bandwidth limitations and the video is played frequently. This can cause delays or even pauses in playback.
What should be done?
You should definitely avoid large video files. This practice negatively affects page load times and user experience.
Hosting a video on your own server is inefficient, a much better solution would be to place the video on an external platform like YouTube and share the video on the site. This will save space on your server and reduce the loading time of the video/page.
Why?
Because YouTube servers are among the best and are located all over the world. Additionally, YT adjusts the quality of the video to the bandwidth of the user's Internet connection. This means that if we have a slower Internet connection, we will see a lower quality video. The effect will be that the video will appear to our eyes much faster and with less chance of interruptions in playback (stutters). The loading="lazy" attribute can also be assigned to videos placed in an iframe on the page, which should speed up the page loading time a bit.
suboptimal video loading
If the video must be loaded from your server, make sure it is in the right format and compression, of course so as not to lose quality. You can use video converters and compression programs available online for this purpose.
optimal video loading
A common practice to speed up page loading is to place a graphic with a “play” icon resembling a video player. Only after clicking the graphic will the video start loading or the YouTube player scripts download. However, using such a solution requires programming skills.
