How to get correct pages to load faster

First timer here - looking for insight in optimizing for loading speed. I know there are settings for page loading and I believe mine are all over the place. Help?

Here is my site Read-Only: https://preview.webflow.com/preview/cosmicpictures?utm_medium=preview_link&utm_source=designer&utm_content=cosmicpictures&preview=7b2e4f9b1754fe81307ffd38ec236012&mode=preview

Live site: https://www.cosmicpictures.com

Hi Dania!

Welcome to the community! :slight_smile:

I took a quick look at the backend of your site and the Asset manager. The vast majority of your images appear to be well over 1MB, most over 2MB. I would strongly recommend that you resize your images and compress them prior to uploading to your site. Webflow automatically puts a warning for images (“:warning: Very Large”)—hover over an image and click the gear in the Asset manager to see.

As an example, when I’m choosing a background image, I’ll take a full-resolution image, resize it to be 1500-2000px wide, then compress it. I use imagecompressor.com and usually its default settings are great. If I really want to boost load time (say, for thumbnail images), I’ll manually pull each compression rate down to 60-75%.

For large, complex images, I use JPGs (JPEG), as they tend to compress better. If an image has graphics, I use PNGs, as it supports transparency and better maintains edges. For logos and navigational elements (arrows, etc.) I use SVGs, which are true vectors and also very small file sizes.

The other area you may want to check is typefaces: only load the fonts (and weights, and styles) you use! If you’re using Google Fonts, consider if it’s worth uploading the fonts yourself; the built-in Webflow option loads the entire font family. If you’re using Adobe Typekit, be sure you’ve selected only the weights/styles you use, too.

I hope this helps!
Colin