"A problem occurred with this webpage so it was reloaded."

When viewing my website on my mini iPad and my iPad IAir get the message “A problem occurred with this webpage so it was reloaded.” Sometimes the page reloads but more often I’m left with a white screen.
I have a lot of images but I have used image optimiser so all my images are 300kb or less, including the images in the lightbox.
My website works well on an iPhone, but in safari and chrome it is jerky and takes awhile to load.
Does anyone have any ideas on how to get it working better?
My website is http://badams.co.nz/index.html

Your homepage has over 7 MB of images. That’s a huge file size. Your time to first byte is also pretty slow. So I’d guess that it’s a combination of too many images/too larger images combined with slow hosting.

With so much info on the home page, I think it’d be a good idea to break those sections up into different pages and take advantage of your navigation.

Make your images smaller and try exporting your site with the 2.4 beta and enable lazy load. That should help alot

Because you have so many images, you need to set the dimensions of every image so they are no larger than needed. E.g. your Front Room Gallery logo image is 1815px by 1515px yet is being displayed at about 300px wide. currently the image is 429kB, i.e. very big yet if redimensions to 300px wide would likely be about 30kB.

Also you must optimise every image to reduce bulk. Use JPEGmini for JPGs and ImageOptim for PNGs.

Hey thanks for that. I have been using imageOptim to optimise my images. Maybe I have the settings set to low. Should I change the setting from normal to insane? Also the quality was set at 50% should that be 40%?

Thanks for reply. It would be good to know how small you need to make your images and still have them looking good and how to do that for us tech dummies. I used iWeb before blocs and I could just drop my images in and not have worry about that, I do miss that. But do love blocs the way you can structure your website is great.

The thing is, you probably did’nt have mobile devices to consider when you made sites in iWeb. a lot has changed in web design since iWeb.

I think at some point in the future Blocs may optimise images, but it’s still way off.

my rule of thumb is, never have an image over 1mb in your design and use a good mix of jpegs, gifs and pngs.

Don’t go below the default % setting which is somewhere about 80% or 85%. The solution is more than just optimisation. It is also about sizing the image so that it is not larger than needed, e.g. if you want to display a 300px wide image, don’t use an image larger than 300px wide or it will be bigger, i.e. more kB’s than it needs to be. Also make sure your images are 72dpi and no larger.

If you size and optimise and find an image is still large then perhaps it’s time to select a smaller (in kB’s) image or make it smaller by putting an overlay over it which will reduce the size. What’s too big? I try to keep images less than about 450kB and that would be for a killer hero image at 2560px wide.

1 Like