Streaming live at 10am (PST)

What is a good limit to a web page file size including assets?


#1

I have added a number of large images and noticed load time is longer, which makes sense.
What is a good limit to have for a web page file size including assets?

A quick page load is nice, and I also don't want to chew through a users data if they are on mobile.


#2

Under 750ko for an immersive one pager is pretty good. Todays' sites easily go over 5mo.

Then use a special set of images for mobile, size them accordingly and have a special attention for their compression.

Read what we said this morning here http://forum.webflow.com/t/pictures-for-your-website/27616/3


#3

Yes, good idea!
I will put smaller images for smaller devices.

Do you have a recommendation for image widths for the four size (computer, tablet, landscape mobile, and portrait mobile)?

I'm thinking more so about images with a fixed height.

On a computer display if I had an image with a height of 600px, what would the width be?
Would it be 1920px or would it be larger to accommodate for wider screens?

Also there were some nice resources for image editing software and stock icons through the link!
Thanks


#4

Not really but for full bleed images on desktop, 1200 max, 1140 is better, 1080 is even better. It all depends on what the image is and how well is compresses in jpeg. Sometimes you have a splendid 1200 image under 60k because there is not much details and sometimes you struglle to fit a 1080 banner under 150ko. never ever ever put an image that's more than 150 on a site more than once. You should always find a better way.

They're the best for now I believe :slightly_smiling: Crunching images and crunching tools are a hobby for me :smiley:


#5

I'm excited to see how efficient I can get my web pages now :joy:
Currently at 2000kb :scream: .
I think I can get that under 750kb with some cropping and minifying, and less for smaller devices :tada:


#6

2 mo can be ok. it depends on how gorgeous, useful your page is. It depends on how many people are connecting on it, who it does target.

Weight problematics increase when you get a huge traffic, you gotta spare your servers and make savings on the bandwidth. When the audience is small and.. rich, meaning most probably well equiped, you can go more crazy.

It's a good thing to try to get it as small as possible to begin with, and also have friends all over the planet or country, with various connections and hardware, and test it. I couldn't stress this last point enough: You can design good sites, but you'll make great sites only when you perform user testing. Both distant for loadings and in-house, with focus groups, just to see people using your work. It usually make a difference, you got to rework things the right way and you get unbeatable arguments to defend your design choices. No more "I feel" but "I know that...".

Also use analytics to know how fast the site load for your audience. Also use online tools that analyze your site and rate it with many criterias.


#7

To add to this, if you're using Webflow's hosting (content is delivered through Amazon's CDN and Fastly), this is something you don't have to worry very much about. A 5 MB or 10 MB site is absolutely fine. Apple's pages are regularly over 10 MB. Example 1 (13 MB), Example 2 (10 MB), Example 3 (20 MB).

I would also say that creating separate assets for each screen size is crazy for 99% of static sites. The time you spend creating, organizing, and implementing the assets balloons tremendously, and you end up putting a much larger strain on the user by forcing them to download much more content, especially if they're on desktop and they resize through different media queries.


#8

That watch page! I guess this falls into the "know your demographic target" :smiley:


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.