How do I optimize mobile pages?

Here's something to try:

Navigate to your website in chrome > open up chrome dev tools > click on the Lighthouse tab > then click "generate report" > wait a bit. The results will tell you pretty much everything you need to do to improve your website (Performance, Accessibility, Best Practices, SEO, PWA etc).

I followed this process recently for a product i'm working on ( interactlist.com ) and i'm now hitting an average of 0.8s load times and a score of 99 (so it definitely helped).

All the best

I couldn't open the site here, but basically, use Lighthouse on chrome dev tools, as @CalvinTalbot mentioned.

Reduce your images to the size they will show up on the screen. Use width and height attributes to avoid layout shifting.

Also, lazy load the images below the fold. You can add loading="lazy" to your img tags. There is a helpful article here.

Check if you're using Brotli or Gzip compression for your files. Here is an article about it

Also, you should use a cache service for your static files instead of hitting the server directly. Checkout Cloudflare

The site was not loading here, so I couldn't verify if you're already using these techniques, but they should work for any site.

The first thing I see is your image sizes. Your headshot photo is 3.7mb and that is huge in general, but doubly so to be above the fold on the homepage.

Looking around some more and it seems that most of your images are substantially larger (intrinsically) than the dimensions they're actually used at. Your portfolio pictures are 1440x1080 but only render at 483x368.

I'd reduce image size overall anywhere you can find, but then also run it through something tinypng and they'll compress the image as much as they can without losing quality.

Also, make sure you're lazy loading anything that's below the fold.