I know pretty much nothing about web design and coding. So I built a very long landing page with Rapidweaver and stacks, but the site takes quiet some time to load: https://londonexpress.com
I just don’t really know what to do with all this information.
Here is what I did so far:
I decreased all images to the smallest size possible. (not all because some would look very bad when decreased too much)
I removed most fade in animations
I tried using Cloudflare but ultimately had to hire somebody in upwork to set it up for me since I have no idea → hasn’t been done yet)
I use WebP format for images as recommended by google
I tried using the following Stack by CosCulture: https://www.cosculture.com/plugins-stacks/product/load-faster/ (This sped things up a little. However, I still had to remove the stack once I realised that images in the sliders kept appearing and disappearing)
I activated the in-built preloader in Foundation 6 ( know this will not speed up my site, but at least give the impression)
@Joshua The page does not seem to load at all for me. Using Safari. Actually it does load after about 80 seconds. I have a decently fast internet connection (about 90 Mbps). So there are some serious issues.
You have a lot of images on the page. I checked about 4 of them and they all seemed to be decently sized. I’m not sure if the image format of WebP does not play well with Safari. I don’t think that’s the problem, but I may be wrong.
Others will be able to help you a lot more: they’ll know how to read that screenshot better than me. For instance, you have a couple of animations (or more) on the page: I don’t know where they are coming from and if they might be slowing things down.
However, what I’m paying the most attention to is the video. It takes for-ever to load when I ask it to play. And it seems to be self-hosted. The video seems to be 210 Mb or so. That’s way way too large. I’d solve that problem first. Why not put on YouTube or Vimeo? Those services are great for optimizing your video for playback on the web. Not as good, but another alternative is to upload to something like Vimeo. Let them optimize it. Then download the resulting video. That won’t solve the problem completely but it should help a bit. But YouTube and Vimeo were made for problems like this. As is, you are asking folks to download a 210 Mb video and depending on internet connection that’s not going to be a pleasant experience for 90% of folks.
Hi @Mathew ! Maybe you were not able to access the site 14 minutes ago because I was updating it at the same time?
Thanks, I have not thought about the video at all. I will definitely put that on the todo list. Regarding the animations, I use:
Nope, same problem right now. Perhaps it does not take the full 80 seconds now, but realistically anything over 5 seconds (especially for a home page) is too long to wait. Currently taking at least 30 seconds to load … still waiting.
I don’t know what percent of your users are on macOS/OS X, but only Safari running on the most recent version of macOS 11 (Big Sur) will display WebP images. Safari on any prior version will not show the images. If you are using WebP, you really need to use a stack that allows you to server multiple image types.
I use the warehouse stack by Yuzool, which doesn’t give me the option to select multiple image types. I will experiment with the formats to check if it runs any faster. I have a lot of transparent images so I used webp for pretty much all images.
You page takes about 7 seconds to load on my slow 20mbs broadband connection, so that’s not too bad.
I think the real answer is not to have so much content on the landing page? You want to be able to grab peoples attention right away, so maybe move some of that content to sub-pages? No matter how small you make the images, if you have over 100 images on that page as you do, even if they load really quickly, there is still a lot going on.
I have added the load faster stack by cos culture again. It works much better since I removed all the fade in animations. @Ruyton You are right, I should really find a way to shorten the page. Still, I wonder if there are other lazy load solutions that might help here.
Yes, your site loads much quicker now! I’m with @Ruyton … at this point speed is less the issue, but greater focus would help. There’s a bit too much meandering. For example, you have a nice chart titled “English in Numbers”. Does that really need to be on the home page? Or on the site at all? Presumably folks visit your site because they already know English is important to learn (at least for them for reasons they are already aware of). So, like Gary, I’d say some content could be put on sub-pages or simply deleted.
… but how to create great focus (and thus shorter amount of content) isn’t something we can really help with. For awhile it was fashionable to have long one-page websites. Those have mostly gone away as they weren’t very effective. (There are some exceptions.) … and mainly not effective because too much content one page resulting in folks not knowing what the real focus was.
At any rate, it runs much faster now. Putting the video on YouTube really helped.
Thanks Mathew, yes it is quicker. I will see what else I can remove and try setting up Cloudflare. That might give it an extra boost. Another Idea I had was using a Marathia’s Randomizer Stack to Split my Impact Stack Slides in 2, so every time I enter the site, new images would appear. That didn’t work though. Thanks for all the help!
Very interesting. Thanks @DLH . Luckily I have the srcerer stack. For the Impact Images I will have to switch to jpg. Was this tested on a tablet? Seems I have some work to do, it’s not yet fully responsive for narrow screens.
Those screenshots are from a MBP running Safari. The WebP stack from StH may be just what you need to use WebP and fallback to PNG to JPG depending on transparency needs.
