Hi guys, just letting you know that the new rich media SoundCloud embeds are crashing my site on mobile (iPhone 6). Also, it’s loading slowly on all devices. I am really excited about this new feature and hope you guys can get this fixed.
Another issue going on is the weird layout of the posts. Previously everything looked good and if one post had more text than another one, it didn’t cause weird shifting of the posts. However, that is no longer the case. I do know that I added some bottom margin somewhere but still, it should keep everything uniform with the alignment.
@GodlessGlen I’m not able to get it to crash on an iPhone 6, but adding 12 soundcloud embeds to a single page as in the webflow.io link you posted above would cause any website to slow down.
Can you provide a screenshot of the post shifting due to text content?
@YoavGivati Yeah there are 12 because these are blog posts but it shouldn’t cause my page to crash. It doesn’t on desktop, although it does load slowly. I assumed you guys would investigate as to why it’s crashing on mobile rather than saying I’ve posted too many. What’s the point of giving us SoundCloud embeds for CMS if we can’t really “use” it?
Hey @GodlessGlen I believe I found what caused the crash. Basically all of the sound cloud elements need to load into the page before you can play one. If you play one before all of the elements have loaded then your page will crash. I recommend adding a loading screen which doesn’t go away until all assets have loaded to the site.
@Waldo Thanks for posting this info. I’m not actually trying to play one, the page just simply crashes repeatedly. I think though that I don’t want my site to be slow on loading so it’s probably better if I use another platform to build my music site. Hopefully we will get an audio widget here soon.
Hey @GodlessGlen I did some research and found that SoundCloud is actually pretty heavy on Safari (numerous reports of soundcloud crashing safari on mobile over the past few years). The loading trick is the only work around that I’ve found so far.
UPDATE: While SoundCloud embeds wreak havoc on iOS, BandCamp embeds seem to work just fine from my testing. They load quickly and no crashing. Also, they do not go fullscreen so the users will be able to still scroll the page.
Desktops generally have more processing power than mobile devices. Having multiple embeds will cause ANY mobile device to crash because the device just can’t handle it.
Try limiting your use of embeds per page. This will not only help with load time, but also helps keep mobile devices happy
@Waldo Yup. Another good thing about BandCamp is that you can replace your source files for free without upgrading to a pro account. SoundCloud doesn’t offer that on free plans. This is a good feature since I periodically tweak my music after I master.
@PixelGeek I’ve never ran into this problem before. I assumed it was a glitch within webflow since it is a brand new feature. Apparently, SoundCloud just doesn’t cut it when embedding on websites. They really need to get their act together, so for now I’ll use BandCamp, which seems to work fine. I’m still hoping that we get a proper audio widget here. That would be easiest and work the smoothest.
Now I do think I have ran into a glitch. One of my posts include a valid link to one of my songs on BandCamp but it keeps telling me it is not a valid Url. This is just a guess, but maybe there is a character limit and my Url is exceeding that. I would simply modify the Url on BandCamp but it doesn’t allow that. It automatically sets the Url based on the title of the song.
@GodlessGlen hmm, seems like embed.ly doesn’t support bandcamp’s iframe embed. I’m guessing that may be because bandcamp has multiple versions and styles of widget.
For this case you’d need to hold out for dynamic embeds (upcoming feature); where you’d be able to paste in the actual embed code from bandcamp and use it in dynamic collections.
@YoavGivati Actually, I just realized the problem. Songs on BandCamp that do not have custom cover-art can’t be added using webflow’s rich media embed. This wouldn’t have been a problem had BandCamp accepted the cover-art for all the music, but anything over 4mb in size gets rejected. I can’t tell you how irritating this is. I wish web companies would stop doing this (and speaking of this, I’m talking to you too webflow since we have to resize and optimize images that aren’t small). Maybe one day webflow and every other web platform will just work with whatever size image you throw at it, and optimize it for you. Doesn’t that make sense? But as I’ve discovered, the web is not always a place of having user-friendliness and intuitiveness.
Anyhow, end of rant. At least I’m pretty sure I know what the issue is.
Hey @GodlessGlen if you have photoshop there is a “Save for Web” feature that allows you to save items at 72dpi, which can bring down file size significantly. It’s best practices on the web to have all of your images WAY under 500kb each and 500kb being the MAX file size. This really helps with site load speeds, SEO and the user experience overall
Glad you figured out that the band camp items required custom art to embed. That’s great to know to help others
@Waldo Thanks for the tip. The thing is I never use Photoshop. I’m guessing it doesn’t have any type of batch optimize feature, and I would hate to manually have to do it by hand. I do have a stand-alone app for Mac that optimizes images.
@Waldo I discovered another issue. Not all of my songs would add in webflow even after adding artwork on BandCamp. I had the idea the url was too long, and sure enough, that was the issue. I’m thinking that webflow has a character limit on the url. Maybe you can look into that.
