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.
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 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.
I needed some inputs on mobile apps.
Query: I have an existing web application on AEM(angularJS is not used). I want to transform the same on Mobile app using AEM6.1
While reading through the documentation section of AEM Apps, I found that the mobile App built on AEM
- works on the terminology and AngularJS framework.
- mobile App has different paths and app structure as compared to AEM web Applications
-since, phonegap has to be used, relative path needs to be different than the same of web application.
I am in a dilemma as If I would be able to convert my existing web app into a mobile App or not. If anyone of you has done some research on this, it would be very helpful.
Thanks in advance!!!
Regards
You can very well convert your AEM desktop application to a mobile app(site should be responsive).
AEM makes use of Cordova (PhoneGap) and ContentSync framework to create apps for both android and iOS. More about how to config ContentSync here. In simple terms, ContentSync packages your application(/content, /apps, /etc,...) based on defined set of configurations and cordova(phonegap) helps you access native phone capabilities and to create the archive file (apk/ipa). There is more than one way to create an app using AEM.
1. Using Cordova CLI :
You setup a cordova project in your filesystem. Then create contentsync configuration for your AEM project. Generate and download the application archive from here. Cordova project you had setup earlier will have the below folder structure.
Place the contents of archive file inside www folder, modify config.xml according your application and initiate build. Using this method, you will require an Apple system to generate .ipa file since it makes use of xcode and windows makes use of npm node js for the initial dev env setup.
2. Using OOTB 'Initiate phonegap build' workflow and AEM cloud config
This is an easy approach and does not require you to setup any cordova project in your system. All you have to do is setup contentsync configuration, add a few properties for the workflow to recognise your project and then trigger the workflow. Follow this.
3. Using Apps console in AEM 6.1
This also makes use of ContentSync underneath. Apps console makes the app very easy to maintain and configure, it also has inbuilt configurations for push notification, deep linking etc. Go through the info here. Refer to the sample geometrixx-outdoors project created in apps console, will help you understand better.
PS: Cordova and phonegap are the same. You can think of Cordova as Linux kernel and PhoneGap as linux distribution.
All I have is one graph / chart, and some tooltips by ExtJS on my website. Why does it have to make between 400 and 600 requests to my server just to load that? It's making calls to a zillion different .js files...
clickrepeater.js
manager.js
seperator.js
offset.js
button.js
textmetrics.js
item.js
box.js
auto.js
And that's just to name a FEW. On a slow connection, these requests take as long as 30 seconds to complete! And yet, I only have just the one production ext.js referenced by my html code. It's ext.js that's making all these additional requests.
Because you're running it in development mode where it loads each source file individually for ease of debugging (and some other things). You need to make a production build using Sencha Cmd which will concat all the required parts of the framework + your app into a single file.
As per the title, can I run a Jekyll website from the file system, without a web server? i.e. on the file:/// URL scheme.
I don't have the facility right now to build a test site to check. To my knowledge, it's basically a question of how Jekyll builds the links between the pages.
For context, my intended use case is developing a mobile app that will run web pages in a native wrapper. I've used phonegap in the past but this is something a little different, simpler. What I'm interested in is the ability to generate the pages using markdown.
Yes. Assuming you have Ruby installed (if you're on a Mac, it comes default) you can build a Jekyll project and it just spits out flat HTML files. You'd be fine working on the file:// protocol or setting up a virtual host and using http://.
Up to you!