Performance and Image Optimization

SEO is heavily affected by performance. Primary factors affecting performance include page load speeds, image sizes, external libraries, pagination, animations and javascript. One of the best ways to assess site performance is through Google’s built in dev tools, specifically the “lighthouse” section.

Image Optimization

• The best way to prevent long loading times is to ensure that images are compressed and in web-optimized formats like .webp or .avif. For individual images, a site like Squoosh may be used to resize and compress images. While batch processing can be done through Free WebP Converter / Convert any image format online / Bulk downloads. Although these sites are useful for quick conversions, the best practice is to use a local tool like ffmpeg in order to ensure maximum quality and customizability.

• Wordpress also provides a built in functionality that automatically compresses and resizes images into five different sizes. Ensure that in your theme’s code, appropriate sizes are used according to the design. Code Example:

<img src="<?php echo get_the_post_thumbnail_url($doctor_id, 'medium_large'); ?>" alt = "doctor-image">
<!-- OR -->
<?php echo wp_get_attachment_image($grid_image_two, 'medium_large', false, ['class' => 'w-full h-full rounded-2xl object-center object-cover  ']); ?>

Lazy Loading:

Lazy loading is a technique that defers the loading of images until they are actually needed. The default tendency of a site is to load all images at once on load, which is extremely performance intensive and inefficient. Lazy loading prevents this.

A fairly recent update to HTML introduced a native “lazy-load” attribute for <img> tags.

<img loading="lazy" src="image.jpg" alt="..." />

Using this attribute on image tags will mean that the image only loads when the image or div is in the viewport. However, this attribute is not widely supported by external libraries. So for example a carousel library may require manual configuration of lazy loading.