I have been building websites for myself and my friends since 2011. Starting with a simple HTML site embedded with CSS files, I found that it was so troublesome to update the content of my website.

Like all newbies who made mistakes, in those days, I didn’t know the concept of programming, database, or CRUD to simplify the process of creating a website.

Unlike the old days, now, it’s very easy to build a website. Content Management Systems (CMS) have developed into tools that can help us build our website rapidly and conveniently.

Now, we have lots of good and affordable web hosting companies too. In the past, the web hosting companies we now are BlueHost, HostGator, and GoDaddy, some people may know HawkHost or 000Webhost.

But with the presence of websites like HostAdvice, Lowendbox, WebHostingTalk, etc., we can compare and discuss which web hosting company is the best to choose.

Without further ado, here is the list of resources you need to create a website.

Resources to Create a Website #1: Domain Name

Without a domain name, your website will be hard to find by other people. Some domain name providers that I recommend are below.

Sav.com

Sav.com has the most affordable price among others. Their .com pricing is $6.95 for the first year, then $8.69 for renewals. It has Cloudflare DNS integration, meaning we can set up our domain name utilizing Cloudflare’s global network.

Dynadot.com

Dynadot pricing for .com domains start from $9.99, and the same price for renewals. I recommend Dynadot since it has cheap pricing, sometimes they run promo campaigns and make it even cheaper.

They also have a domain name marketplace and auction where you can buy and sell registered domain names.

Namesilo.com

Namesilo has been around since 2010, the first year I started my online business selling online downloader services. I recommend them because they have an affordable pricing policy and also ease-to-use site navigations. As of December 2019, they have 3.4 million active domains under their management, that is a huge number of domains making them the top 15 registrars around the globe.

Namecheap.com

Namecheap is the most popular domain registrar in the world. It has various services alongside its domain name registration services such as web hosting, SSL, and premium DNS service.

Resources to Create a Website #2: Web Hosting

We have to buy a web hosting package to host our website. Web hosting is online storage where we store our website files. You can also set up your home PC to host your website, but it requires many configurations.

Some web hosting companies I recommend below are the ones that I’ve personally used in the past. They have low-cost packages with a great support team, suitable for us who wants to start it from small then expand it when our business is getting bigger.

Racknerd

Racknerd voted #1 Top Provider at the Lowendbox community. Their strong promotions throughout 2020 till now placed them as a favorite among users. Their web hosting pricing package is somewhat general, what makes them so special is their fast response support and transparent hardware disclosure.

PS: you can find some hidden gems in Lowendbox posts of Racknerd promotions.

PS #2: Hidonny.com is hosted at Racknerd VPS hosting.

BuyShared

Fransisco, the owner of Buyshared and Buyvm is the 2nd most popular after Racknerd. They have such a cheap price for their shared hosting package. I have been with BuyVM since a few years ago, and I can tell that their service and support are top-notch.

Hostinger

Hostinger, the parent company of 000webhost, Niagahoster, and Weblink offers a 100GB web hosting package for just $6.99 a month. They even have a 4-years package for just $2.99 a month. Hostinger is highly recommended for those who are new to creating websites.

HostArmada

HostArmada the newcomer has overcome the giants in the web hosting industry. Their strategic pricing policy and top-notch support put them the #1 best web hosting company in the “Cheap Web Hosting” category according to HostAdvice.com.

Resources to Create a Website #3: Website Builder

The majority of us come from a Windows-based system, an environment where we can easily add, modify and delete files. Programming is not our natural language, we need a system that can help us build our website without having to code for hours. This is why we need CMSes and Site Builders like the below.

WordPress

Self-hosted WordPress will always be my first choice when building a website. It has a large community, thousands of plugins and themes whether open-source or paid ones.

You can create almost anything using WordPress. From a simple blog, multi-author blog, forums, eCommerce sites, and even a social media platform like Facebook or Twitter. The possibility is endless.

Joomla!

Joomla! is another CMS with a large community. Joomla! has been around I think even before WordPress exists. In the past, Joomla! is just a CMS for blogging and news site, but nowadays you can run forums and various platforms using it.

phpBB

phpBB is open-source forum software that is powerful and highly customizable. The large community enthusiast makes its user able to power up their forum portal. Although some themes on their repository look old, you can always buy paid themes at the Envato Marketplace.

Shopify

For you who want to focus on selling, then Shopify is your best choice. It’s a ready-made eCommerce platform where you can set up an online store and start selling right away. Shopify also offers offline payment collection using Shopify POS along with the hardware to receive payments.

Shopify is a paid service, but for beginners who want to sell their product easily, Shopify will help a lot.

Wix

As an alternative to Shopify, you can use Wix. Wix is a cloud-based website builder that includes web hosting and web design for its users. It also has a business package that adds payment collection functions, like eCommerce sites.

Wix is an all-in-one solution for you who does not want to be bothered with web hosting and web design perks.

Resources to Create a Website #4: Images

We can use these sites to fill our website with beautiful pictures and images. It’s recommended to take your own photos and use them to avoid copyright strikes. However, with a tight budget, these sites will come in handy for us.

Make sure you always read the license of the images you want to use. Finding a free-for-commercial use license is not hard rather than getting DMCA emails for using unauthorized pictures.

Pixabay

Pixabay has 2.5 million royalty-free stock photos available to be downloaded. The Pixabay license allows us to use all images on the site for free, even for commercial use. It’s even unnecessary to link back or give attribution to their site. We can modify the images according to our needs.

Unsplash

Like Pixabay, the Unsplash license is also similar. We can use any images for free, both for commercial or non-commercial usage. We are also free to modify the images according to our needs. Backlink or attribution to their site is highly appreciated.

Pexels

Another free-for commercial use images site. You can use images at Pexels on your website for free. Commercial or non-commercial usages are allowed, the same goes for images modifications.

Iconfinder

If you want to find icons rather than photos, Iconfinder is the best place to go. Hosting over 6.3 million icons, Iconfinder is one of the largest free and premium vector icons and illustrations site.

Envato Elements

Can’t find what is best for your project? Try Envato Elements. For $16.5 per month, you can download any stuff from the site for any projects you have. They have photos, graphics, icons, video footage, and even WordPress plugins, and themes.

Resources to Create a Website #5: Image Editors

Not satisfied enough with images from stock-photo sites? Or maybe you want to add a watermark to your images? You can edit them using free tools such as below. Image editors are also important resources to create a website.

Images downloaded from the internet are also very big in size. So make sure we always compress or resize them before uploading them to our website.

Pixlr

Pixlr is a cloud-based photo editor. You can design and create anything from professionally create templates. Youtube banners, Instagram stories, and presentations are some image formats you can have.

Fotor

Fotor is also a cloud-based photo editor. You can resize, crop, and even remove the background of your images. Its basic package is enough for you who just want to do a little editing of your images. You can always upgrade to their $8.99 package a month.

iLoveImg

iLoveimg is my favorite one. It’s simple, easy to use and the features they have is just what we need as a webmaster. Their interface are so clear right from the front page.

Canva

Everybody loves Canva. Canva is also a cloud-based image editor. With Canva, you can create your images using their templates, or edit your existing images.

Gimp

Gimp is an offline tool for editing pictures. It’s something like the open-source version of Adobe Photoshop. It’s available for Linux and Windows users.

Resources to Create a Website #6: Paid Services

When you are stuck and can not get the function or design of your website, you can hire someone from the below sites to help you with your project. The cost varies among workers, but sometimes you can get great workers with a low-cost budget.

Upwork

Upwork is the best place to find a freelancer. Their bidding system ensures a client gets the best freelancer available for the job. It’s a competitive marketplace for freelancers, and there’s a good chance you get a skillful freelancer at an affordable price.

Fiverr

Freelancer

PeopleperHour

Alright, those are the list of resources to create a website I can think of at the moment. If you have something to put on the list, let me know. I will surely update this post whenever I find good stuff on the internet.

Let’s say you have another fancy element below the critical area that requires jQuery. When we can actually defer it until we need it to show up, we have to load so many assets because your main slider, which is placed on the critical area, also depends on jQuery.

What is the Performance Benefit from Using Flickity Slider as an Image Gallery Slider?

1. Reduce total blocking time.
   By using flickity, we can defer javascript files which are needed later.
2. Lazy load images.
   If you have like 10 images in your slider, you can tell the browser to show only the first one and load the other when user slide it. This way, we can save resource and reduce the blocking time caused by loading images.
3. Improve time to interactive.
   By loading the flickity javascript files for your slider separately without waiting the whole javascript files on the page, the slider will be more responsive to human interaction. The image slider will be ready to be used even before the whole page finished loading. It’s good for user experience.

Steps to Replace WooCommerce Default Image Galler to Flickity Image Slider.

In the first step, we have to remove the WooCommerce default image gallery using this snippet:

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); //Remove Single Product Image'

Now, in the second step, we create a function to remove the featured image displayed by GeneratePress. You can check the theme documentation or maybe contact the theme developer if you are using other themes.

add_action( 'wp', 'generate_remove_single_featured_image' );
function generate_remove_single_featured_image()
{
    if ( is_product() ) :
        remove_action('generate_before_content','generate_featured_page_header_inside_single', 10);
    endif;
}

In the third step, we enqueue the javascript and CSS files. I downloaded flickity.js and flickity.css and upload them to a subfolder in my WordPress subdirectory.

add_action( 'wp_enqueue_scripts', 'diko_enqueue_scripts' );
function diko_enqueue_scripts() : void {
    // Enqueue my styles.
    wp_enqueue_style( 'flickity-style', 'https://tweaked.gp.indowebstudio.com/diko/fl.css' );
     
    // Enqueue my scripts.
    wp_enqueue_script( 'flickity-script', 'https://tweaked.gp.indowebstudio.com/diko/fl.js', array(), null, true );
}

After that, the fourth step will be creating the structure for our flickity based slider.

function flickity_structure(){
	global $product;
	$attachment_ids = $product->get_gallery_attachment_ids();
	$featured_image = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'medium',"", array( "class" => "skip-lazy attachment-medium size-medium","loading" => "") );
	$featured_image_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium',"", array( "class" => "skip-lazy attachment-medium size-medium", "loading" => "") );	
	echo '<div class="slider-container">';
	echo '<div class="main-carousel" style="width:100%">';
	echo '<div class="carousel-cell">' . $featured_image . '</div>';
	foreach( $attachment_ids as $attachment_id ){
  		//Get URL of Gallery Images - default wordpress image sizes
		echo '<div class="carousel-cell">' . str_replace('src', 'data-flickity-lazyload-src', wp_get_attachment_image($attachment_id, 'medium')) . '</div>';
	}
echo '</div>';	
echo '<div class="carousel-nav">';
echo '<div class="carousel-cell" style="width:22%; display:inline-block"><img class="" src="' . $featured_image_thumb[0] . '" /></div>';	
foreach( $attachment_ids as $attachment_id ){
  //Get URL of Gallery Images - default wordpress image sizes
	echo '<div class="carousel-cell" style="width:22%; display:inline-block"><img class="" src="' . wp_get_attachment_image_src( $attachment_id, 'medium' )[0] . '" /></div>';
}
echo '</div>';
echo '</div>';
}

The structure has been built, now it’s the time to call it. We hook it into the place where we remove the WooCommerce default image gallery.

add_action('woocommerce_before_single_product_summary','flickity_structure',25);

The next step will be to give our slider an inlined CSS style. We put it inlined because the flickity slider is positioned in the critical, above the fold area. Anything placed in the “above the fold area”, should have its CSS style inlined, period.

add_action('wp_head','flickity_inline_css',11);
function flickity_inline_css(){
	?>
<style data-noptimize="1">
.main-carousel{
    white-space:nowrap;
    position:relative;
    overflow:hidden;
	height:calc(100vw - 60px);
	margin-bottom:30px;
}
.main-carousel .carousel-cell {
    display:inline-block;
    width:100%;
    vertical-align:top;
}
.main-carousel .carousel-cell img{
    width:100%;
    object-fit: contain;
    height:calc(100vw - 60px);
}	
	
	@media (min-width:469px){
		.main-carousel{
			height:300px;
		}
		.main-carousel .carousel-cell img{
    		height:300px;
		}		
	}
	@media (min-width:769px){
		.slider-container{
			width:48%;
			float:left;	
			position:relative;
		}
	}
.carousel-nav{
    height:75px;
}
.carousel-nav .carousel-cell{
	height:75px;
}

.carousel-nav .carousel-cell img{
    height:75px;
    width:100%;
    object-fit:contain;
    object-position:center center;
}	
</style>
	<?php
}

The last step will be to initiate the slider using javascript which we put at the bottom of the page.

//Initiate Flickity JS on footer
add_action('wp_footer','flickity_inline_js',20000);
function flickity_inline_js(){
	?>
<script data-noptimize="1">
	var elem = document.querySelector('.main-carousel');
	var flkty = new Flickity( elem, {
  		// options
  		cellAlign: 'center',
  		contain: true,
		lazyLoad: true,
		adaptiveHeight: true,
		pageDots: false,
		prevNextButtons: false,
	});
	var elem_nav = document.querySelector('.carousel-nav');
	var flkty_nav = new Flickity( elem_nav, {
  		// options
  		cellAlign: 'center',
  		contain: true,
		lazyLoad: false,
		pageDots: false,
		asNavFor: '.main-carousel',
		prevNextButtons: false,
	});	
</script>
	<?php
}

Any time any day, you can check it using the page speed insights tool, it passes all the Core Web Vital metrics and always score above 95. You can also check it using this link https://pagespeed.web.dev/report?url=https%3A%2F%2Ftweaked.gp.indowebstudio.com%2Fproduct%2Fillum-eos-saepe-et-at-dignissimos%2F

That’s it for today, if you have any questions, feel free to use the Disqus comment form below. This post is an alternative way to improve page speed performance on the WooCommerce product page. Previously, I had made a tutorial, a simpler one by just adding a height to the gallery, you can read it at this link How to Fix CLS Issue on WooCommerce Product Page.

Let’s know a bit about CLS first.

Cumulative Layout Shift, abbreviated CLS, is one of the most essential Core Web Vitals metrics to measure visual stability. If the critical area on a web page is not properly styled, visitors will get unexpected layout changes which sometimes lead to frustration and eventually leave your website.

Check this video below. Watch it from 00:11 until 00:15; the product title position moves from the middle of the screen to the bottom of the image gallery. This is called layout shift. If many elements are moving like this, their accumulated shifting time is called Cumulative Layout Shift.

Alright, that’s what happens on the dummy site, which is built using GeneratePress and WooCommerce. Below, you can find the score on mobile view and its Core Web Vitals metrics value.

Scroll down a little more to the bottom, and we’ll see the element that contributes the most to the layout shift.

That’s right, the content below the image gallery is the element that shifts position a lot while the page is loading.

How to Fix CLS Issue : Modify Image Gallery Height

Now we understand that the image gallery is the problem, so we need to replace it with another image gallery or slider or carousel script, you name it. I had made another dummy site located at https://tweaked.gp.indowebstudio.com, and I used flickity slider to build the image gallery on that site.

However, in this post, I will share something simple to fix that CLS issue. Just use a fixed height styling for the image gallery, that’s all. But it would be best if you also placed a good strategy on formatting your image’s dimension. Make sure it fits the image gallery container so it doesn’t look shrunk or stretched.

Below is the CSS code that will fix the cls issue on the WooCommerce page. Just add it to the header of the page using your favorite tool. Make sure that you put it inline on the page, not inside any file like style.css.

	.woocommerce-product-gallery__image{
		height:300px !important;
	}
	.woocommerce div.product div.images a img	{
		height:300px !important;
		object-fit:contain;
		object-position:center center;
	}

Or, if you prefer to get your hand a little dirty, you can use this PHP snippet.

add_action('wp_head','diko_gallery_fixed_height');
function diko_gallery_fixed_height(){
	if(is_product()){
	?>
<style>
	.woocommerce-product-gallery__image{
		height:300px !important;
	}
	.woocommerce div.product div.images a img	{
		height:300px !important;
		object-fit:contain;
		object-position:center center;
	}
</style>
	<?php
	}
}

Looks way much better, right?

That’s it, a simple way how to fix the CLS issue on WooCommerce Product Page with an image gallery. I believe this hack can be implemented to any theme using the default image gallery from WooCommerce.

Below the image is the metric from WooCommerce Product Page, which image gallery has been replaced by the Flickity slider.

Shall you have anything to ask? Feel free to share your opinion using the Disqus comment form below? Next, I’m going to uncover how I rebuild the image gallery into a flickity image carousel.

Cheers!

I think this is really interesting. So, I decided that I would be doing stuff like this more often in the future.

I’m using their free version theme with some adjustments on the header to make them look identical.

For this purpose, I created two identical websites. Each of them is installed with the respective theme and the same plugins. Both are hosted on the same server, a small dedicated slice from BuyVM, and use DNS service from Cloudflare with the same server setup.

GeneratePress vs Astra Theme Website Setup

Tested Website URL	GeneratePress	Astra
Web Server	Nginx	Nginx
PHP Version	PHP 7.4	PHP 7.4
DNS Server	Cloudflare	Cloudflare
Caching Method	W3TC Enhanced Disk	W3TC Enhanced Disk
Image Lazy Load	W3TC Lazy Load	W3TC Lazy Load
Plugins
FakerPress	✔️	✔️
W3Total Cache	✔️	✔️
WebP Express	✔️	✔️
WooCommerce	✔️	✔️

Okay, as you can see above, we need several plugins to help us achieve the goals. Those plugins are essential. No matter what kind of website you have, you will always need a page caching method, a webp images tool, and an image lazy load technique.

Both websites have identical headers on mobile and desktop views. I also put an image logo at the header along with their standard hamburger menu.

Both sites are tested using the PageSpeed Insights tool 3 times. Why? Because the first one will probably hit un-cached version of the page. The second one, sometimes glitched and still hit the un-cached version. While the last one most of time will hit the cached version of the page.

GeneratePress vs Astra WooCommerce Shop Page

The first one to test is the catalog or shop page created automatically every time we install WooCommerce on our WordPress site.

URL to Test	URL to Test
Screenshot	Screenshot
Mobile View Score	Mobile View Score
Desktop View Score	Desktop View Score

You can see the test results above; Astra and GeneratePress theme both are tied on mobile and desktop view scores.

GeneratePress vs Astra WooCommerce Product Page with Single Product Image

For the second test, we will see how well they perform on the single product page with only one product image.

URL to Test	URL to Test
Screenshot	Screenshot
Mobile View Score	Mobile View Score
Desktop View Score	Desktop View Score

On mobile view score, GeneratePress scores 3 points better. I think it happens because Astra has more render-blocking CSS files (4) compared to GeneratePress (3). So the browser needs a longer time to paint the initial element of the page.

GeneratePress vs. Astra WooCommerce Product Page with Gallery Product Image

The last one will be a test on the product page, but both have image galleries on the above the fold area.

URL to Test	URL to Test
Screenshot	Screenshot
Mobile View Score	Mobile View Score
Desktop View Score	Desktop View Score
Mobile View Metrics	Mobile View Metrics

Testing the product page with image galleries resulting both themes can’t even reach 90. The real problem here is the Cumulative Layout Shift (CLS) score that badly hurt Astra with a 0.668s delay, while GeneratePress gets half of it.

If we analyze it further, the layout shift on both themes is caused by the image gallery initially loaded by WooCommerce. So the solution is to modify it or completely replace it with a better non-library-dependent image gallery. Anyway, if you want to hack WooCommerce to fulfill your needs, I created a post of my WooCommerce snippets collection.

In the next post, I will show you how to optimize the GeneratePress theme and solve that CLS problem.

Feel free to open a discussion below. Are you the WPAstra team or the GeneratePress team?

if ( ! function_exists( 'display_product_additional_information' ) ) {

    function display_product_additional_information($atts) {

        // Shortcode attribute (or argument)
        $atts = shortcode_atts( array(
            'id'    => ''
        ), $atts, 'product_additional_information' );

        // If the "id" argument is not defined, we try to get the post Id
        if ( ! ( ! empty($atts['id']) && $atts['id'] > 0 ) ) {
           $atts['id'] = get_the_id();
        }

        // We check that the "id" argument is a product id
        if ( get_post_type($atts['id']) === 'product' ) {
            $product = wc_get_product($atts['id']);
        }
        // If not we exit
        else {
            return;
        }

        ob_start(); // Start buffering

        do_action( 'woocommerce_product_additional_information', $product );

        return ob_get_clean(); // Return the buffered outpout
    }

    add_shortcode('product_additional_information', 'display_product_additional_information');

}

Usages:

1. with a defined product id: [product_additional_information id=’37’] or in php: echo do_shortcode("[product_additional_information id='37']");
2. In an existing product page (when “additional information” product tab is removed for example): [product_additional_information] or in php: echo do_shortcode("[product_additional_information]");

Remove WooCommerce Breadcrumbs

I’m gonna use a more SEO friendly breadcrumb that uses Schema markup, so the default WooCommerce breadcrumb located on the product page needs to be removed.

/**
 * Remove the breadcrumbs 
 */
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Remove Category (Product Meta) on WooCommerce Product Page

add_action( 'after_setup_theme', function() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
} );

Remove Short Description on WooCommerce Product Page

add_action( 'after_setup_theme', function() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
} );

Remove Product Price on WooCommerce Product Page

add_action( 'after_setup_theme', function() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
} );

Disable Shopping Functions / Remove Add to Cart Button

This filter below works for simple product. I’ve tried to use it on external/affiliate product, but the Buy Button is still there. So the best practice is to use simple product in your product type.

add_filter( 'woocommerce_is_purchasable', '__return_false');

Or use this one if you want to remove Add to Cart/Read More button on product archive page

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); //Remove Add to Cart/Read More Button on Product Archive Page

Remove Single Page Product Gallery Images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); //Remove Single Product Image

Remove Single Page Product Tabs: Description, Additional Information, Reviews

add_filter( 'woocommerce_product_tabs', 'diko_remove_product_tabs', 81 );
function diko_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );
	unset( $tabs['additional_information']);
	unset( $tabs['reviews']);
    return $tabs;
}

Remove Related Products Output from Product Page

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Remove WooCommerce Title

add_filter( 'woocommerce_show_page_title', 'diko_remove_woo_title');
function diko_remove_woo_title(){
    if(is_shop()){
        return false;
    }
}

Sources

1. https://woocommerce.com/document/customise-the-woocommerce-breadcrumb/
2. https://wpbeaches.com/removing-the-product-meta-categories-in-a-product-page-woocommerce/
3. https://rudrastyh.com/woocommerce/make-products-non-purchasable.html

Remove Archive Title

When you think you need to remove page heading (h1) on the archive page, like category or tag page, use this one.

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_archive_title', 'generate_archive_title' );
} );

Let’s say you are using elementor and wanting to show a fontawesome icon on the page. Instead of downloading the font when the browser finds the css rule of font-family while rendering, we can tell the browser to download the font before the page starts to load. Thus, when the browser finds the css rule, the icon will show up instantly.

Okay, here you go. I’m using Code Snippets plugin to install the php function. I’ve explained it on my previous post, check it out on this link.

1. Go to Code Snippets -> Add New

2. Give your snippet a name, “Preload Key Requests”
3. Add below function to the content area, don’t forget to change the website name.

function dikopreload(){
	?>
<link rel="preload" href="https://neve.pagespeedboss.com/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff" as="font" type="font/woff" crossorigin />
<?php
}
add_action('wp_head','dikopreload',-69420);

That’s it! So easy right?

You can preload other things beside fonts. Currently it supports font, images, javascripts, css files, audio, video, more of it can be read at here.

At first I were having a problem with inconsistent Largest Contentful Paint (LCP) metric. I found out that the LCP area is changing along with the browser loading time. It was finally fixed by adding height value to elements on the above the fold area.

At the time of fixing it, I found an image considered as an element contributing to the LCP metric. No problem, I can add height and width to its css style, inline.

However, it still complained that LCP metric is too high. I tried everything, until I realized, the image is being lazy-loaded. Okay, let’s fix it, exclude the image from being lazy-loaded.

I’m using A3 Lazy Load plugin by a3rev.

A3 Lazy Load is a great plugin, it can work alongside autoptimize, it can lazy load iframes too. However, it can exclude images from being lazy-loaded by its class only, unlike autoptimize which can exclude by filename.

As Attila said in his post, images attached on a post that is created programmatically (means built by a page builder such as elementor, beaver, etc.) will not include its attachment ID as its class. This is quite problematic when using a3 Lazy Load. Like I said, it can only exclude by its class.

To resolve the issue above, add this to your theme’s functions.php or create one snippet on Code Snippets :

/**
 Add attachment ID class to images
 *
 @param array $attr Array of attributes.
 @param object $attachment Attachment Post object, instance of WP_Post class.
 @return array Image attributes array.
 */
 function lwp_attachment_id_class( $attr, $attachment ) {
 $class_attr = isset( $attr['class'] ) ? $attr['class'] : '';
 $has_class = preg_match(
     '/wp-image-[0-9]+/',
     $class_attr,
     $matches
 );
 // Check if the image is missing the class
 if ( !$has_class ) {
     $class_attr .= sprintf( ' wp-image-%d', $attachment->ID );
     // Use ltrim to to remove leading space if necessary
     $attr['class'] = ltrim( $class_attr );
 }
 return $attr;
 } 
 add_filter(
     'wp_get_attachment_image_attributes', 'lwp_attachment_id_class', 10, 2
 );