Project page with 200 images crashing

  • Author
    Posts
  • #101568

    dacesimane
    Member

    The URL to check is this http://www.soundofatastylife.com/portfolio/morocco-adventure/, if I would go trough iPhone Chrome I would get a flickering black white screen after 15 seconds and then the browser crashing giving “Aw snap!”. This happened because 1. The total size of the page was 230mb and 2. because it tried to load everything at the same time.

    I managed to increase performance by doing a full lossy compression on most of those images which reduced the page total size down to 50mb, but this still overwhelms mobile browsers and thus renders the text part really slow.

    The problem is that page tries to rapidly load all of the images that the post has, I believe this would be fixed with a simple lazy loading function, but I am not familiar with wordpress infrastructure and I don’t know where the actual img element adding happens on the screen.

    Maybe there is already feature like that?

    The blog I need help with is soundoftastylife.wordpress.com.

    #101665

    dacesimane
    Member

    Update: iOS Safari and iOS Chrome still keep crashing due to 200 http request going out to get images.

    Is there any way I can delay image fetching until the image is actually on screen?

    #101673

    calvinjamescoles
    Theme Author

    Hey!

    Unfortunately WordPress doesn’t have a built in option to paginate or separate images within posts, sorry! I can see that the images are still quite large – You could shrink each image down to 1000px width and that would save some more bandwidth. Not sure that would be small enough for mobile browsing though, the post may in this case need to be broken in to two posts for this to work.

    Regards,

    #101676

    dacesimane
    Member

    Thanks for replying Calvin!

    How are the images currently added to the screen?

    Could I intercept that process and add a lazy loader which would load the image only when it is in users view-port?

    Kind regards

    #101772

    dacesimane
    Member

    Hi Calvin,

    Update: I managed to make the images load gradually when they show up on the screen by chaning up the _buildItem function assign src to “data-lazy-src” which then would be used by lazy-loader plugin, which I had to adjust to set “loaded” class when img finishes loading.

    It would be cool if this could be implemented into a future version of this theme.

    Cheers

    #101773

    calvinjamescoles
    Theme Author

    Ah, Interesting!

    Thanks for sharing, I’ll note that :)

The topic ‘Project page with 200 images crashing’ is closed to new replies.