Chrome Extension - Optimizing my page load time - javascript

I am building a chrome extension with angularJS. The idea of the extension is to replace the default google page when a user opens a new tab with a simple app.
Therefore, it needs to be fast. I am trying to optimize my page load time. I have minified my javascript and I load all the pictures in async mode.
When I use the chrome dev tools to see what's delaying my page, I find a gap in the waterfall chart. I believe it is due to my js code which is being executed by chrome.
How can I make sure the DOM get printed on the screen while the js is being executed?
Is there any good tool/resources to see how I can optimize my js with regards to my page load time?

Related

Headless Chrome: Run a webpage from command line without launching it?

I have a webpage that uses D3, canvg and gif.js to generate GIFs of time-lapse maps. The page generates 3,000 gifs, one at a time. The page is not meant for public consumption.
While it works pretty well to just open this page and download the GIFs, it tends to be asking a lot of the browser. So I'm curious if there's a way to run a page headlessly from the command-line without actually opening it, but running the full app to render the page.
Why not just use Phantom from Node, you might ask? For starters, Phantom is hard! But more importantly, I've never had complete success using Phantom or any other client-side browser engine, like jsdom, to completely render SVGs exactly right.
So my question is basically whether it's possible to use Chrome instead of Phantom and launch a page from the command line that executes the page as if it was merely opened in the browser but without actually opening the page.
Thanks!
You could use electron. The advantage would be you could very easily save your generated gifs, something you can't do with Chrome unless you also run a server.
Otherwise there are some docs for headless chrome here

Large browser parsing time after loading CSS's and JS's

I'm trying to decrease page loading time of a project I'm working on. At first the team I'm working with tried to optimize Apache/Symfony2/Postge but finaly in Networking panel of Chrome's Dev Tools I've found a large "gap" after loading all css and js files. The "gap" disappears when script files are removed. If I leave only jquery.min.js (no other libraries or scripts loaded) page still loads for aprox. 1.5s.
Developer tools doesn't say what happens during this period. I think this might be when browser parses and interprets CSS and JS but I need decreasing of DOMContentLoaded time. Any suggestions?
This is my first post and I need 10 reputation to post images, so I've uploaded screenshot of what I'm talking about here:
http://tinypic.com/m/imqw0n/1
P.S.: Screenshot is taken on "average" PC. The same test on my personal laptop (AsusG750JZ, 8-core CPU, 16Gb RAM, nVIDA 880m) shows very different results - load time is about 1.5s instead of 5.2s. Unfortunately I can't make everyone use the web app on hi-end ;)
P.S.2: Async loading of JS is not an option. I've tried RequireJS but I didn't like the results. It was clumsy because of all scripts dependencies.
In DevTools, go to the 'Timeline' tab. https://developer.chrome.com/devtools/docs/timeline

PHP:Javascript loading even after removal

I'm analyzing the running time of various components(CSS and JS) using Yslow tool on my PHP website(localhost).
On running Yslow, I get the following components:
I have already deleted the file 'bootstrap-datetimepicker.min.js' from my project, but still it's loading. Why so?
Load the website from within an Incognito window (CTRL+SHIFT+N).
You may very well wish to disable cache while Chrome's webdev tools are open, too.
See the guide here:
https://developer.chrome.com/devtools/docs/settings

My images are loading too late, why?

I have a few js and css files that loads on the head. After the last js file there is a gap (on Firefox) of 1311ms until the browser starts to load the images.
Firebug doesn't show any status on this blank space.
What does it mean? Why are my images loading so late?
All images on cache, the gap is still there...
Full no-cache load:
You have a 300kb JavaScript file. That's a lot of JS to parse and possibly execute. Try the profiling tool in Firebug or Chrome to see what JavaScript is being run on page load.
there some maybe reason.
Those static file in many HOST, these are not in the same HOST.
Your browser is resolve these file slowly.
A javascript file in these file spending much time.
you can use some web preformance tool, like Yslow, chrome console .. to analysis this problem.
If we're talking img tags, then the delay might be the time it takes the browser to render the page. I'd have to look for a reference, but I recall that the browser doesn't start to fetch images until it has rendered the page. You could test this out by adding some profiling that shows when the page has completed rendering, and compare that to the time the first image starts loading. I have profiling inserted in my pages that inserts timestamps as the very first statement/element (inside the head), and the very last (in the body). Comparing the two gives you the approximate render time.

How do i find out what is slowing down my page load in IE7

http://shanamccormick.com
The page loads all the images and then says "(1 item remaining) Waiting on http:// shanamccormick com..." How can i see what it is waiting to load here?? and why does it take sooo long?
The index.html file uses a couple small internal JS and one external JS located within my website (jquery.min) The size of the external JS file is 54kb.
IE8 has a Javascript profiler, like Firebug for Firefox.
But I think you need Fiddler to profile the performance of the HTTP request/response.
If you want the Javascript developer tools (including profiler) I recommend moving to IE8, but if you can't,
IE7 has downloadable dev tools, like IE8's built-in capability.
I have a few solutions that might help. I learned of these from another question I asked earlier:
Firebug Lite is a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named "Firefox". Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.
WebWait is a website timer. Use WebWait to benchmark your website or test the speed of your web connection. Timing is accurate because WebWait pulls down the entire website into your browser, so it takes into account Ajax/Javascript processing and image loading which other tools ignore.
Also, the IE JavaScript Real Performance Tester can test your scripts.
Hope these help!
The page doesn't exist anymore? or is it: shanamccormick.com ? misstype?
Anyway I've found that googles IE8.js (for IE7 and less) (https://code.google.com/p/ie7-js/) takes up to 1 minute to load (on a computer from that time) every page load... could that have been the problem?

Categories