It would be great if there was a service like Cloudfront to make media content load faster. Since anvil itself uses AWS would this be possible?
To answer your specific question: Yes, you can use Cloudfront with Anvil! However, a bit more information would help determine whether this is the right thing to be doing.
Is this media you’re serving from a Data Table? If you serve media from public API endpoints with constant URLs (we discussed this recently), then those URLs will cache perfectly with Cloudfront or any similar service. (The private, per-session URLs won’t cache well, because they only work from one session.)
However, jumping right to a service like Cloudfront at this point might be using a sledgehammer to crack a walnut – there are usually easier ways to speed up your Anvil app. Can you break down what’s being slow? (If this involves private details, you can try DMing me.)
Yeah it is loading from the data table. It sometimes feels slow when the photos/videos are loading, but it is honestly not that bad, it is probably more dependent on wifi coverage.
I am making the content accessible from the API endpoint, so if something like cloudfront is needed it should be easy to do so how you described.
The things I have been doing so far to try to improve speed is to use data bindings as much as I can, and make sure I do things like sorting/filtering lists of items on the server modules instead of on the form. I am working on paginating the content feeds too. Is that the right way to approach it? what are some other best practices for optimizing speed?
Careful: sometimes data binding makes everything slower. Only sometimes, but much slower.
If you have 3 properties of 3 controls linked to 3 columns of the same row (like student[‘name’], student[‘email’] and student[‘age’]) it will be fast: Anvil does a round trip when it updates the first property, then the row is already on the client side and the next two properties update quickly.
But if the 3 properties read from 3 different rows or tables (like student[‘name’], student[‘school’][‘name’] and student[‘club’][‘name’]) then the client might decide to do 3 round trips, one for the students table, one for the schools table and one for the clubs table.
The safest approach for best performance is to create a server function that collects all the data you need and returns it in one trip. Then you can still use data binding with the dictionary that is already on the client side.
The next step is to use sql when you need to read many rows, use filters unsupported by app_tables or use fancy joins.
1 Like
This week I paginated the media feed and consolidated some server requests and it seemed to help. The content that takes longest to load and display are video files that are displayed using the image component. There doesn’t seem to be anything with the anvil app itself that is slow.
Is there a way to listen for when the image is done loading?
Using the image component to load and display video files isn’t officially supported, so that might be slow. (In this case, I’m guessing that the video files themselves are really big, and so they take a while to download! How are these videos recorded? If you’re uploading them raw from a FileLoader on someone’s phone, I’d suggest converting them with ffmpeg to make them a bit smaller. You can use an Uplink for this.)
We normally suggest people use the YouTubeVideo component, which provides a bunch of useful events. I suppose you could build a custom component around the HTML <video> element which did something similar.
@merydid I used what ian shared here to downsize the profile pictures which helped some with the loading speed of the page. Image resize on file uploader. For my transcoding needs, I can use PIL for images but for video I want to use Ffmpeg. I am Uplinking to my ffmpeg scripts on pythonanywhere.com because ffmpeg is available out of the box over there. This seems to work, but It would be great if ffmpeg was included with anvil.
For displaying video I ended up creating a custom html component like david suggested here (No sound from video file using default image component) but I am having trouble viewing videos on mobile using a custom html player. They play on my macbook’s chrome browser, but not on my iphone browsers (safari, chrome, instagram). I generatedsource urls for the video player in two ways: one-time-use urls from app_tables.content['content_file].url and permanent urls to http endpoints that return the url. The image and video urls are https://goodlooksdotco.anvil.app//api/img/%5B19028%2C1674979%5D/peis.mp4 and https://goodlooksdotco.anvil.app//api/img/%5B19028%2C1676936%5D/7F615D6A-C02A-4C31-888B-5A149FE6D003.png. The image url works on desktop browser, mobile browser, and in the react native part of my project. The video url only works on desktop browser.
Is there an obvious reason why this may be happening?
We’ve installed ffmpeg for making videos smaller. See ‘No sound from video file using default image component’ for more details
1 Like