Slow scrolling on mobile device

My website: deveckodesigns.com

Just finished making it (mostly) mobile friendly. Problem is the scrolling on my iPhone is super slow. It’s not laggy. It’s actually very smooth scrolling, just moving at a percentage of the speed of my finger. I haven’t changed anything having to do with scrolling in the CSS.

Any insight is appreciated (along with input regarding anything else you might notice. I’m still a newbie developer.)

Thanks!

Hi, Welcome to Sitepoint :slight_smile:

I’m a little confused as you don’t seem to have done anything at all to make the site mobile friendly as there is no viewport meta tag and no responsive design? All mobiles will get is a scaled version of a desktop site.

I didn’t actually see any pages that needed to scroll either but I would guess the lag is coming from the massive images you have embedded into those tables. One of the images I looked at was only about 350x200px but ran in at a massive 800k? That’s more than the total of all resources I would use for a whole page. That image should be about 8k not 800! You have quite a few like that and combined with the fact that they are in a table will make it difficult for small devices to handle. Tables use a second pass algorithm so all images must be loaded before it can be rendered (unless you use the table-layout fixed rule).

Reduce the file size of those images (don’t just shrink big images to a smaller dimensions). Use your paint package and reduce those images to a few k and remove then from the tables and use css only.

After you have done that then look at using the viewport meta tag and media queries to deliver a better experience to mobile devices.

Hope that helps :slight_smile:

I wasn’t aware of the viewpoint meta tag. I was just changing the positioning and size using media queries based on screen-width. That read up you linked is great! Thank you!

And I hadn’t even thought about photo file size. I’ll fix that.

So much to learn still!

Yes, it catches a lot of people out :slight_smile:

Without it the screen width media queries will never get activated properly on mobiles because the width will be fixed at 980px.