**I am developing a site ,in which front-end is made with Angularjs **
Site name is http://limokit.com/limolog but the problem is that , it take minimum 30 seconds to open the site page on browser. How to reduce this loading time?
we used ngRoute to change the states , but do not getting the result which we wanted to achieve . We also converted all html and js as minified one but it is also not effecting the loading issue for first time.
At first glance it looks like you're loading individual js and css file separately. This can slow down the loading of the page greatly especially on slower connections. The common optimization to do here is to group all js files and css files together and serve one single js and one single css file on production. I don't know what you're using to serve the JS/CSS files but I use compressor for Django.
Also, to further debug this problem, it helps if you look at the network requests that your page is doing on page load in the Chrome inspector. You can glean a lot of information by seeing where your bottlenecks are on page load.
In your site you're having 63 requests and around 3MB size (uncached).
As mentioned in the other answer package everything in bundles. E.g. vendor.bundle.js, bundle.js and bundle.css and also minify these bundles.
I would use webpack or gulp for bundling.
For debugging you can look in the browser console networking tab at the lower right in Firefox you can see a link to load time statistics and also get a info about caching.
The following screenshot shows statistics to your site (left with cache, right uncached).
.
Ditch all frameworks and libraries such as Angular and Jquery and use JSvanilla. Plain javascript is much faster to run(around 160x according to many resources i read..i also know that from my own experience).
Frameworks makes your site crawl.
Related
I have been using Asp.Net Core MVC to load views and their content for several years. However, the trend seems to be pushing us strongly towards Single Page Applications (SPA). From my understanding, all html files are downloaded directly to the client. From now on we don't need to make requests to a server anymore in order to receive HTML, CSS, etc. because the routing of Vue (if configured properly) will serve the appropriate components.
All of this makes a lot of sense to me and seems like a good option. The thing I don't understand or am worried about is the loading time. Wouldn't it be extremly slow to download all files the first time when the website is called?
Deployment of react-snap on a CRA app has been mostly painless, giving huge page load speed boosts and requiring zero specialized configuration.
However, I'm seeing occasional issues with deploys (both locally and from netlify) only crawling a single page and then appearing done. Like this:
Normal result (maybe 50% of the time) means crawling ~50 pages and then everything else successfully finishes.
I've tried limiting concurrency to 1 without improvement. What other tools can I use to figure this problem out or configuration options can I include to fix this?
Figured this out: Webpack was setting PUBLIC_URL to the production domain, and new deploys were looking on that domain for a JS file that looked like main.1234abcd.js, using a hash of the js file for cache busting. This didn't exist on the production domain before it was deployed so loading the page failed and no links were detected.
Setting the JS links to root-relative URL (i.e. /static/js/main.1234abcd.js) loaded the JS correctly from the snap-created server and allowed it to be crawled correctly.
In addition, it was helpful to debug via the anchor crawling section in react-snap here: https://github.com/stereobooster/react-snap/blob/master/src/puppeteer_utils.js#L108-L119
I was taking a look in this nice Angular best practices repository and I can't find a proper way to apply this pattern of modularization.
The author suggest importing all the other modules in the main app module, that seems to be a great idea for me, but in my perception it also means loading all the js files of the system when loading the page for the first time "into" the main module.
I'm looking this wrong? I'm I right? If I'm right, is there a workaround to avoid loaind all the js files? Should I be worried with the loading time of the js files?
Angular application is SPA, the page is loaded only once, all relevant JS files should be loaded at the time when the app is bootstrapped.
Angular doesn't officially support lazy loading to load additional module files on demand, doing this by patching the framework may cause more troubles than it may solve.
Bundling all modules with bundling systems (Webpack, Browserify, etc) into a single JS improves loading time and results in better performance than loading JS files selectively.
My app is just 15 pages and does not contain a lot of code on the client side. The website is hosted with modulus from Amsterdam and I call it from Germany. It has an awful long loading time and I was the only one calling the website. The server stats:
154 requests transfered 9.14mb avg response 4.31ms
Most of the loading time seems to be vendor.css and vendor.js. As well as the css and js of the application.
What I already do:
load css first
try to load not needed js later like socket.io, google analytics but it is an Angular App so I need some JS in the head
uglify & minify my JS & CSS
concat CSS, JS to reduce requests
use sprites for small images which are used twice+
load diff. image sizes based on the screensize
use angular template cache for HTML (this adds a bit to initial loading time)
and probably some things I forgot to mention
Question 1
Why is there a gap in the waterfall, sure these are external scripts but it could already load the images in that time.
Question 2
Will loading the external JS from CDNs reduce a lot of the loading time?
I thought about s.th. like this: https://www.npmjs.com/package/gulp-cdnizer but I like it to have a similar prog. in dev and prod. Also my gulp processes are very complex, I really try to avoid restructuring too much there.
Question 3
How are things like gzip combineable with angular template cache?
Question 4
What else can I do to reduce the initial loading time,the loading time in the app is good.
because your site will not load until the dom will be load because this is a single page application, without angular the page have no idea what image to load...
YES! YES! YES!
my dom load was arround 11 secs... my js aggregated file was 850K.
with CDN my dom load was 2sec and the file was 250K (because good gzip)
YES YES YES! will help a lot!
use javascript aggregation to marge and minimize all your js to a single file (or 2 files).
if you have a lot of files, separate to 2 files, required and extra. what you need to load and what can be loaded later...
good luck :)
We're developing a website with AngularJS, and would like to have static HTML files for every AngularJS page for search engines.
The site is small and static, about 10-20 pages.
Is there any task in grunt that can generate HTML files based on Angular app? E.g. it generates /static/about.html for /#about page of Angular app.
I saw services and scripts like PhantomJS, but they look too complicated for our case. As the site is static, we can run the task every time we're going to publish any changes.
PhantomJS is indeed the way to go. However, there is existing tools that do mostly what you want.
This one is a good example:
https://github.com/cburgdorf/grunt-html-snapshot
This will run PhantomJS through pages of your website and generate an HTML version of it. It can be automated via Grunt.
The only caveat is that you have to enter manually, in the configuration, all the pages you need to index.
Is it ok for what you need?
EDIT: This is also a quite interesting and complete article about SEO friendly Angular applications: http://www.ng-newsletter.com/posts/serious-angular-seo.html
They provide a few alternatives depending on your needs