I am using TWA. Its response time and speed are slow. If the internet is slow then there are lot of issues like. UI lagging, Slow speed and image loading time are very hight. That is giving a bad experience to our customers How can I improve the performance of my TWA?
There are many ways to optimise TWA’s, but the basic fact is to optimise twa you have to optimise website. Some of the basic things you can do is:
Use a CDN to serve your static request
Cache requests using service worker so that in offline mode you don’t
need network call for basic ui updation and home screen image loading
etc.
Make button clicks more responsive and give some quick feedback on
touch
Smoothen the scroll so that it feels app like
Add some smooth animation before loading data so that the loading is
not abrupt
Optimise your image size for web , use .webp format
Related
So, my assets folder in Angular app has a size of about 1GB where images are close to 134MB and a video of 738 MB. A component which displays these images take about 3-4 seconds to render in local, and it takes more than a minute on a application which is deployed to PCF(even after using AOT).
Strange thing is that the components renders just in fraction of
seconds if we revisit it.
I have tried using lazy loading for images by using deferload. But,
still the problem not resolved.
Could someone share their thoughts on this.
Mostlikely fetching such big images causes the app to load slow.
It is probably unnecessary to have such big image size. You could try to resize the images with something like lambda resize image.
Also if you revisit the site all the data is already cached in the browser. You could try to disable cache in the network tab and it should be slow on every visit of the site
You can use npm install package ng-lazyload-image
Fine the url for description and usage docs
https://www.npmjs.com/package/ng-lazyload-image
TL;DR QUESTION: Are the Angular and PageSpeed compatible at all? I can't find any information anywhere on this.
I have an application that uses AngularJS to load in images from external websites. These images are often quite large (~500kb, ~1200x900px) but are served in my application at a lower resolution (~800x500px). I have no control over the image size or level of compression.
I've signed up for Google PageSpeed service and have everything up and running. However, these images are not being touched in any way. I'm wondering if this is because I'm using AngularJS to serve them up (the images are despite being in Angular, I'm serving the images with src="{{img}}" rather than ng-src).
Any ideas on what I can do to get this working? It really seems like an ideal service for me, proper compression and scaling of images would make my page loads go from ~2mb to ~100kb!
Are there any other services which do a similar thing? I need some sort of middleware to compress and scale images before serving them to my user.
EDIT: For clarity, my server is running on Heroku using NodeJS/ExpressJS/AngularJS/MongoDB. Don't know if this affects anything.
After doing a bit of research, it seems that PageSpeed works similar to the Google search, in that it indexes your page and looks for images to compress. Seeing as Angular needs to load scripts before pages are loaded, the two just won't work together.
There is a possible solution found here:
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
For me this won't really work, as I have dynamic search pages that I can't really pre-render with PhantomJS. But for others, this might be useful.
Please alert me here if this ever changes!
I have a large background image that is a major part of my design, but is not essential, that I am planning to load via JavaScript after the rest of my page has loaded. I would like my users to be able to interact with my more important content while this large file loads.
I would like to support JavaScript disabled users as much as possible, while maintaining optimal load times for everyone else. Is there a way to force an element to load last when javascript is disabled? If not, what's your opinion - is it better to fully support non-javascript users or optimize my site for everyone else?
If you include a style block at the very bottom of your page (just inside the closing body tag), and set the background image from there then it should load last, even for users with javascript disabled. Mike and claustrofob both make valid points.
I have a website that shows hundreds / thousands of images to users. Users reload the gallery fairly frequently, but their caches are invariably not big enough to save the images from visit to visit, and have to slowly re-download.
What are good ways to ensure that images get cached? I've already ruled out using localstorage. What advice can you give me?
Just to be clear, the http headers are set correctly (folks with big caches get instantaneous loads), just that the browser default caches are not big enough.
Have you considered caching on the server-side like varnish in front of your webserver? If you have enough memory on your server(s) this will help alot on the download-time for your users (and your serverload).
Or are you just interested in client-side cache? If so, it would help if you could post your http cache-headers.
I am a newbie to web development. I am trying to develop a web site and it uses fairly large
number of ajax requests. In between i came across a friend who said that excessive dependency
on ajax request can be a performance concern and makes the browser to utilize huge amount of
network utility and cpu usage. Is this true..?
Does excessive dependency on ajax pose serious performance issues.?
If you are using a lot of Ajax requests, you are going to want to do some things to speed up your application
1) Make the server as fast as possible by using caching, returning limited sets of data, etc.
2) Make sure you actually need every ajax request. For example, you can wire a select box up to an ajax response, but if the data rarely changes, maybe you should load it only once, when the user loads the app.
3) Dont load too much data -- loading a table with 1000 rows in it via ajax can take a while, both to get the data and to render the response. If possible, use paging or similar techniques to get the request size down.
Any ajax enabled site can have usability issues if the network is slow, if the server is slow, if the browser is slow. This is just part of the game, and the fun and joy of modern web development. Do what you can to mitigate these types of issues.
Asking if you can have excessive dependency on ajax is kind of like asking if you can have excessive dependencies on 'divs'. Ajax is a tool, and like all tools, there are ways to use it properly.
No. If you'd have to reload the whole page every time you make an ajax request, you would need much more cpu time and network traffic. Though, if you use ajax to reload the clock in the status bar every second from the server, you should replace this with a javascript function...