Images not loading properly and slow page load times on my website

[devjoe]

Hello everyone,

I’m experiencing issues on my client website. The images are not loading properly—some of them are cropped, and others only partially load. Additionally, the site’s loading speed is very slow, especially when there are multiple images on a page.  Screenshot of images not properly loading is attached and for further I am attaching the website link to check and help. 
website: https://spiritualgleam.com/

I believe the issue might be related to my image handling in PHP. Here is the PHP code I am currently using to display the images:

<?php
// Function to get and display images from a folder
function displayImages($folderPath) {
    $images = glob($folderPath . "*.{jpg,jpeg,png,gif}", GLOB_BRACE);
    
    foreach($images as $image) {
        // Outputting each image
        echo '<img src="'.$image.'" alt="Image" />';
    }
}
?>


 

I suspect there might be an issue with how the images are being handled or cached. I’ve tried optimizing the image sizes, but the problem persists.

The page load times are also quite high, and I’m unsure whether it’s because of the way the images are being processed or something else. Is there a way I can improve the image loading and the overall performance through PHP? Any suggestions on optimizing the image loading or other aspects that might be causing the slow speed would be appreciated.

Thanks in advance!

 

Edited September 13 by requinix
unlinking the website

[jodunno]

Hi devjoe. I have looked at the source code of a a few pages using the provided link.

troubleshooting revelations
1a. images glob brace includes jpg/jpeg, png and gif
1b. website source code shows .webp

2a. image source displays a single image with only an alt tag
2b. website source code contains a source set, noscript element

3a. you did not mention wordpress in the post.
3b. you did not mention using a wordpress image plugin.

glob to show images in a strictly php coded page is not what i am seeing.

php code, wordpress code, wordpress plugin code and javascript code is alot to consider.
i am not a wordpress user, so i stop at strictly php coded pages.
you should post the entire php source code for a selected page to increase the chances of finding a resolution.
 

code snippet:

<h2 class="elementor-heading-title elementor-size-default">You might also like</h2>

<div class="elementor-element elementor-element-11c4633 elementor-grid-5 elementor-posts--align-center elementor-grid-tablet-5 elementor-grid-mobile-1 elementor-posts--thumbnail-top elementor-widget elementor-widget-posts" data-id="11c4633" data-element_type="widget" data-settings="{&quot;classic_columns&quot;:&quot;5&quot;,&quot;classic_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:40,&quot;sizes&quot;:[]},&quot;classic_columns_tablet&quot;:&quot;5&quot;,&quot;classic_columns_mobile&quot;:&quot;1&quot;,&quot;classic_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;classic_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}" data-widget_type="posts.classic">

<div class="elementor-widget-container"> 
<div class="elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid elementor-has-item-ratio"> 

<article class="elementor-post elementor-grid-item post-3138 post type-post status-publish format-standard has-post-thumbnail hentry category-birds-and-insects"> 
<a class="elementor-post__thumbnail__link" href="https://spiritualgleam.com/spiritual-meaning-of-hearing-birds-chirping-in-the-morning/" tabindex="-1"> 

<div class="elementor-post__thumbnail">
<img width="1024" height="453" alt="Awaken to Spirit Bird Morning Chirps Hidden Meanings" nitro-lazy-src="https://cdn-ilbidpb.nitrocdn.com/WsiTcrzDirPICxMMKBGJctmTwfoVBlEb/assets/images/optimized/spiritualgleam.com/wp-content/uploads/2024/07/Awaken-to-Spirit-Bird-Morning-Chirps-Hidden-Meanings-1024x453.webp" class="attachment-large size-large wp-image-3204 lazyloaded" decoding="async" nitro-lazy-empty="" id="OTc1OjMxMA==-1" src="https://cdn-ilbidpb.nitrocdn.com/WsiTcrzDirPICxMMKBGJctmTwfoVBlEb/assets/images/optimized/spiritualgleam.com/wp-content/uploads/2024/07/Awaken-to-Spirit-Bird-Morning-Chirps-Hidden-Meanings-1024x453.webp">

</div> </a>

 

[requinix]

What page are you talking about? Your PHP code suggests images hosted on the server, but looking around all I see are images hosted on that CDN.