Hey guys,
I’m pretty new to webflow and am working on a simple landing page/pre-launch page.
It’s loading super slow despite reducing the hero image file down to 70kb. I’ve also deleted the text animation to try and solve the issue but its all just very slow.
URL: https://homeschoolinteriors.webflow.io/
Any help would be greatly appreciated.
Thanks so much,
Oli
The site loads almost instantly for me. Maybe you’ve got a browser extension that’s conflicting with what you’re seeing? I’ve had it happen to me before as well.
Your site gets great site speed ratings on desktop, however I’m noticing that your mobile suffers quite a bit because you’re using a ~1.4mb background image:
Because background images are called in code (and not supported by Webflow’s automatic responsive image feature) you can actually render completely separate images based on the breakpoint. After taking a peek at your desktop view, it looks like this is the place you’re using the much smaller 70kb image:
I’d recommend either updating the background images called on your smaller breakpoints to something smaller (keep in mind that the two middle breakpoints are calling a separate ~1.2mb image) or utilize the object-fit feature to use a single image for all breakpoints that will take advantage of the previously mentioned responsive image feature.
Hopefully that helps 
Hey Mike,
Thanks so much for taking the time to help me, I very much appreciate it!
You’re right though, my mobile breakpoint image was still pretty weighty so I’ve gone and reduced that to 80kbs as well.
The desktop is loading quicker but does seem to take a split second to load the custom font that I’m using. Could that be because its a web font do you think?
Also, I’m not sure if I can ask another question here, but on the chrome browser on my iPhone XR there is some white space beside the page which means the scroll isn’t purely vertical. I don’t see this issue when using Safari on the same iPhone. Might you be able to advise?
Here’s the share link once again: https://preview.webflow.com/preview/homeschoolinteriors?utm_medium=preview_link&utm_source=designer&utm_content=homeschoolinteriors&preview=31b5404904b1b800998336284c053e05&mode=preview
Thanks again for your help my friend
All the best,
Oli
Hey Bryan,
Thanks so much for taking the time to reply, I very much appreciate it.
It does seem quicker now, you’re right. What extension do you suppose might slow the load time? I have a number of extensions such as the pixel helper, pop-up blocker and the webflow for chrome extension.
Thanks once again!
All the best,
Oli
I have some affiliate links, so I always figured it might have something to do with that. Whenever I check it on someone else’s device, it always loads fine though.
This looks to be caused by your Div Block 11 element which is wider than the screen:
You’re using a width of 95% and then applying margin to both the left and right that’s causing it to actually take up more than 100% of the width.
If you need space on the edges, use padding instead—this will only push the content away on the inside of the element as opposed to the outside. I’d also set the width of the element itself to 100% and instead use a max-width property (not shown) if you want to limit the width as it will keep the content centered more easily with your current setup:
Keep in mind that this should be applied to the desktop breakpoint as the issue starts to present itself earlier than just the mobile breakpoint
Hi Mike,
Thank you once again, that did the trick and I truly appreciate your help with both of my issues, I really appreciate you taking the time to lend a hand.
I haven’t used forums too much in the past but I’m finding this Webflow community to be a beautiful thing.
Have a great day!
All the best,
Oli
Glad we were able to help you out!
Feel free to create a new thread if you have any other questions and don’t forget to mark my original response as the Solution for this one so other users know you’ve gotten your question answered
Hey Mike,
Hope you’re well my friend,
I wondered if I could ask another question. I’m having responsiveness issues on Safari. On chrome desktop browser all is fine across all breakpoints but safari the hero is all off.
Any chance you could comment?
Appreciate your help as always,
Best,
Oli
Can you include a screenshot (or screenshots) of the issue by chance? Unfortunately I don’t have a way to easily check sites in Safari as I’m on Windows (with the exception of my iPad Pro—which isn’t always an accurate representation) so any visuals may help diagnose the problem.
Hey Mike,
Sure, thanks so much for your reply. I’ve attached two screenshots here - 1 x Safari Screenshot and 1 x Chrome screenshot.
Could it be something with the way safari interprets “absolute” positioned elements? my research suggests it could be something along those lines but I’m otherwise clueless!
Thanks once again! Super kind.
Oli
Hmmm I’d imagine the issue has to do with the use of vw units for the two hero elements (subject and copy)—are these both taken on the same machine running the same resolution?
The reason I ask is that I’m able to “expand” the Designer canvas in preview mode to mimic both versions of your screenshots above—shown at 1500px and 1886px wide respectively:
I’d probably recommend adding max-width values to both the image and copy as well as modifying the structure a bit with regards to the hero section as a whole. Right now each of the elements are rendered within separate sections (purple and tan) when in reality these could both be contained within a broad “hero” section instead. This would allow the two elements to interact more appropriately with one another and prevent them from overlapping on larger screen sizes.
Hey Mike,
Once again, thanks so much for taking the time to help me here, very much appreciated.
Both screengrabs were indeed the same monitor and res. I changed the font colour on 1920 and 1440 breakpoints on the designer and published to see that Chrome reads the website at the 1920 breakpoint whereas Safari rendered the 1440 version, despite me viewing them on the same monitor…
I didn’t have any luck adjusting the vw as mentioned so ended up redesigning the hero section as you suggested and I feel it’s a lot cleaner.
The only real issue I have now is adjusting the mobile breakpoint so that it looks good on both older and newer devices (I have an XR but my father an iPhone 6) I thought I had it nailed and then asked him for a screenshot and it was overlapping.
Live Link: https://jessak.webflow.io/
Let me know if you think it’s looking better if you have the time, but thank you once again for your generosity.
All the best,
Oli
Glad to hear adjusting things a bit were able to help! I just took a peek and it appears that your changes helped out with the presentation on the larger screens—although it’s weird that the two browsers were interpreting the breakpoints a bit different in the first place 
I took a peek in DevTools to see if I noticed any overlap on iPhone 6, and while the interpreted viewport size didn’t show any overlap, I’d imagine sizes differ on actual devices and the addition of the address bar would have shortened the height and caused text to be unreadable:
The reason you’re running into issues is because the photo is always stuck to the bottom and both the height of the section and the photo are set in vh units—meaning if the height of the device is under ~650px then there will be overlap on the hero copy:
Instead, I’d recommend having the photo within it using % units. Since your parent container has a height applied, using % here means it will only take up a percentage of it’s container—rather than the entire viewport height.
Using the same size from the example above, changing the height of the image from 60vh to 60% fixes the problem:
Hopefully that helps
Hey Mike,
I do apologise for the slow response!
I meant to reply immediately and guess I got lost in the Webflow whirl!
Please know that I am super grateful for all of your generosity and assistance, I fixed the issue and am wiser for it.
Thank you once again!
Have a lovely weekend.
Oli
