I'd like to display images I've stored as Blobs in a GWT rendered page using RPC. I don't want to use a servlet because then loading the images is synchronous, and if I have many images can slow down the page load times. Any ideas?
Using a Servlet is the best way to serve images. Browsers do not block on image downloads. On the contrary, they start downloading images and other resources in parallel threads (it was earlier restricted to 2 threads, but newer browsers have relaxed that limit).
Related
could anyone please help with my webbsite loading times?
Whilst desktop pagespeed ranks 99 the mobile version ranks 75 only.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.muscle-cars.eu%2F&form_factor=mobile
What could I do? I already use next/image and wepb, do I have to compress it more?
Yesterday I tried to remove Catamaran font from the website and it speeds up to 96, but it is very unlikely that removing 80kb font would help that much, I think there is something blocking up loading the font. I tried Google API and self hosted both similar result.
Thanks for help.
Here is the result of your website test, we can see that the mobile version only ranks 75.
I used chrome devtools to check this web page and found some issues to enhance your web user experience.
Your website gets the raw css and javascript files from the server. It's too big and will waste more time. You can reduce file size by using ugly javascript and css files when the page is first loaded.
Your website is getting too many javascript files on first load. I found more than 10 files to load. In mobile 3G networks, more time is wasted. So use webpack or other bundling tool to combine these files into fewer files.
You can reduce file size by using tree shaking javascript and css.
Your web page home page can use server-render teck, which renders javascript in server and sends whole html file to mobile browser.
I created a fun progressive web app to play video tracks from our database and has a nifty download button on the tracks so they can be played offline. Trouble is that when the webapp is actually offline, the cached version of the track isn't being played.
I'll list the steps how its implemented and if someone could just take a look and spot the error that would be amazing.
Using create react app script framework, or at least we did until switching to react-app-rewired (v 2.1.3)
service worker is registered in index.tsx (we're using typescript), calling serviceWorker.register();
mp3s are served via cloudfront + S3 (this shouldn't matter) and played in webbrowser using a simple video tag <video src={mp3url}></video>
download button basically runs caches.open("my_custom_mp3_cache").then(cache => cache.add(mp3url))
when the webapp is offline (via "Offline" checkbox in "service worker" tab of console), i expect the service worker to serve the track from the cache. This is bug, it currently doesnt.
Attached picture of request for the mp3 when app is offline. it should hit cache but doesnt:
https://i.stack.imgur.com/uSUon.png
Included picture of the entry in the cache that should be hit/matched against: https://i.stack.imgur.com/If0NC.png
When testing this in console with caches.match("mp3url") it correctly returns the cached response.
Please let me know if anyone has any ideas. i'm quite stumped.
Few ideas from my side of why its not using the cached mp3:
workbox create-react-scripts service worker either doesn't look inside my custom cache, it only looks inside its workbox-precache.
workbox create-react-scripts service worker only matches against its list of pre-cached files from the build system and any dynamically added files to the cache are ignored
when the video element requests the mp3, it sets different request headers to when my code adds it to the cache. Assuming caches.match checks headers, then the request headers don't match and its a miss.
I want to upload the image in my website. The same image will be shown in another website. So this is the scenario where image is uploaded in one website and displayed in both website. These two websites are hosted in two different servers as well as they both have their own database.
I am using Angular JS, Entity Framework, Web API and SQL Server 2014 as backend for both of the website. Currently I am using ngFileUpload to upload the images. Please answer me on below questions:-
Should I upload the image in database(as nvarchar-max) or filesystem(FTP or local web server file system)? I read many articles and get to know that Database retrieval of image has affect on performance but it is more secured. However File System is easy in performance but complex on maintenance like back ups. So I am just not able to decide which to choose among these two as both have pros and cons. Which option will be more suitable to my requirement where same image will be displayed in both website. Please note that there can big images like upto 5 MB uploaded in the application but the number of images will not be huge as compare to any social networking or online shopping site.
How to create different size of images(thumbnail, medium, large etc) automatically upon uploading of image in website? Is there any tool or directive already available in Angular JS to achieve this?
I know my question is broad but I need suggestion to start with my requirements.
Please help.
I use the file system to host my images. If the image is displayed on someone's computer screen, they can use an image capturing software to copy it anyway. Also, while storing them to a database may be more secure, I don't need the extra overhead in my code where a simple url to retrieve the image will suffice.
As for resizing an image using Angular, check out these links:
https://www.scientiamobile.com/page/angular-image-resize
https://github.com/FBerthelot/angular-images-resizer
I have an application that shows a screen of image thumbnails, each image is around 80k and they are stored in a database. To keep response time reasonable, the appilcation displays a placeholder image when it first starts and later downloads the images from the server. I'm expecting to show around 40 images on the screen at once so that's my batch size. What's the best way to serve these images up to the client? I've got two options in mind.
Create an ADO.NET Data Service that exposes the Images database table to the client. The client can asynchronously request the images, one at a time, and display them as they come back from the server. I've implemented this solution and it seems to work Ok; the speed isn't great and I feel like I could utilize the Http pipe better by requesting maybe 3 images at a time.
Create an HttpModule on the server that looks for requests that look something like /Images/1.jpg and then reads the database and returns the requested data. On the client side I can have many Image objects whose source points to the virtual Urls on the server. My theory is that by just giving Silverlight many Urls to deal with it may be able to transfer the images more efficiently than my code in option 1.
Would either of these methods be more efficient or is there another technique for getting this done? Thanks!
I don't know if it's more efficient, but I've accomplished a very similar task using an HTTP Handler (ashx). The handler pulls the image in from the database based on the Parameters in the uri (image ID), and then Silverlight fetches them asynchronously by setting the Source property of an Image control to the URI of the handler with the specific ID that I want in the query string. The Image control, in turn, is inside of an ItemsControl which allows me to display multiple images.
We are doing something very similar, and we are just using an ASPX page to server them up with a query parameter of the image identifier. We are also caching the images, and the ASPX page will used the cached value if it exists. If not, we pull it from the data store, cache it, and send it down. It is working really well for us.
Have you looked at using Deep Zoom? It's very efficient about progressive image loading, and gives you a nicer user experience when the images are fully loaded.
Examples:
Hard Rock Memorabilia site
Deep Zoom Pix
What are the reasons that cause plugin analytics to use 1x1 img pixels to call their code? What permissions does this shortcut?
The server hosting the 1x1px image logs the request. This allows collecting statistics about who loads (and renders) the page with the image. Browsers in general allow cross origin in img tags.
Also, this allows javascript to be loaded from the same domain as the image.
Behind these image is a server-based script like php, python or so on which can get and log information about the visitor (visited page, referer, ip, ...) for the tracking-stats. The server will be able to get all information you can get on the serverside from a http-request. The benefits of this methods are that it works on nearly all browsers and devices. Its also lightweight because an 1x1 image will cause nearly zero bandwitch.
Its a common solution to track pageviews. To get more flexible, some alternative tracking-methods like pwiki don't even use javascript. They're inserting a tracking-pixel which also works when the user has javascript disabled or he is using some plugins which remove tracking-scripts.
It also works on emails so that the sender has information about which and how much users read for example a newsletter-mail. But nowadays nearly all deskto- and webclients are blocking images in emails by default to prevent these tracking-methods. Images will only be displayed when the user explicit allow this for a specific domain.