Slow loading times for Foundation projects?

Hi. Although I have a new Macbook Pro and fast internet, I find some Foundation projects take a long time to load (i.e. several seconds). I don’t understand why since these are made by professional developers and Foundation, which reportedly is very fast loading.

Since the advent of high speed internet, better browsers, better design, and software, I’m not used to waiting, and watching the page animations load for so long makes me crazy. I don’t want my visitors to have to do the same.

What is an acceptable time to wait for pages to load? With a fast computer and fast internet connection, don’t most sites load almost immediately these days?

Do you have links to these sites so others can test out your claims?

@zeebe: there are a few slow ones. I’ve really noticed it on some of the new “templates” that a few folks have created.

@lynnnight: I have noticed the same, with the key difference that have moderate speed internet. I.e. a speed closer to what most folks have in the U.S. So in my case some sites seem super slow: i.e. I have to wait 4 to 10 seconds. More than 10 seconds and I’m gone. Actually I’m usually gone if it’s longer than 5 seconds to load.

However, I don’t think the slowness in some sites is due to Foundation. I think there’s this Buddha dude who said something akin to “all things in moderation.”

… in the pursuit of slickness and coolness some people choose to put a lot of “stuff” on their sites that slow it down. Lots of images, lots of effects, lots of big images, background videos, and so on. I don’t think it matters what framework you are using (within reason): both Bootstrap and Foundation themselves are very fast. But if you load down a Ferrari with tons of “stuff” then it will also magically start going slower!

Thanks @Mathew. Glad to know I’m not the only one who has noticed this. And also glad to know it has nothing to do with Foundation. There’s some very cool templates being created overall but I guess one has to sacrifice speed for cool stuff. I think I’ll stick to more simple but pleasing designs. Many thanks for the information.

Hello
I have some sort of same problem, but in RW7 . When clicking from “edit” to “preview” it takes a looooong time for the site to appear. EG I downloaded BWD demo projects. Wouaw, min 10 sec to appear. I have a recent MacbookPro Retina.
Any idea?

Hi, I am in a unique position to answer this question with facts. I assume you are talking about the time taken for a page to “appear” on your fast internet connected new MacBook.

My RapidTemplates run on both the Foundation blank theme and also S4S’s ThemeFlood Bootstrap based Blank Theme. Therefore, by just selecting the theme Foundation or Blank Theme I can compare both back to back. In the tests that I and customers have done, there is no detectable difference in page loading using the same project file. That is a fact based on real world observations. They are both excellent, fast, well supported, continually developed and mature. Also, as I am completely impartial and have no commercial relationship with framework builders, stack vendors or “other”, so I will just report it just how it is with no smoke and mirrors. Now, we can spend hours debating which is better, more shiny and smells better but there is no detectable difference in performance. A growing trend on this forum has been for members to promote one and bash the other.

If you are talking about sites using Joe workman Foundation stacks suite (of which I have a great deal of experience), then I don’t think you will find a faster performing, mature, well documented, continually developed, dedicated multi-forum supported, dedicated 3rd party Plus support and optimised complete suite of stacks.

If you are talking about my Projects and Templates then some are loaded up to “infinity and beyond” with animations and effects to show many of the amazing things possible. This obviously slows things down but certainly not to an unacceptable level. These are not designed to be used in a real world site with all animations and effects working together as that would be silly. My Template 3 “The Grid” for example has Ken burns slow zoom and pan, with additional CSS blur, brightness as well as scaling web fonts with animated path transitions in a multi grid responsive layout. Yet the whole grid will scale elegantly before your eyes and if you had a cent for every calculation going on in the background, you could run with Donald Trump.

All web animations need to be treated with careful choice in a final design but in a demonstration more animations than is optimal may be used just to illustrate what is possible.

3 Likes

Thanks for the information @webdeer. It makes sense you’d want to show everything your templates can do, and loaded up like that, they may appear slower than they would in a real world application. I have read good things about both the Foundation framework theme and ThemeFlood’s bootstrap framework Blank theme in terms of functionality and performance. Thank you for providing that explanation. I will be more educated when demo’ing templates in the future.

My site WengerDesigns.com is based on RW 8 Stacks and Foundation. I have tested it using

https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/speed/pagespeed/insights/?mc_cid=559d190a92&mc_eid=fb8f81ecc0

and find it to be rated sort of average (score of 71).

I also got a report

That shows my site to be SLOW.

Trying now to learn how to speed it up.

I have made images small, about 150-200K

I am in the process of warehounsing images that are repeated in the site.

The other suggestions are a mystery to me at this point.

I would suggest first off You might get a little better response if you started a new post as this is a three-year-old post and probably a lot of folks might skip it.

As for the “pagespeed” results, most are pretty generic “guidelines.” I’ve seen googles pagespeed insight give a high score to very slow sites and give a low score to fast sites. The recommendations are things that might speed up the loading, so it’s good to try to implement them if you can.
A lot of what is being reported on your site is probably out of your control. Things like:

  • Eliminate render-blocking resources
  • Reduce JavaScript execution time
  • Defer unused CSS
  • etc.

These are things that you can’t control, there more up to the theme or stack developers, and they don’t affect real load time much.

What you can do is look at the content you have on the site. I took a very quick look and noticed right of the bat images that are larger than the area that they can display.

Here is an example on this page: https://wengerdesigns.com/CurrentDesigns/
The image has a caption Lotus Profile. I thing the larges area it can be displayed in is about 323px by 461px. Now I haven’t checked every breakpoint so This may be wrong. The actual image that loads is 838px by 1198px. That means that that single image is about six times as large as it needs to be.
So my first step would be to resize the images to be no larger than the largest area they can display. Then optimize the photos, there are several posts here about that or just search the internet.

Many thanks for the enlightenment. I too suspected that the bulk of the time to load my lead page (3.5 sec according to Google) was due to the stack/foundation structure. To confirm my
thougth I took all of my content out ofthe page and redid the test. I went from 75 to 77. Not much improvement.

I will follow your lead and address large image files. That should save something but I suspect I will not get down to a 1 sec load ala Google.