AngularJS 1: Above the Fold rendering - javascript

currently I'm optimizing my AngularJS site and I'd love to reach those 100/100 from Google page speed insights. Do you know a good pattern for AngularJS to have good above the fold speeds for multiple page entry points?
E.g. Assuming there are multiple views which do not need lots of JavaScript executed (besides routing) for their above the fold content.
The only idea I had was stuffing the index.html file with the content of these above the fold elements and then do some routing in an inline script tag right in the index.html file, but this doesn't sound maintainable to me.
Another possibility could be a gulp task that assembles an index.html file - if that's a thing, I assume somebody has done this before. Have you heard of something like this?
Any ideas? Has anybody ever done this, or should I just accept my 83/100 and get on with my life?
Best and thanks for your suggestions!

I don't know much about how the Google Page Speed work but definitely you can try lazyload.js. All the js files that are not needed for the index.html can be loaded later and the page load will be complete in minimum number of files being loaded. Did you already try that?

Related

All Javascript in one file compressed or multiple files

I am compressing all of my files on the go, so it's easier to update rather than having to decompress. I have around 10 JS files, in total around 2,000 lines maybe more, would it be better to put them all in one file and compress it, would it speed up my website, or should I just leave it in individual files, and compress each?
I'm assuming this is for web development.
If all of your scripts were created by you, and you suspect each script will be needed for every page on your site, you should concat / compress them. The first load will take longer, but the scripts will be cached.
If all of your scripts were authored by you, but each page does not necessarily need all 10 of your scripts, you should consider lazy loading them on demand.
If any of those scripts were not authored by you and can be found on a CDN (like jQuery), then link the scripts to a CDN, as there is a chance users will already have them cached. For the remaining scripts, decide if you should lazy load or concat / compress them all.
What you shouldn't do, however, is load all 10 of your scripts individually on each page. That would just have the user's browser send more requests than needed.
It's all about trade-offs, and there isn't a 100% correct answer. Good luck :)
--edit--
You said "on the go". If the content of your scripts change, then you wouldn't want them to be cached. In that case, lazy-loading would probably be the answer.
--edit 2--
If you haven't already, you should really take a look at using Grunt to concat and minify your js files during development. If you decide to go that route, take a look at grunt-contrib-watch.
It is often a good idea to keep the number of files the browser needs to request to a minimum.
The browser may have to open one connection per HTTP request, but if you put all your JavaScript code in one big file it will only have to do one request and thus only one connection needs to be opened to fetch your js code.
It depends on how much of that 2000 lines you are using for different pages. If the file is like a library of which most is used in your distinct pages, then it might actually make little to no difference in terms of loading speed. But if only a part of that file is being used in each page, I would assume separating would be smart as less will be needed to load per page.

OpenCart PageSpeed - Eliminate render-blocking JavaScript and CSS in above-the-fold content

I've improved many issues that Google pagespeed tool reported and now the main issue is the following:
Eliminate render-blocking JavaScript and CSS in above-the-fold content opencart
I am using OpenCart and didn't understand exactly how to fix the problem, and how exactly prevent from things to cause problems/dissappear/etc, after making this change..
Do you have a suggestion of how you deal with it? A specific JS that solved it? A tutorial that will clear things up for me?
I've tried a few on Youtube and Google but didn't understand exactly how to approach it.
Currently this is the site's status and last report from Google:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fswing-and-play.com%2F&tab=desktop
I'm not familiar with OpenCart, but basically what this warning means is that you have many js/css files loaded when the page loads.
this is blocking page rendering until all js/css files are loaded. In order to deal with it you need to do several things:
Concat js/css files into 1-2 files and minify them - that way you reduce the number of http requests and loading time of the page.
if possible, move js files to the bottom, right before the closing body tag.
well, you should first put all javascript at the end of the html file, just before the closing BODY tag. Failing to do so means that the browser will wait for the files to be downloaded before proceeding with rendering the screen, thus provoking a longer waiting time for the user.
Then, you should combine them all to have just one file, thus only one http request.
Then, you could minify them to save extra kilobytes.

Send Information inside a .png image then extract it through javascript?

After searching around in Google for a while I have not had any luck or guidance in my question.
I want to be able to load up a website using javascript, ajax, in order to reduce the amount of requests needed by the server from the client. My goal is to embed/encode data within an image such that only the client needs to request this image through ajax call, and then be decoded to find the js, css, and other files needed. Then the js, css and other files will be inserted into the DOM.
If I can get the above to work then I could have a lot of flexibility on how my webapp is loaded and be able to notify the user how close the webapp is to being ready for viewing.
Currently my problem is that I cannot find how I would encode the data within an image.
Even if this is not the way to be going about serving up a webapp my curiosity is getting the best of me and I would just really like to do this.
Any guidance or pointers would be greatly appreciated!
Also: I am learning Python so if you know of a python module that I could play with that would be cool. Currently i'm playing with the pypng module to see if this could be done.
To be frank. Don't do that.
The brightest minds on earth use other methods to keep the number of requests and response time down. The most common technique for minimizing the number of requests is called Bundling. In short, you just copy'n paste all js files after each other into one big js file and all the css files into one big css file. This way you need to download two files, one js and one css. Better than that is usually not worth the trouble.
To further keep response times down you usually minify your js and css files. This is a process where all white space, comments, etc are removed and internal variable names are made as short as possible.
Finally you can serve both js and css files as gziped files to further reduce the file size to transfer.
There are many tools out there that does both bundling and minification for you. Google and pick one that suits your other tooling support.

jQuery loading or appending scripts on specified page

Im a bit clules on the following situation, i am building a site, and right now all my js functions are in one js file, yes i know its a very bad idea.
What i am unfamiliar with, when i was checking other sites, i saw they include jQuery in the header and in the footer, different scripts are loaded.
I am unfamiliar, and please be nice i am a bit of a beginner.
Do people use some kind of plugin for this? or they include every script manualy in the specified file at the buttom?
I would like to break the scripts to parts, and not to include everything in one file.
What i mean by this, some functions only required in the profile page, some in the settings, and some in the login.
If someone could please give me some info about this would really help me.
Thank you
That's the sort of thing that one would use RequireJS for.
http://requirejs.org/docs/start.html
It will allow you to setup dependencies for your different JS files. These dependencies would then be loaded as needed.
Do people use some kind of plugin for this? or they include every script manualy in the specified file at the buttom?
Well, usually websites are made in PHP from individual components. Think of it as bricks. Some of these bricks contain JS code. When they are put together you end up with some pages having unique parts of javascript code in different places. It's not particularly good, but can dramatically simplify and speed up development.
I would like to break the scripts to parts, and not to include everything in one file.
Usually you want to include your JS with <script> tags in website header. If for some reason you'd like to dynamically include external JS then you may try to use this simple function: include();
i am building a site, and right now all my js functions are in one js file, yes i know its a very bad idea.
It's bad from development point of view, but when it comes to deploying the website it's a very good habit as it can decrease loading time of your website (and the loading time is one of most essential things). There are even applications compiling multiple .js files into a single minified file in order to get best performance.

HTML5 Boilerplate Page-specific Javascript Placement

Question
If you use a single javascript file to hold all scripts, where do you put scripts that are for just one page?
Background
This may be a matter of opinion or "best practice" but I'm interested in others' opinions:
I'm using the html5 Boilerplate on a project. They recommend you place all javascript in a single file script.js for speed and consistency. Seems reasonable.
However, I have a bit of geolocation script that's only relevant to a single page, and not others. Should I break convention and just put this script on the page below my calls to the javascript libraries it depends on? Just put calls to the relevant functions (located in the script.js) file, below the links to the libraries they depend on?
Thanks!
The good folks at html5 boilerplate recommend putting all of your javascript in script.js so that the browser will only have to load that one file (along with the others that h5bp uses) and to allow caching of that file.
The idea is not to get caught up in the "recommended" way, and to think about things related to your own applications.
This geolocation file is only going to be used on this one page, right? It will never be used anywhere else.
The script.js file will be used on multiple pages.
Well, then it wouldn't make sense to put a "whole script" that will only be needed on one page in the script.js file. You should make the file external and call it separately on the page that it is needed. This will keep you from bloating the script.js file for functionality that may never get used by that user.
However, if your "whole script" for the geolocation functionality is pretty small, then include it in script.js. If it doesn't add to the speed of the download for that file, then it makes sense to include it there.
The gist of all of this is, What is the best trade off for my application?
These things we know to be true:
cached js files are good
fewer files to download are good
smaller files to download are good
maintenance is important
Once you think of these things in terms of your application, the decision making becomes a bit easier. And remember, decisions that trade off milliseconds are not going to make much of a difference in your user's "perception" of how fast your page is.
The browser will only download the .js files once (unless something is happening to discourage the browser from caching). So if you expect all of your users to hit the one page that uses geolocation sometime during their session, then you might as well give it to them early. If you expect maybe a tiny percent of your users to eventually hit the geolocation page, then maybe you might want to split them.
Split it out into a separate .js file so that it can be cached. Then reference both external .js files from your page.
I think you should put it in a separate file. Putting all the scripts in one single file could cause unexpected behavior and conflicts. I like to have one script file for the javascript that all pages will use containing plugins, helper functions, formatting functions etc. And then create one separate js file for everything that is relevant just for each page.
If you still want to have just one js file in the browser you could take advantage of one of those utilities that combine multiple js files into one.

Categories