DEV Community: Rajeev Sharma

Core Web Vitals Score Updates Impact Google SEO

Rajeev Sharma — Fri, 26 Mar 2021 16:49:29 +0000

Google has officially confirmed the next core algorithm update to shift page ranking factors in May 2021. They make a bunch of changes every week, particularly to encourage webmasters to keep updating their sites beforehand. The update includes a series of benchmarks to enhance the user experience. So soon after the update, Core Web Vitals, HTTPS-security, safe browsing, intrusive interstitials, and mobile-friendliness will become the most vital ranking factor. It may sound very complicated and technical at this point, but the key takeaway is to ensure the best onsite experience for the end-user interaction with the website.

We're announcing that page experience ranking signals for Google Search will launch in May 2021. This will combine Core Web Vitals and previous UX-related signals.

Learn more: https://t.co/OrrR8LDl1a

— Google Search Central (@googlesearchc) November 10, 2020

Breaking Down the Core Web Vitals Update

Google is tapping some specific things through this update like:

How fast does the page load?
How visually stable the page is?
How soon users can interact with the page?

The ranking metrics can analyze the pages to provide the answers to such questions. As for now, the site owners need to break down and understand the update for its legitimate implementation. The diagram illustrated below is a bird’s-eye view of this update:

Largest Contentful Paint (LCP)

LCP estimates how long it takes to load the largest content such as a website’s feature image, text, or video in a desktop or mobile viewport. This kind of largest image content can be optimized and delivered superfast to the end-user with the help of ImageEngine.

Cumulative Layout Shift (CLS)

CLS analyses the visual stability of a page. For example, if a user hits a button, how quickly it can shift to the expected layout is analyzed by the CLS.

First Input Delay (FID)

The first input delay estimates how fast the page interacts with the user’s requests. For example, if a user clicks on a button, how fast the browser processes such a request and generates the result is calculated by FID.

Mobile Friendliness

The update will check whether pages are mobile-friendly or not. The relevant results must be readable without tapping or zooming, the page must avoid horizontal scrolling, unplayable content, and tap targets must be appropriately spaced.

Safe Browsing

Safe browsing means the page must not contain deceptive or malicious content. It’s designed with user’s security and privacy in mind and identifies websites appearing fraudulent. Once data is flagged as malicious, it can’t be used anywhere else in Google.

HTTPS

Google ranking checks whether the site is HTTPS secure or not. The HTTP sites will be labeled as not secure on Chrome browsers. The pages served on HTTPS are served with a secured connection. Web security enhances the user experience for positive results.

No Intrusive Interstitials

No intrusive interstitials specify that the page content is easily accessible by the user. Google wants to make sure the pop-ups and ads do not interfere with the requested content. Most of the time pop-ups take up most of the screen which leads to a frustrating experience.

What You Can Do

Don’t get frustrated with these updates. , for pointers please read: Improve Core Web Vitals with ImageEngine.

Overall, these updates to the page experience updates will help diverse ecosystems of web developers and businesses to deliver a delightful user experience.

The Mission of the Update

Journey matters, not pages. People surfing the web are on a journey, each action ideally contributes to the flow. Just like the real world, they encounter distractions, delays, interruptions, and errors. All these circumstances scale down satisfaction and increase abandonment in the site journey.

The mission is to get sites on the proper track with high speed, security, and responsiveness to enhance the user experience will create better user engagement on the web. Incorporating these new signals into your site can make the web better for everyone.

How the Update would Affect Ranking?

The next core algorithm criteria are going to become Google’s top stories. To appear at the top of search results you need to meet the minimum threshold of the core algorithm. Accelerated Mobile Pages (AMP) is going away. As of now, AMP is not an important requirement anymore to rank on the first page. These up-coming metrics will indicate website SEO health.

How to Capitalize on this Update?

Site owners are working hard to prepare pages for the new signal as Google median reports show a 70% increase in user engagement. with Page Speed Insights and Lighthouse to evaluate the page experience metrics to stay on top of the search results.

Focus on what’s crucial. If there is a problem with the site, how should you measure and fix these issues? Google made it so simple to discover them. Look into the search console to analyze the site’s core web vitals. It will disclose all about the URLs in the index, whether it’s performing well, poor, or needs improvement.

If the URLs need improvement or poor, then investigate to find out what’s wrong there and how to fix these pages. The search console reports are generated in the PageSpeed Insights. This tool is powered by Lighthouse which is a performance metric tool to diagnose issues.

Here are a few ways to prepare your website for Google core update.

Conduct an Audit – Conduct an audit to find out the strengths and weaknesses based on Google standards to keep the website technically healthy.

Conduct Speed Test – Since website speed impacts directly the site speed, so conduct a speed test to identify the aspects hindering site performance.

Modify Unstable Layouts – If site layouts shift to inconsistent format then it delays the users to take quick actions.

SEO Maintenance – Site maintenance is essential to optimize the site for algorithm updates. Since Google consistently improves search engine algorithms to serve users with the best.

Monitor Analytics – Monitoring site analytics reveals the unknown issues on the site like high bounce rate, lack of connection with visitors, or any shortfall in the target.

Analyze these parameters to consistently deliver a great web experience to users anywhere. For fast, stable, maintained, and secured content delivery at global scale users can activate ImageEngine image CDN.

ImageEngine optimizes site landscapes and delivers data via a global CDN after detecting the user’s device capabilities and viewport. The original image is fetched and converted to an optimal file format for the end-user. The delivery network enhances site loading speed to improve web performance, SEO, user experience, and conversion rate.

Why is ImageEngine Better than Other CDNs?

ImageEngine has image optimization and content delivery network resources dealing with page speed specifically. This diagnoses site parameters to improve the page experience along with Core Web Vitals score.

Traditional CDNs focus on pushing the content in the cache to reduce geographical distance but hardly know about the capabilities of requesting devices. Whether it’s a laptop or smartphone these CDNs send the same image.

Whereas ImageEngine is device-aware. Its CDN reduces image payload and response time as well. The ImageEngine CDN’s virtual cloud-based edge servers detect requesting devices and optimizes images for the device’s screen size, browser, and ability to support next-generation image formats. It then distributes the tailored images via hundreds of servers across the globe. The optimized image is indexed in the cache to deliver it quickly the next time a similar device requests the image. The optimization solution delivers high-quality visuals with the lowest possible payload size. This efficient CDN solution reduces image payload by up to 80%, lowers delivery cost for the the website, saves time for developers, and provides a superior user experience across all devices.

Conclusion

The goal of Google’s update is to help end-users to get the most relevant and quality search results on the web. The only mission behind these updates is to ensure that the user finds the results they want with the best experience. Now that core web vitals score is considered as a ranking signal, not only the content on the page, it is time focus on the actual user experience on the site. ImageEngine will address several of the low hanging fruits for better SEO automatically. Key components in the new ranking algorithm, like largest contentful paint (LCP) will be significantly improved for sites using ImageEngine.

Optimize images with Sanity headless CMS

Rajeev Sharma — Wed, 03 Mar 2021 12:10:03 +0000

In today’s day and age, where communication is led digitally, having a high-quality website is essential for acquiring a wide exposure in the web market. Over the years, Sanity has become one of the most popular headless CMS platforms and is being widely used for creating high-quality websites. Built on JavaScript and React.js, Sanity provides content access through an API and one can choose where to upload the content. What’s different now, though, is that website owners are also merging other powerful solutions such as an image CDN among many others.

An image CDN is a regular content delivery network topped with a set of software enhancements to improve the underlying CDNs functionality for optimizing and transforming images in real-time, thereby making it more suitable for image delivery. One of the most technically savvy providers of image CDNs is ImageEngine.

Before understanding how images are managed under ImageEngine and why they should be integrated with Sanity, it’s important to know the image management process of Sanity first.

How Sanity Manages Images

Sanity manages the image through a pipeline and distributes it globally at the edge. Anytime an image is requested, a new image is created and automatically cached around the user to deliver maximum frontend performance.

Image Representation

Images are represented as a field in a document or embedded in a text block. It might include additional information such as caption, credit, and specific crop. The actual image data to be displayed is referenced as an asset.

To Show Image

To present images, get the base URL of the image from the asset.

Here, we have a document “type - person” with the field image, the base URL can be fetched with this query:

Get the reference asset of the image to extract the URL only.

URL Builder

A package is provided to build a URL with any framework. The @sanity/image-URL npm package for JavaScript projects is provided to generate image-URLs for the image record. The user can also specify constraints such as width, height, etc.

Configure the URL with projectID and dataset. Import the right path to the root project file. Like this:

Use this builder syntax to create the urls:

How Does ImageEngine’s Image CDN Work?

ImageEngine has a global network of servers for faster delivery of the optimized images. So, the integration page load is faster than ever for improved core web vitals, SEO, and user experience. ImageEngine’s image CDN uses the closest node to the user to deliver the asset fast. Before delivering an image to the end-user, it detects the user’s device and optimizes the images for the requesting device.

Delivery Network

The device-aware image CDN from ImageEngine performs edge-computing and significantly reduces the website payload. It supports:

Device detection: Distributes device-specific images from cache for faster image delivery.

Image resizing: Perfectly optimizes images without interrupting the existing environment.

Global CDN: Delivers the image quickly via a highly distributed geographical network.

Adaptive compression: Performs compression based on PPI (Pixels Per Inch) supported by the users’ devices.

ImageEngine can be integrated on the webpage in different manners. Prefixing allows the complete origin image URL to be prefixed by an ImageEngine delivery address. In this case, no DNS changes are required.

If a custom CNAME is preferred, the CNAME can be used directly when an origin is attached to the engine.

Image Management

ImageEngine simplifies the image management process and transforms images into different competitive formats such as AVIF, WebP, JPG, and many more.

WebP: WebP is an incredibly useful format as it offers both performance and features. Unlike other formats, WebP supports both lossy and lossless compression, as well as transparency and animation.

JPEG: This format is best for still images, real-world images, and complex coloring.

AVIF: AVIF not only has superior image quality but also supports 10 and 12 bit color at full resolution, resulting in images that are up to 10 times smaller than other known formats.

ImageEngine’s image CDN also reduces image payload by an average of 84% in WebP images and 79% in JPEG images.

How to Integrate ImageEngine with Sanity

Integrating the ImageEngine with Sanity is very easy and helps in optimizing, converting, and delivering the image files for quick access. Listed below are five steps to integrate ImageEngine API with Sanity:

Step 1: Sign-up the ImageEngine Account to optimize images and to get a delivery address to boost web performance.

Step 2: Specify the origin of the images. Enter the Sanity website URL: https://www.sanity.io as image origin. After specifying the origin of the images, ImageEngine will generate a delivery address.

Step 3: To integrate the ImageEngine with Sanity follow the methods below-mentioned steps building upon the image-URL package:

Prefixing Method

In the tag add the ImageEnigne delivery address in front of the call to the URL For() function:

Then the image src URL will be like:

Delivery Address Method

The other method would be to replace the cdn.sanity.io with the ImageEngine delivery address in the image tag:

Then the image src URL will be like this:

Thus, ImageEngine CDN integrates with Sanity to optimize your web performance.

Use the control panel to customize the account anytime. The settings, origin, and delivery address can be changed later on.

Sanity Image vs. ImageEngine

Generally, there is a significant difference between the file sizes but there is a negligible difference in image quality. Furthermore, the most compressed AVIF image format is supported by ImageEngine but not at all by Sanity.

Sanity API Image

The Sanity optimized image size is 25.7kB as shown below.

ImageEngine Optimized Image

ImageEngine’s optimized image size is 15.4kB as shown below.

Here’s a comparison of ImageEngine’s image and Sanity’s published image.

The different image formats above are generated by Sanity and ImageEngine for size and quality comparison.

Conclusion

Integrating ImageEngine with Sanity is an easy job that helps in optimizing, converting, and delivering the images for faster web page loading. This easy integration is followed for almost all the formats under any of the two methods i.e. Prefix or delivery address method and makes it possible to reduce the image file size upto 20% without compromising the quality. All of this not only improves the core web vitals but also positions a website as an authentic source in the eyes of users. Furthermore, the most compressed AVIF image format is supported by ImageEngine but not at all by Sanity. So, start using ImageEngine for sanity today and see the difference in speed and scalability.

Top 9 Tips to Optimize Images in 2021

Rajeev Sharma — Wed, 06 Jan 2021 08:29:09 +0000

The ‘need for speed’ is an essential item on every website’s bucket list these days. And why not? An enhanced speed is directly responsible for converting traffic into paying clients. Anyone in any industry wishes to boost their website’s loading speed, providing an improved user experience. Plus, don’t forget that escalated site speeds also escalates the website’s ranking to more competitive spots on the search engine result pages and improves core web vitals. So, how can this need for speed be achieved? The answer is image optimization.

What is Image Optimization?

Image optimization is a process of delivering superior-quality images in the appropriate format, size, and resolution while keeping them in the compressed size. Image optimization, if done right, not only improves a website’s performance but also certain other metrics like:

Page loading speed
SEO ranking
Conversion rate
User engagement
User experience
Resource download time

However, the image optimization process can be accelerated for better efficiency if some modern tips are followed. ImageEngine, with its years of experience in the image optimization industry, has cherry-picked some tips that can help the businesses in the year 2021 and beyond.

Tips for Perfect Image Optimization in 2021

In this article, the top five tips to optimize images have been outlined to help industries dart maximum business opportunities. All the tips discussed have been backed by comprehensive research and years of experience in the image optimization industry.

Right Format Matters

Selecting the right image format matters a lot in the optimization process because every format is meant to serve a specific requirement.

JPEG: Best for still images, real-world images, and complex coloring
PNG: Best for web images like logos and complex images like photographs
GIF: Best for low-resolution images, animated graphics, small icons, and simple images. However, it is not advisable to go with GIF format but rather use mp4 or a webp instead.
TIFF: Best for high-quality and large-size print graphics
WebP: A modern image format that offers superior compression while maintaining great quality

Choosing the right format reduces bandwidth consumption for an improved webpage loading speed. However, a new format has joined the club, i.e. AVIF, that covers up the good properties of all the above image formats and surpasses even WebP while maintaining an excellent compression ratio. AVIF provides almost 50% saving in size when compared to JPEG format.

Serving images in the next generation formats like WebP and AVIF is a trending practice these days.

Go for Image Compression

Once the correct format has been selected, then it becomes important to reduce the size of the images through a compression method. There are two methods of compressing images:

Lossless compression: In this method of compression, all the unnecessary metadata linked with the images is removed without degrading the quality. The metadata can be erased safely while exhibiting the images on the website or application.
Lossy compression: In this method of compression, the quality of the image is slightly reduced to accomplish a lower size. The file size obtained in lossy conversion is comparatively less than what is achieved under lossless compression. However, a naked human eye cannot highlight the difference between the original image and the lossy compressed image.

Never Miss on the CDN

Image optimization and image CDNs are a match made in heaven. Website images not only need to be optimized but have to be delivered fast and easy as well. An optimized image is of no use if it cannot be transported quickly. An image CDN (Content Delivery Network) takes care of this need as it makes rapid delivery of optimized images possible by reducing the distance between the online visitors and the servers.

The global image CDN also serves a ton of other benefits like:

Enabling fast global reach via cloud acceleration
Audience segmentation (based on device viewport) becomes easy
Saves a lot of cost by eliminating the need to invest in separate server providers in different parts of the world
Pulls down the load on the server to achieve reduced delivery cost
Secure storage capacity

The carefully engineered image CDN from ImageEngine distinguishes itself from the rest with its unique features listed below:

The images are optimized to be delivered 30% faster than other CDNs in the market
It is easy to integrate and configure ImageEngine CDN
The images are automatically optimized to the relevant format as per the user’s viewport size
The images can be delivered in next-generation formats such as AVIF and WebP
The images delivered have reduced size (irrespective of the format) and outstanding quality at the same time
ImageEngine's extensive global CDN network provides support for HTTP, HTTP/2, WAF, and DDoS protection.

Set-up Browser Caching

The “Leverage Browser Caching” warning displays on the Google PageSpeed Insights tool when there is no caching rule in the place or the expiration time has been set too low. In simple terms, the warning is a suggestion to improve website speed.

Browser caching instructs the visitor’s browser to save some specific files on the visitor’s local system instead of downloading the files again and again. For example, a visitor needs to download the logo image of a website on the first visit. However, after every next visit, such a visitor would be able to load the logo file from the website’s local cache, provided that the browser caching has been enabled. The result? Faster loading because the visitor is no longer required to get everything from the website’s server directly. Browser caching can be used for not only images but many other types of files like statistical resources and object data.

There are many ways to leverage browser caching but simply adding the following lines of code to the .htaccess file is the most effective one:

Browser caching stores the images for a decided interval of time for easy and quick accessibility. A custom timeline or industry standards can be followed for this purpose. The timeline in the above-shared code snippet is one year.

The .htaccess file can be found with the help of an FTP program for connecting to the root directory of the website’s server.

Disable Hotlinking

Hotlinking means when an individual or business copies the URL of an image, which belongs to another website, and embeds it on their website. This results in the image being displayed as if it was an owned content. Hotlinking is a next-door neighbor of copyright infringement but despite this fact, the practice is very common. In many cases, hotlinking is unintentional but it can cost the original owner of the image some money. It can even affect the website’s performance if a drain of the server’s resources happens.

Optimize for Flaky Connections

If a website has a lot of content and rich images to offer but a part of users visiting such a website don’t have reliable internet connectivity, then this portion of visitors would not convert. This situation is no different than a lost business opportunity. Not all website visitors have access to fast and reliable internet facilities, therefore, it is recommended to optimize image content for spotty connections.

One trusted way of optimizing the images for slow connections is compressing the images to an appropriate level in real-time. However, even before compressing the images, it is important to determine the network speed of users visiting the page and then categorizing them into buckets based on connection types like 4G, 3G, 2G, or slow 2G.

But ImageEngine simplifies the whole compression process. It fetches and optimizes the images in the right format, dimension, and quality directly from the URL and then delivers such images on the website’s front-end via global image CDN.

Handling Responsive Images

A lot of traffic arrives from mobile devices and as such, it is important to have a perfect strategy for responsive images.

If vector-based images are being used then using SVG format would be a great way to optimize them for any viewport without worrying about sizes because SVG images are resolution-independent.
Using media queries for background images or images that have been produced via CSS is the best way to display smaller images to mobile devices.
For inline images, techniques like the srcset attribute or the picture element can be used.

srcset attribute: This attribute can be implemented on the img element for defining the images at different sizes so that the browser can select the best option based on the device characteristics like width.

picture element: This is best to be used if different images are required to be displayed based on the device’s display size.

All the aforesaid discussed options offer different ways for displaying the optimized images to visitors depending upon how they are trying to view the website. MDN’s responsive image guide and Google developer’s image guide can be referred to for learning more about responsive images and using picture element or srcset attributes.

Responsive Images

Images are required to be responsive to deliver the right optimal image for every screen size. It enhances the user experience and reduces the loading time. According to the browser or device in which images are viewed, the responsive images of different sizes are displayed such as full-size, thumbnail, or featured images. To create a responsive image you need to have different versions of the image.

The problem is to optimize a high-resolution image that looks great with details, but while displaying it on mobile devices, many details are missed. Instead of shrinking the image details, just crop or scale down the image for mobile devices.

Advantages of responsive images:

Improve the page loading speed
Increase your reach through smartphone responsive design
Increase conversion and sales rate with consistent user experience
Reduce load over the server and server memory
Boost conversations

Client HintsThe fundamental of Client Hints is simple - the client through a device sends the server some hints regarding the requirement. The server with responsibility serves them with the right resource according to the hint. For example, with the help of hints, browsers tell the server for 600px images for the device layout. The select image to be served based on the requested parameter. Even if the client informs that the data saver mode is enabled, the server delivers identical images of a lighter version. The browser and server interact through Client Hints, the job becomes readable, shorter with the same functionality.

Client Hints with ImageEngine

ImageEngine delivers images with the required - Width, DPR, and Data Saver. The responsive images are created based on client hints about width and DPR and later cover the Data Saver client hint.

Optimize Images For Retina Displays

Apple coined the term “retina displays,” which display clear and densely packed pixels to provide perfect vision from an appropriate viewing distance. Now, most smartphones and desktops deliver users a high crispy viewing experience. Apple with Retina, squeezed four times pixels in the same space to create a density of 326 pixels per inch(PPI) making the displays smooth.

Why Optimize Images for Retina?

The average screen pixel density is quite low, so the web-based standard images need to include 72 PPI to cover a certain height and width. While to conserve bandwidth many uses to include more pixels.

We need to maintain the appropriate density of pixels otherwise the image will cram or get stretched by putting gaps in between gaps. As a result, a fuzzy image is created with jagged edges which distract the viewer from your brand. To solve the problem, Retina class displays came into the role. It increased the image resolution, enabled to optimize high pixel density in small space, and even display images decently over the large screens.

People these days browse from a different device, most users access images from smartphones rather than desktops. So you need to optimize the image for Retina displays.

Wrapping it up

There are many tips and tricks to optimize images but of all these tips, combining the CDN has proven to be the most effective and long-term solution for many businesses all across the globe. Image CDNs automate the optimization process for a business so that it can focus on its core activities properly. The good thing is that it is not all expensive to integrate image CDN. It is easy to get started with and generates the results in a short duration.

Why AVIF Support in WordPress is Important?

Rajeev Sharma — Wed, 16 Dec 2020 11:16:44 +0000

WordPress is a popular open-source CMS (Content Management System) Developers, designers, digital marketers, and most importantly end-users interact with WordPress on an almost daily basis. One of the most common issues they all have to deal with is the slow web-speed that is very common to WordPress. Various techniques can improve performance, but of all such techniques, businesses should start looking forward to AVIF. AVIF is a new, ultra-efficient image optimization format that developers can easily integrate with a WordPress site to render it super fast and super reliably.

So, what is AVIF, why does a WordPress site need it, and how it can be enabled in WordPress?

What is AVIF?

AVIF (AV1 Image File Format) is a next-generation and open-sourced image format built by the Alliance for Open Media on its AV1 format. It generates a highly-compressed image that retains great quality. Most importantly, this format provides a considerable reduction in the image size in contrast to other extensively popular formats like JPEG and WebP. AVIF offers 50% savings in size when compared to JPEG and almost 30% savings in size when compared to WebP.

Apart from the size, the AVIF is also competitive when it comes to quality. To better understand the quality characteristics of AVIF, a single image in different formats are compared below-

Original Test Image (Size: 1.8MB)

AVIF Image Generated at 40% Max Quality and 30% Minimum Quality with 698KB Size

WebP Image Generated at 75% Quality with 1.2MB Size

JPEG Image Generated at 75% Quality with 863KB Size

Note: To access all the files compared above for a better analysis, you can visit this link.

The above test image of an eagle was specifically selected because it combines low-frequency detail (background) as well as high-frequency detail (eagle). This variation within the image allows easy observation of the changes in the image quality for each format. The tool that has been used for the image conversion is Squoosh as it provides advanced image compressing options and is simple to operate.

In terms of quality, some grainy effects in the background are observable for all the compressed versions but with JPEG format, there are some bad-looking artifacts and sharp edges in the background. On the other side, the WebP and AVIF are comparatively smooth and easy for the eyes. On further analysis, the AVIF format retains additional details in the core subject of the image i.e. eagle when compared to WebP.

Looking at these results, AVIF is the winner in both image quality comparison and minimization of file size. There is no doubt that AVIF possesses the immense potential to accelerate websites by loading images faster while also providing a better user experience.

Why Does a WordPress Site Needs AVIF?

WordPress needs AVIF because of two reasons. First, technical professionals and end-users often struggle with web speed issues that are very common with this CMS. Hence, AVIF can contribute to faster loading because of its incredibly low-size images without causing any dent in quality. The second reason is that WordPress is the most dominant CMS in the world with over 455 million websites in 2020. This means that around 35% of the web is powered by WordPress. Further statistics from WordPress reveal that as of November 2020, over 409 million people view more than 20 billion pages each month.

The below-shared image from WordPress provides an insight into the live activity across WordPress.com for a fraction of seconds-

This map is always blinking every other second. There are millions of businesses that rely upon WordPress. Businesses that use WordPress have the responsibility to serve such a gigantic audience with a better user experience. This is possible with fast-loading speed. To improve web-loading speed, image optimization is one of the most reliable and efficient solutions. By optimizing images with the efficient AVIF format, WordPress

developers can provide a next-level user-experience to the target audience that will lead to a rise in view-time, engagement, and conversions.

One should also not forget that the improved web-loading speed also contributes towards a better picture of a website’s core web vitals for a better ranking on the search engine result page.

However, the most important question is how can AVIF be enabled in WordPress?

How to Enable AVIF in WordPress?

Enabling AVIF in WordPress is an easy job when using the right tool — an image CDN. The carefully designed Plugin from ImageEngine is a perfect accessory for this purpose. In the upcoming update of this plugin, it might become capable of automatically optimizing static images into next-generation AVIF format and the browser then would deliver such optimized images on a WordPress site via ImageEngine content delivery network.

The plugin engages the ImageEngine CDN service to dynamically optimize the images in WordPress specifically for the browser, viewport, and device characteristicsImageEngine aims of the requesting end user. . Hence, the ImageEngine can generate an AVIF image that is specifically tailored and optimized to the end user’s device. This is one of the highly recognized unique selling points of the plugin.

Some other features that make ImageEngine a better choice than other CDNs have been listed down below-

The optimized images are delivered 30% faster than other content delivery networks in the market.
Up to 80% image payload reduction is achieved without any downside impact on the image quality.
The ImageEngine Image CDN plugin is not only easy to install but easy to configure as well before enabling it. The need for moving or uploading images never arises.
It can automatically optimize a diverse range of image formats like PNG, JPG, SVG, BMP, GIF, etc. into next-generation formats like WebP, AVIF, etc.
The images are delivered through a wide global CDN network that extends the support for HTTP, HTTP/2, WAF, and DDoS protection.
The ImageEngine Image CDN plugin is compatible with the WordPress Cache Enabler plugin.

The image shared below is an ImageCDN configuration screen reflecting a successful configuration test-

Another image shared below is a configuration screen reflecting how to configure ImageEngine with assigned annotations.

The technical documentation for WordPress ImageEngine Integration can also be referred to for a step-by-step and detailed understanding.

Conclusion

It is easy to get started with ImageEngine. The free-trial feature is an advantage for the businesses to explore the true potential of the content delivery network from ImageEngine that helps the websites to have faster web-loading speed, improved SEO ranking, and better sales conversions. The aim of ImageEngine is to help businesses establish concrete relationships with their target user base.

Next.js 10 Automatic Image Optimization Sets New Standards for Web Performance in 2020

Rajeev Sharma — Thu, 19 Nov 2020 12:45:12 +0000

Vercel has recently announced the latest version of its React-based web framework- Next.js 10. The latest version comes with automatic image optimization as well as user-analytics support to help businesses scale-up their website performance and SEO game.

Automatic Image Optimization

Image optimization is necessary to deliver a first-class experience to the end-users interacting with the website. It serves a plethora of benefits and some of them have been highlighted below:

Improves the loading speed of the pages
Better search ranking of the website pages
Allows better conversions and engagement
Reduces the stress on the server

It’s generally a little complex job for a developer to execute the tasks enabling image-optimization because a lot of factors have to be considered in this process like size, weight, and format. Also, the complicated building tools used for image optimization often do not recognize the user-submitted images that arrive from an external data source. As a result, the possibility of optimizing ‘all of the images’ is reduced down to zero.

However, the automatic image optimization in Next.js 10 can relax the burden from the shoulders of developers, help them to easily achieve seamless image optimization, and make their jobs easier at the end of the day. The latest Next.js 10 version makes it possible to optimize images and serve them in next-generation image formats like WebP, if the browser supports it. This prevents sending large images to the devices having a smaller viewport. Automatic image optimization can also optimize any image source even if the image has been hosted by an external data source. The outcome is an automated image optimization solution, easing the developer’s workload.

Most importantly, Next.js 10 renders the images in such a way so that the core web vitals are not affected and the user-experience is magnified.

The developers can replace the HTML tags with a React-based image component for improving the page responsiveness.

To add the images to the application, the developers can import the ‘next/image’ component as shown below:

The ‘next/image’ component provides the above performance as default. With the help of this component, the images automatically become responsive and are lazy-loaded as well.

You can use various properties available to the ‘next/image’ component like ‘src’, ‘width’, ‘height’, etc., but apart from that, you can also custom configure the image optimization for fulfilling more advanced use cases with the help of ‘next.config.js’. If no configuration has been provided, then the default configuration shall be used which looks like this:

So, if a particular property has been missed from the above configuration like ‘imagesizes’, then such property shall pick the default from the above. What this means is that a developer will only have to configure those properties that they want to change.

Next Level User Analytics in Next.js 10

To upgrade the performance and speed of a website, it’s important to have access to reliable analytics. Analytics examines how users are interacting with the website and this data helps to hunt down the areas that need improvement for enhanced web performance and user experience.

Also, when it comes to user analytics, then every website should set goals for improving the core web vitals metrics because it can help in not only improved user-experience and speed but better search ranking as well. The core web vitals have three metrics that provide real-world and actionable insights:

LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)

Data analysis is important only if it is based on real-world insights like core web vitals. If it is not, then the data won’t be of much use in the decision-making process. In Next.js 10, generating real-world analytics reports is an easy job. The custom app component can be created and ‘reportWebVitals’ function can be defined for measuring core web vital metrics and even custom metrics.

The ‘reportWebVitals’ function can be defined as follows:

It should also be noted that the user analytics feature of Next.js 10 allows continuous measurement of data instead of a one-time measurement so that the marketers can have access to the updated insights. Not just this, but the user analytics from Next.js 10 records the data measurement from the actual devices that are being used by the website visitors instead of relying upon the development device.

Next.js 10 offers next-level user analytics to help developers:

Focus on the entire picture
Gain a deep understanding of the target audience base
Assess how a website performs for the target users

How can ImageEngine act as a Catalyst for Further Advancement in Next.js 10?

There is no doubt that the built-in characteristics of Next.js 10 bring a lot to the table but some smart solutions like Client Hints can further enhance the framework for better utilization. For this purpose, ImageEngine has been helping brands with robust implementation of Client Hints not only for Next.js 10, but many other technologies with the sole objective of scaling up the much-needed web performance. So, what are Client Hints, and why do businesses need it? Client Hints are a group of opt-in HTTP request headers that can provide valuable insights into the aspects like- the capabilities of users’ devices and the network through which such users are connected. This insight is valuable because knowing about the “capabilities of users’ devices” and “how stable their network connectivity is” can help in changing the way content is delivered so that a more inclusive user-experience ecosystem can be developed.

Client Hints are not the only catalyst that ImageEngine has to offer to your business. image CDNs like ImageEngine are also put in use by the creative minds as it helps to reduce the payload and transmit the correct image for every viewport while delivering the images to a network in next-generation image formats like WebP and even AVIF. These features will not only help one out with better web performance but with other benefits as well like improved ranking on search engines, better conversions, better credibility, improved reach, etc. A company’s optimum digital growth and cost-effective scalability is the ultimate objective of ImageEngine.

Improve Core Web Vitals with ImageEngine

Rajeev Sharma — Wed, 04 Nov 2020 10:02:13 +0000

The core web vitals from Google is the new ranking signal in the town expected to arrive with full force in 2021. It will join the ‘page experience signal’ to promote the websites for developing better user experience characteristics like mobile-friendliness, loading speed, etc.

But before taking a deep dive into the core web vitals, it is important to have a quick understanding of the page experience signals first to develop a better picture of the core topic. “The role of page experience signals is to evaluate and measure the experience of users while interacting with a website page.”

The data collected through page experience signals can be analyzed and put into action to optimize the site for improved performance so that the users can have a seamless experience while browsing around the website. It is a great way for a business to strengthen its bond with the target audience and build long-lasting and trustworthy relationships. Although these signals are not just limited to assist businesses in building concrete relationships. Websites that will take effective actions from page experience signal metrics shall have a better chance to shine in the search results because Google intends to create an improved web experience environment for the users.

The page experience signal metrics are taken into account when it comes to ranking a website on Google search engine result pages. As of now, the “page experience signal” includes the following metrics-

Mobile-friendliness
Secure browsing
HTTPS-security
Intrusive interstitial

If necessary implementations are observed to improve the position of these aforesaid metrics for a website, then it will help to push the URL to a more competitive spot on the search engine result pages.

However, these metrics are not detailed or comprehensive which sometimes do not provide a clear direction to the website owners. Core web vitals somewhere fill this gap as they are more detailed and provide actionable insight. So, how do core web vitals work and how can they help the websites?

Let’s find it out.

Understanding All 3 Core Web Vitals

As already discussed before, the core web vitals is not a new category of ranking signal, but an addition to Google’s existing ranking factor- “page experience signal”. The core web vitals will stage the page experience signal to the next level with its informative metrics and help the owners, developers, or marketers to navigate the opportunities for the improvement of website experience.

So, the three core web vitals are as follows:

LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)

LCP (Largest Contentful Paint)

The usual speed measurement metrics like- Time to first byte (TTFB) or First Contextual Paint (FCP) are not the most effective ways for highlighting the web pages’ speed because they don’t correspond to what a user sees on the screen while interacting with the page. When it comes to website speed, then what matters the most is- how much time it is taking for a user to interact with the largest contents of the page. This is where LCP comes to the rescue.

LCP measures the time a web page takes to load from the users’ perspective. To put it in other words, it determines the time consumed for loading the largest content (text, image, or video block) on the screen right after the user has requested the URL.

So, how to know if the LCP score of the website is good, average, or bad? According to the specific LCP guidelines of Google, the LCP speed of the website can be categorized into any of the following three-

Good (if the largest content on the page loads within 2.5 seconds)

Needs Improvement (if the largest content on the page takes more than 2.5 seconds but less than 4 seconds to load)

Poor (if the largest content on the page takes more than 4 seconds to load)

Hence, a website’s goal should be to hit the LCP within 2.5 seconds for every page that it has.

FID (First Input Delay)

First Input Delay is another core web vital that calculates the time taken by the website to respond to the interaction request of the user. These interactions with a website can be anything like- selecting an option from the menu, putting the email address into a field, choosing the newsletter subscription offer, etc.

So, how to know if the FID score of the website is good or not? According to the specific FID guidelines of Google, the FID speed of the website can be categorized into any of the following three-

Good (If the site response time is less than 100 milliseconds)

Needs Improvement (If the site response time is more than 100 milliseconds but less than 300 milliseconds)

Poor (If the site response time is more than 300 milliseconds)

FID measures the time it takes to do something on a web page, hence, it is also a speed score. Although it goes one step ahead as it evaluates the time consumed for the users to execute something on the website.

CLS (Cumulative Layout Shift)

An unexpected change in the web page layout leads to a very bad user experience. For example, if a user is reading a blog on a website but the text shifts to another place without any warning, then it will create an annoying experience for the users. Also, the unexpected movement can happen for not only text but for other elements on the page also such as links, images, fields, or call-to-action buttons. It is not at all good for the reputation of the website. Hence, it is important that such issues related to the unexpected movement of content are resolved.

For this purpose, the third core web vital of Google- CLS is here to guide because it evaluates how often such unexpected movements are being faced by the users. CLS calculates the stability of a web page layout.

So, how to know if the CLS score of the website is good or not? According to the specific CLS guidelines of Google, the CLS score of the website can be categorized into any of the following three-

Good (If the CLS score is less than 0.1)

Needs Improvement (if the CLS score is more than 0.1 but less than 0.25)

Poor (if the CLS score is more than 0.25)

Tools for measuring Core Web Vitals

There are six tools from Google as of now that can help in measuring core web vitals. These tools are easy to use and allow quick evaluation of the LCP, FID, and CLS position of the website. Check them out below-

PageSpeed Insights

Chrome UX Report

Search Console

Chrome DevTools

Lighthouse

Web Vitals Extension

PageSpeed Insights: Anybody can visit the PageSpeed Insights tool, insert the web page URL, and click on the “analyze” button. That’s it. In just three easy steps, the core web vitals data will be generated for both web and mobile interface along with the suggestions that can help to improve the page experience.

Lighthouse: The lighthouse extension for Google Chrome can be downloaded to generate the core web vitals information. It was recently updated to version 6.0 that has introduced additional audits and new metrics like TBT for a detailed diagnosis of web page performance. It also helps in providing opportunities to reform the UX of the website.

Chrome UX Report: Chrome UX report, also known as CrUX is a public dataset that has been made from various samples collected from chrome users’ browsing experience on the web. This report measures all three core web vitals and reports the real-world information instead of the lab data which is very useful.

Chrome DevTools: Chrome DevTools is great for website owners to find and restore visual instability or unexpected layout shifts issues present on the web page. The investigation for such issues on the pages can be done from the new experience section in the performance panel of the tool. It also calculates TBT- Total Blocking Time which can assist in improving FID.

Web Vitals Extension: Web Vitals Extension for Chrome measures all three core web vitals- LCP, FID, and CLS in real-time.

Google Search Console: The tools discussed above lack one thing or another that prevents them to be labeled as a one-stop solution for rectifying all the user-experience related issues, but this is where the Google Search Console joins the game. It has a lot of features that can assist in the foolproof improvement of page experience. The tool analyzes every page of the website and detects the ones that are having problems related to LCP, FID, or CLS metrics. It also lists out the opportunities for improvement to allow website owners and developers to implement necessary solutions.

All three core web vitals can be evaluated in Javascript by using standard web APIs. The web-vitals JavaScript library is the most simple way to calculate each metric of core web vitals.

Measuring each metric with web-vitals JavaScript library is as simple as calling a single function:

import {getCLS, getFID, getLCP} from ‘web-vitals’;

function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use navigator.sendBeacon() if available, falling back to fetch().
(navigator.sendBeacon && navigator.sendBeacon(‘/analytics’, body)) ||
fetch(‘/analytics’, {body, method: ‘POST’, keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

However, it is recommended to go with the six tools and extensions mentioned above so that you don’t have to pull any extra effort in writing codes.

The next important thing to discuss is- how optimized images improve the core web vitals of a website and SEO. Let’s discuss this.

Role of Optimized Images in Core Web Vitals

The most important thing for improving the page experience quality of a website involves- image optimization. The large image placed on the homepage of a website is often the LCP (Largest Contentful Paint) and if it is not optimized, then it will affect the LCP score because of slow loading. It will not serve a good user experience.

In image optimization, the objective should always be to compress it to the right size and right format without affecting the quality of the image. Optimized images not only improves the loading time of a web page but also provides the much-needed SEO advantage. Implementing the next-gen image formats like AVIF and WebP can be observed during image optimization as these formats bring the best quality in low-size. The good news is that the majority of the popular browsers extend support to these modern formats.

All three core web vitals have one single objective- to improve the page experience factor by focusing on the website’s speed and performance and optimized images are the best solution to gain the advantage.

Although, the organizations often fail to find the balance in size and format while optimizing the images. This problem will become a hurdle when the companies will optimize for the core web vitals. For this purpose, the experienced development team at ImageEngine can provide a wide range of robust solutions for optimizing images. The ImageEngine team puts image CDN service into the application that takes care of converting the images to next-gen image formats (having the best quality at low size) like WebP, AVIF, etc. and then serving the same to the popular browsers.

Wrapping it Up: How ImageEngine will Help Boost SEO

ImageEngine optimizes the images to provide companies of all sizes with a competitive SEO advantage. The in-house experts understand how the search engine behaves and interprets the image when ranking the URLs.

Our image CDN service reduces the loading time of the website which initiates a string of events. When the site performance and speed are elevated, then the bounce rates are reduced. It is important to control the bounce rates. According to Google if the loading time is increased from 1 second to 3 seconds, then the bounce rate will shoot up to 32% and if the loading time is increased from 1 second to 6 seconds, then the bounce rate will jump to 106%. This is bad not only for the business but for search engine ranking also. Once the bounce rates are under control, then the website engagement and user experience progress to improve the probability of additional conversions.

The end result is a successful business as well as a better ranking on the search engine. This is what the team at ImageEngine strives to achieve so that your business grows with a perfect blend of technology and experience.