Image SEO tags are important in blogging. The correct size image helps websites load faster. If a website loads faster it comes under the parameter of Google ranking. However, only fast websites can not rank without good content, good keywords, and relevant references.
Today you will get the knowledge how to optimize images and why it is necessary to compress the large image into small sizes. What benefits you can get after uploading compressed images to the websites. All these important aspects are covered in this blog post too the point.
To optimize website one must know what is lazy Load, why to use it, where to use it, how to use it, when to use it and when to avoid it.
Image SEO tags best practices wordpress lazy load settings
It is important to do off page on page seo for better results and image seo is part of on page seo. If images are good and compressed your website design will look good as well as load fast. Resulting in extra traffic not only from google search but also from image search. Drop-drop creates a good amount of needed water. Similarly one should not focus only on the biggest things to do the SEO because SEO is the inclusion of various small things. Crawling in seo plays an important role to optimize website, free website crawler screamingfrog is helpful in finding the pages without alt text.
Lazy loading images
Any element or resource is not downloaded till the user interacts or needs it. When the image is needed then only it will be shown or downloaded; this is called lazy loading.
It is necessary to understand lazy load first and to understand lazy load it is required to understand Async and Defer. Async and defer are very important to optimize websites. Image seo is important part of seo but completer on page, off page and technical seo are also important you can practice it by own or hire a freelance seo expert.
Image SEO tags
Async and Defer are two important tags helpful in increasing website speed. After successful optimization page speed rendering errors can be resolved so read carefully to understand these tags.
Async
When a website starts loading it automatically downloads lots of Java script files and HTML files. All these processes run simultaneously together.
When the website is loading, the browser is downloading and executing HTML files, java script files and CSS files. Heavy java script execution takes time. When a heavy Java script file is being downloaded and in process of executing till that moment html files rendering (passing) stops. Due to this delay website loading stops and this is known as render blocking resources.
When you check your website speed on page speed insight a small message in red colour appears “Eliminate render blocking resources”. This issue comes due to heavy java script loading time which is explained in the above paragraph. To resolve this issue an Async tag is used.
Async tag tells the browser to keep passing HTML files and download JavaScript files in the background. When the java script files complete downloading in the background immediately HTML files passing are paused by the browser. After pausing HTML files the browser starts rendering and executing java script files. Once JavaScript files are executed again HTML files processing starts by the browser, in this way this process continues.
In short “Async Tag” allows JavaScript files downloading in background but stops the html files execution process.
Defer
Defer tags also do the almost same process. Defer allows HTML files passing and java script file downloading in the background. When javascript file downloading completes the html file passing does not stop. After completion of Javascript file downloading the file remains the same in the browser and when the html file process is fully completed after that java script file is executed and rendered.
Due to this html files execution process takes in very less time, your website page gets visible on users device. JavaScript file is defer and will be executed later, html files processing is not stopped.
| Events | Async | Defer |
| Java script file downloading in background. | Yes | Yes |
| Pauses html parsing. | Yes | No |
| Executes after HTML parsing. | No | Yes |
Above the fold part
It is the top part of the website which loads first. Whether the user interacts or not scrolls or not this part shows on the top is known as above the fold part.
Intersection observer API
IO API tells the browser that now I am about to reach this particular element immediately loaded. After getting a message from the interaction observer API the website immediately starts loading that image or element from your server and shows in no time. This intersection observer API enables lazy loading in your website; you do not need to do anything to enable it. Lazy loading is inbuilt and already enabled in all modern browsers including Google Chrome, Safari, Firefox, Explorer, Mozilla and Edge.