I'm currently building a single-page backbone app that embeds up to 10 separate Soundcloud iFrames on a single page. Users can then view other pages, each of which contain their own set of iFrames.
I've noticed that each time a new set of iframes is loaded the memory consumption for the tab increases roughly 80-100MB (according to the Chrome Task Manager). This memory is never relinquished, so after a few clicks the tab easily reaches 300MB and becomes intolerably slow. This slowness occurs in both Chrome 20 and Firefox 13.
After each page change I've tried .remove()'ing all the iframes as well as clearing out the container element via .html('') and neither stems the memory growth.
Provided in this gist is sample code that exhibits the same behavior as described above. On each load the individual iFrame consumes roughly 10MB of additional memory.
https://gist.github.com/3202151
Is the Soundcloud embed code doing something to maintain a handle to the iframe and preventing it from being GC'd? Is there another way I can remove the elements from the DOM to avoid the memory bloat?
Note: I cannot add all the tracks to a single set which can be loaded once since tracks being embedded are not my own.
I have been running into a similar problem. I'm using the SoundCloud js sdk to stream audio in a custom player on my site. I got it running and let it go all night (because I was suspicious of the swf size). Sure enough, in the morning the swf was massive and my computer was noticeably slow. The SoundCloud sdk uses SoundManager2 to stream/play audio, so it creates a soundManager object which you can access in JS. I ended up managing the swf size by calling
soundManager.reboot();
...between each song that plays. In your case you could call it between the various pages, keeping the memory to the 80-100MB max at a time. It increases the load time by a fraction of a second, but that's a small price to pay for fixing the ever-growing memory issue.
I'm not sure if the iframe player also creates the soundManager object, but if so, give this a try!
Check out the SoundManager2 documentation here:
http://www.schillmania.com/projects/soundmanager2/doc/#soundmanager-reboot
Related
I've spent quite a bit of time on performance optimization for my site and I'm right there at the finish line for getting all the green good scores in search console for mobile usability and core web vitals. The last outstanding thing is getting my LCP under 2.5 seconds for my blog posts.
I'm consistently getting 2.6-2.7 and I can't quite figure out why. The LCP element is the <h1> tag on my blog posts and there are no above-the-fold images.
Example URL With Higher LCP
Let me say that I am using a Beaver Builder website and some marketing tags like GA, GTM, etc but I've spent a lot of time analyzing my script and style loads to create an optimal experience with preconnects and preloads of various resources. I know it's a big ask to try to get a site like this down in load time. I'm on Kinsta hosting with low TTFB, full-page caching and CDN. I am also using the Perfmatters plugin to control various aspects of load times.
I've done everything I can think of to get the LCP down and it seems like the <H1> tag is visible almost immediately but then may be repainted later towards the end of the page load, but I can't figure out the cause of this.
Anyone out there feeling generous that could take a look?
Page Speed Insights URL
as i can see Pagespeed is showing aggregated real user experience of your entire domain, not of this specific pages but for all pages on this domain.
DOM content load time for your page on mobile is around 3sec, that means your LCP has to be greater than this
You need to reduce your DOM content load time first. You need to prioritize your network calls such that redundant dependency needs to be minimized
And also for desktop page, you are lazy loading first fold image which is not considered as a good user experience and might be contributing to LCP for desktop version of your page, also impact negatively for your SEO
I'm creating sort of a tutorial application and have to display images from firebase storage with a step-by-step tutorial. Currently I'm using the .getDownloadUrl function and am displaying the images using Cached Network Images(External library) with the URL. The images are replaced when the step is completed and it takes at least 2-3 seconds to load an image and can get quite irritating for a user. Also, to minimize latency I shifted the Cloud Storage location nearby to where a user would be, this improved the speed slightly. Is there a better way to display images, apart from storing the links on Cloud Firestore or saving all the URLs in one list at the start.
The most common approach is to compress/resize (or both) your images. By doing this you have a few options:
1. You can display the thumbnail by default and only load the full image (or load it in the background) when the user requests it (eg. they click on details about the tutorial)
2. Load a different version of the image depending on the screen size (you don't need to display an image meant for desktop on a mobile device)
3. Replace the old image with the compressed one. Depending on what the content is, you probably don't need images larger than 200kb, and that's being generous.
You could also consider storing your images using a next gen format, such as WebP as it is considered one of the most efficient image types. But, it's not yet supported on all devices, so you'd want to include a fallback type.
You said you're caching the images which is a good step to reduce load times. You also said you shifted the storage location to be closer to the users. You could also try to find a CDN that is even closer to your user's locations (probably diminishing returns).
You seem to be against storing the downloadUrls in your database. This would help as all you'd have to do is load the image, instead of ping the bucket for the url and then load it.
Another potential solution for your use case could be to download the images for this tutorial, as well as the next one so when the user clicks next the images are already downloaded.
Unfortunately there isn't a lot else you can do. There's a lot of data packed into an image and it takes some time to load and render it
I have installed and customized WooCommerce Product Pages on my WordPress site, but one of the product category pages takes about 7 seconds on average to load. Other category pages load in around 3 seconds. I am struggling to find the reason for this. There are less products on this page than other pages and less sub-categories. I have installed plug-ins such as 'W3TC' and 'Better WordPress Minify' but it hasn't made much difference.
Has anyone else experienced an issue like this and if so, would you mind sharing how you resolved it?
Any help would be greatly appreciated.
Thanks
Using caching plugins is fine and dandy but the reason these pages load slowly is simply the data model that WordPress uses, post-types and the metadata look-ups. The only way to truly get speeds up is good hosting and turning on Object Cache on the server.
We enable this on a WP-Engine site and it was night and day. 12 seconds turned into 2.5 seconds.
Object caching
Object Caching is designed to capture queries to the database and store them in memory. This allows you to run an "expensive" query - a query that takes a long time - one time, and then reuse the results again. When used properly, Object Caching can give your site a speed boost by reducing the time that is spent accessing the database. Please note that this change can take a while to take effect.
There can be many reasons for a WordPress pages to load slower. But you problem seems to be unique.
Here are some useful tips by which you can speed up your page loading:
Optimize Your Images
The page on which you are having issue might have High Resolution Images.
Avoid displaying flash on your Page
Avoid too many advertisements
Cut off the Unnecessary ads from the page.
Do not use inline cascading style sheets
Besides utilizing inline cascading style sheets make a CSS file and call up file on all page of your site that will likewise help in repressing download speed.
Put stylesheets at the top - Put scripts at the bottom
Utilize javascript at the bottom of the page this will serve to load up your page fast. When web browser download javascript it will finish downloading your internet site data, and so any analog downloading will end while browser request Javascript downloading.
Use CSS Sprites
A CSS sprite is an an image comprised of other images used by your design as something of a map containing the coordinates of all the images. Some clever CSS is used to show the proper section of the sprite when your design is loaded.
Here you do not have to load multiple images which are used on you site. Just loading of a single sprite image will do all your work.
Limit Your External Scripts
There might be a issue that external script is being loading on that page. You need to check and limit the same.
Add LazyLoad to your images
You can use this technique to load the page part by part.
Control the amount of post revisions stored
I saved this post to draft about 8 times.
WordPress, left to its own devices, would store every single one of these drafts, indefinitely.
Turn off pingbacks and trackbacks
Let me know if the problem resolves using these tips for you site.
The list of suggestions that WisdmLabs mentions above is great!
However, I'm not sure if you've seen the plugin for Wordpress called W3 Total Cache. It has a load of built in functionality to automatically improve the performance of your Wordpress web pages.
It's free and worthwhile using if you are looking to improve the performance across your whole site.
https://wordpress.org/plugins/w3-total-cache/
continued from here..
In the application we are currently writing we have the ability like IStockPhoto to search for images.
In the case of IStockPhoto, after it searches only the view where the images are loaded are refreshed while the other sections of the site remains.
For us, when we search or click pagination, we load the whole site and this comes with quite a performance hit. Since we are loading the scripts, images and facets (and since many of them are nested inside another it has to be recursively loaded) every time someone searches or wants to go to a different page number.
I was thinking of creating an AJAX control for our section where we load the images so we don't have to refresh the whole page. Hence, no need to reload js files, and no need to recursively load facets (I think this is where we have the most performance hit)
So the question is, should I try to create the AJAX control for retrieving stored images? And if so, are there a lot of changes I have to make in my Views and Controllers?
Or would there be some way I can optimize our loading time?
ps. When Solr is hit the first time, the page loading takes about 15-20 seconds (if my memory serves me correct) and afterwards, it takes about 3-6 seconds to load a site with 25 images in the page. Is that normal? It takes about 1-2.5 seconds to load a section in iStockPhoto.
Thank you...
For an event we need the following setup:
Multiple computers running a kinda of quiz (in asp.net). Every one of them plays a video as background (in the browser), sorta like a screensaver (with advertising). When moving the mouse a div pops up which allows the user to choose a quiz in fill out the forms. The catch is that the video needs to be synchronized on all the PCs.
These are the constraints:
The asp.net code is already there, so writing it completely in flash is no option.
We know .NET, javascript, html, the standard webdev stuff best, so investing time is something new is a last resort.
Any suggestions?
The way I see it, you have a couple options here:
1) Hack together synchronicity using a server-side timestamp passed to the Flash clients. Give the client the current time (server-side) and the time you want playback to begin (server-side, also). Then have the client wait that many milliseconds.
2) Configure your media server to stream the video as though it were a live feed. I am 90% sure this is possible with Flash Media Server, but I've never had the budget to manage my own video server.