Web performance
Date 04/11/2014
Web performance is about making things in web preform better. It usually boils down making web pages load faster and use less resources such as CPU and network bandwidth.
Easiest ways to start working towards better performing web sites, is to reduce the amount and the sizes of any files. Concatenation, minification and compression can reduce the size of any assets considerably.
In most cases images are the biggest single file type served, however you will find just one task related them from below. Another recently grown media type is video, but due to the complexity, it is not in the scope of this lecture.
Please see a great presentation from Fluent 2014 conference by Ilya Grigorik, video and slides.
Further more JavaScripts and CSS files are usually minified from their development version, that contain additional information such as usage examples and other comment, are removed along with any unnecessary white space. Some minifiers also change the variable and function names so that they become one or two character long.
Node.js based minifiers such as UglifyJS are clean-css among the most popular and also have task runners available.
Other ways for making better Web performance can be methods such as removing duplicate code, with jsinspect for example.
The tools originally designed for Web performance can be used to benefit a Node.js developer.
Tasks for the day
Given that a popular npm module is downloaded several thousand times in a day, evaluate how much bandwidth
can be saved on a one day interval if the given JavaScript is minified
Find a popular npm module
Calculate average download count for a single day based on one week
How big is the module and thus how much is being downloaded every day from npm registry
How much difference would be with a minified version
Write all this briefly in
hello-node-js
repositoryREADME.md
, under a title "Minified npm packages"
Take a look at the project called Sitespeed.io
Create a similar tool that downloads a web page and measures its weight
Evaluate which low level tool would be the most helpul, perhaps
phantomjs
orrequest
Write a script that downloads HTML and all JavaScript files of a given URL
The script should be added to the
hello-node-js
repositoryRun with a command
node measure-site.js URL
, orphantomjs measure-site.js URL
It should then output the file sizes of the given downloaded files
Optional: compare original file sizes with ones minified locally
Optional: Find an open source web site which is nice, and measure its Web performance
The site should have a GitHub repository
Create an issue with at least one suggestion for making the web site perform better
Link the issue in the list below
Issues for better Web performance
Links related to the lecture subject
Examples for tasks
2. Download and measure
Once HTML is downloaded, it should be parsed for finding the JavaScript element, namely script
.
A HTML parsing tool called cheerio is used in the below example, as well as request for downloading the assets:
Before running the script, dependencies should be installed:
Running the script:
Should provide something similar to:
Last updated
Was this helpful?