I use ionic 1.3.1 for my data-driven android app with crosswalk (~14 version I guess).
I have about 3k+ of full images and 3k of their thumbnails (I did that so it woudn't resize images as user scrolls. p.s. was that a bad idea and I shouldn't do that?) in www/img/ folder and I'm displaying them with ionic's "collection-repeat".
It all works great, but the app takes around 5 seconds to load itself and takes up to 70-100 mb of ram while running.
Can I async load images from filesystem ?
If so where do I put them, so they would appear in my apps folder after I build the project and how do I reference the path to each of them from code with src attribute? I guess the other way would be to make a webserver from which user downloads all the images on the first start and then store them in the apps folder, but I don't have any experience with this kind of stuff, so I would prefer the first option for now.
Please, give me some tips on how to implement this or suggest other ways to solve the problem.
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 static React website, there is no database, no node.js, no login system. It is a simple company website with many SVG images and a lot of CSS work. I made it with Bootstrap 4. But when I try to run it on localhost it freezes many times. I am unable to figure out why the website is hanging, also it takes time to load all the SVG images.
Can anyone tell why does it freezes?
I have an e-commerce react app, so as you know every product has at least three or four images, so to show the image of product in my website i created a folder with a name of " images " inside the public folder so everytime i want to show images of a specific product i can get and show them very simply and for Now this is very very awesome.
The Problem:
as we know each e-commerce website should have an admin where he can publish new products and upload new images, so by the time may be i will have thousands of images in my website.
Question
what is the best practice to store images of my react app ?
do i need to use third party like AWS or Firebase ?
Thank you.
Storing images in the code-base assets folder is not the best option for large number of images. Handling updates, inserts is a big problem. So you have the following options.
Options: Cloud/On Premises
You may store in the cloud like AWS S3
If you want to store on premises, you may store in MongoDB Grids
or even on the File System with file-path stored in the database.
Step Ahead
But going ahead you might need responsive images according to the image placeholder. Example for an image you might need thumbnails of different sizes lets say for listing pages, android apps, iOS apps.You might also need to compress the images in case they are heavy for web purpose.
In that case you may choose to store the images in the desired
resolutions.For this you'll have to store multiple versions on an image. For example product1/original.jpg, product1/compressed.jpg, product1/300x300.jpg etc
You may resize/crop the images on the fly. If you want to write your resizing systems you may write ImageMagick/vips/PIL etc based code.You may try to search for readymade nginx based plugins to server responsive images.
If you do not want to do this resizing stuff yourself you may use image storage services like imgix,cloudinary,akamai that provides CDN + image manipulations.Some of these provide storage+manipulation while some only manipulation.
Some apps got tutorial when the first time open.It seems cool.
I'm trying to create an opening tutorial that consists of four panes for my AngularJs app.
I build my app with css3 and html5 ,use cordova to generate apk.
How to create tutorial for my app when the first time open it?
Is there any solution?
Thanks a lot!
Sorry maybe I didn't make myself clear.The app is almost done,and splash screen has done.
But I need few pages or images on the first time run.
Use database. For example if you use localStorage, inside the deviceready function
check=localStorage.getItem('first_time');
if(check.length<0)
{
startTutorial();
localStorage.setItem('first_time','NO it is old');
}
After the first run value will be changed and tutorial will be shown once.
You can use other databases like indexedDB or webSQL.
This is probably a newbie question but....
I am developing my first mobile website using Sencha Touch 2. I now deployed the app to my Hosting server but.....it takes about 11 seconds before it even starts up ??
This is when I am running it in Chrome on my development machine.
It does 247 request with a total of 1.8 MB.
247 requests ❘ 1.8 MB transferred ❘ 10.65 s (onload: 10.66 s, DOMContentLoaded: 352 ms)
Is this normal ? I mean, this is only the framework stuff.
Thanks
You need to concatenated and minimize all of the files that you use into one big file
Use Sencha Command for Sencha Touch 2.1
sencha app build
If you've deployed development version directly on server then overall loading time will increase. To deploy app, you should build your app with compressed css and js. Follow this guide to start with. After successful build you'll get minified version of js files. Consider compressing css files too. To compress CSS files, you can use compass. Although, you've developed app already, consider going to theming guide that covers how to compress css files for production version.
As you've mentioned app is making 247 request. I assume that includes images too. You can base64 encode images directly into CSS files to avoid frequent communication with server. Another way to reduce image requests is to use css sprites.
SO also uses css sprites for different images seen here.