Breaking Bad - You can make Fast Web Pages
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48783 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Web pageSoftware developerTask (computing)Sound effectInternetworkingSet (mathematics)Home pageInstance (computer science)InformationConnected spaceOrder (biology)Expected valueAddress spaceSearch engine (computing)TouchscreenLink (knot theory)BitWebsiteWeb pageWeb 2.0JSONXMLUML
01:58
Content (media)SimulationSoftware developerMedical imagingBand matrixSpacetimeMultiplication signBitMoving averageContent (media)Barrelled spaceProgrammschleifeWeb 2.0Process (computing)Type theoryWebsiteVirtual machine2 (number)MeasurementMusical ensembleMultilaterationComputer simulationSpeech synthesisComputer animation
04:59
Software developerEvent horizonOrder (biology)Venn diagramPrime idealElement (mathematics)WebsiteHome pageGoodness of fitThumbnailComputer animation
05:43
Software developerVenn diagramPlastikkarteHome pageProcess (computing)SpacetimeStructural loadCuboidWebsiteSheaf (mathematics)BitInformationAreaComputer animation
06:36
Software developerEvent horizonOrder (biology)Home pageInformationBitScripting languageCASE <Informatik>Observational studyFlow separationSubject indexingGoogolComputer animation
07:34
Limit (category theory)Dependent and independent variablesSource codeControl flowFrame problem2 (number)Closed setWebsitePoint (geometry)Limit (category theory)Sound effectPhysical systemNumberInformationMultiplication signHome pageResponse time (technology)CASE <Informatik>Observational studyFlow separationBitTouchscreenProcess (computing)NeuroinformatikDependent and independent variablesGroup actionStructural loadHidden Markov modelComputer animation
10:10
Software developerConvex hullSoftware testingContent (media)NumberAreaWebsiteWeb pageWeb browserRevision controlHome pageGraphical user interfaceSoftware developerMultiplication signBitCondition numberRight angleWeightMathematical optimizationPlug-in (computing)Computer animation
11:43
Software developerConvex hullLandau theoryFinite element methodQuantumHome pageNumberRight angleMarkup languageClient (computing)Computer fileCASE <Informatik>QuicksortGraphical user interfaceMultiplication signWeb 2.0Medical imagingDifferent (Kate Ryan album)Heegaard splittingMathematicsDomain name2 (number)Web browserDomain nameStapeldateiServer (computing)Maxima and minimaComputer animation
14:55
Software developerTime domainDomain nameCalculationMultiplication signCounting10 (number)Different (Kate Ryan album)Scripting languageDirect numerical simulationIP addressWebsiteWeb browserComputer animation
16:02
Markup languageScripting languageContent delivery networkJava appletPoint cloudComputer-generated imageryCross-site scriptingComputer fileMarkup languageSubject indexingIntegrated development environmentContent delivery networkComputer fileMedical imagingWebsite.NET FrameworkBitHome pageContent (media)Web 2.0Server (computing)NumberMaxima and minimaForm (programming)Set (mathematics)Cloud computingSpacetimeProcess (computing)Weight
17:20
Software developerMaxima and minimaComputer fileNumberType theory1 (number)Selectivity (electronic)CASE <Informatik>Home pageProcess (computing)Compass (drafting)Scripting languageComputer animation
18:19
Computer fileScripting languageJava appletCross-site scriptingAsynchronous Transfer ModeCodeError messageException handlingFunction (mathematics)Software testingCodeComputer fileInstance (computer science)CASE <Informatik>Variable (mathematics)Revision controlNumberServer (computing)Functional (mathematics)Web 2.0Level (video gaming)CodeFraction (mathematics)BitCartesian coordinate systemMathematicsWebsiteSpacetimeLibrary (computing)Cache (computing)Home pageAsynchronous Transfer ModeLine (geometry)Error messageSoftware bugScripting languagePrice indexProcess (computing)ChainCrash (computing)Java appletFerry CorstenMusical ensembleContent (media)
24:54
Ring (mathematics)Scripting languageJava appletCross-site scriptingTask (computing)Mathematical optimizationComputer-generated imageryReduction of orderData compressionWeb browserLocal ringVariable (mathematics)Server (computing)NumberComputer fileControl flowWeb 2.0INTEGRALDefault (computer science)PixelTask (computing)Scripting languageProjective planeData compressionMedical imagingVisualization (computer graphics)Clique-widthOpen sourceBand matrixResultantSoftware testingWebsiteQuicksortData structureMaxima and minimaBitProcess (computing)Parameter (computer programming)File formatSpacetimeMultiplication signMathematicsoutputMathematical optimizationKnotExtension (kinesiology)Graph coloringDimensional analysisLine (geometry)Revision controlMarkup languageDescriptive statisticsWorkstation <Musikinstrument>Computer-assisted translationOrder (biology)Disk read-and-write headMatching (graph theory)State of matterMixed realityBit rateFile systemMetropolitan area networkPressureGroup actionComputer animationLecture/Conference
31:28
Data compressionMassIRIS-TMedical imagingTask (computing)Line (geometry)Computer fileNumberBitParameter (computer programming)Level (video gaming)Series (mathematics)Data compressionCASE <Informatik>Staff (military)Computer hardwareGame theoryComputer animation
32:47
Computer-generated imagerySoftware developerCombinational logicMedical imagingClique-widthSemiconductor memoryNumberBlock (periodic table)Position operatorGame theoryMultiplication signComputer hardwareVirtual machineWeb browserWebsiteSequencePointer (computer programming)Menu (computing)Open setState of matterConstructor (object-oriented programming)Computer fileBitMarkup languageNormal (geometry)Shape (magazine)AreaForcing (mathematics)Metropolitan area networkSet (mathematics)Ferry CorstenClosed setProcess (computing)WeightComputer animation
36:01
Computer-generated imageryExecution unitMaxima and minimaSoftware developerMaß <Mathematik>WebsiteLink (knot theory)Home pageClosed setCASE <Informatik>NumberComputer animation
36:52
Software developerNumberPosition operatorComputer fileMixed realityHome pageComputer clusterExpert systemComputer animation
37:38
WebsiteSoftware developerExecution unitScripting languageCodeMeta elementSynchronizationStructural loadJava appletLibrary (computing)VolumenvisualisierungWebsiteCodeMultiplication signDimensional analysisProcess (computing)Scripting languageWeb-DesignerHome pageJava appletBitSheaf (mathematics)Graphical user interfaceDifferent (Kate Ryan album)Order (biology)Connected spaceComputer fileForm (programming)Disk read-and-write headStructural loadTouchscreenWeb browserWeb 2.0Block (periodic table)NumberInformationGoodness of fitLibrary (computing)Band matrix1 (number)MereologyCASE <Informatik>InternetworkingRule of inferenceThread (computing)Closed setMarkup languageRight angleGreatest elementDescriptive statisticsDirected graphLine (geometry)Mathematical optimizationFerry CorstenGoogolMusical ensembleRow (database)Term (mathematics)Computer animationLecture/Conference
46:41
Software developerMereologyRevision controlWebsiteMetric systemHome pageNormal (geometry)Computer fileMathematical optimizationComputer animation
47:39
Software developerBookmark (World Wide Web)WebsiteWebsiteUniform resource locatorHome pageVirtual machineRow (database)Software testingTraffic reportingCASE <Informatik>Server (computing)Arithmetic meanProcess (computing)SpacetimeWeb 2.0Task (computing)Speech synthesisSound effectResultantNumberMathematical optimizationInternet forumScripting languageDifferent (Kate Ryan album)Metric systemQuery languageEmailFluid staticsComputer animation
50:00
Software developerCASE <Informatik>Right angleTask (computing)NumberWeb 2.0Mathematical optimizationServer (computing).NET FrameworkMatching (graph theory)SummierbarkeitPlug-in (computing)Revision controlMetric systemFrictionHome pageWeightComputer animation
50:56
Software developerExecution unitGamma functionMUDWeb pageSpacetimeDescriptive statisticsNumberCASE <Informatik>Process (computing)Home pageUniform resource locatorParameter (computer programming)Computer fileCache (computing)Metric systemWebsiteRevision controlResultantGroup actionInsertion lossSound effectComputer animation
51:50
AdditionBookmark (World Wide Web)WebsiteSoftware developerBitResultantMathematical analysis2 (number)Metric systemWebsiteRevision controlMessage passingChecklistMultiplication signHome pageNumberWeb 2.0Ferry CorstenTotal S.A.MereologyStructural loadRule of inferenceThumbnailSet (mathematics)Internet forumComputer animation
53:45
ThumbnailRule of inferenceWeb browserScripting languageMaxima and minimaSoftware testingMedical imagingComputer fileWebsite2 (number)Scripting languageDimensional analysisMultiplication signSoftware testingProjective planeRoundness (object)PlotterBitRight angleMaxima and minimaMathematical optimizationComputer wormVisualization (computer graphics)Code division multiple accessCASE <Informatik>Computer simulationWeb 2.0Computer animation
55:29
ExpressionComputer clusterOffice suiteInstance (computer science)
Transcript: English(auto-generated)
00:06
Thank you and welcome everybody. Well, my name is Don Wiebeje and I'm a technical evangelist with DevExpress and I got a very nice start of 2016 because I got awarded as Microsoft MVP as well
00:22
Yeah, and I'm Got to start with this first session basically, so when we navigate to a web page, we have certain expectations We want the page to load as quickly as possible, and we don't want to be staring at a blank screen wondering if our internet connection has died again and
00:41
Yeah, we want to be able to find the information or perform the task the page is providing as quickly as possible And it is in fact another way to look at web pages. It's merely a conduit with a set of user tasks For instance if we are on the news page
01:01
We are taking a peek at the headlines and whenever something catches our attention We're gonna click on the link drill down and get that information as fast as we want It could also be like a search engine like Google or Bing. Well Scott has been talking about it a bit Yeah, we want to search something and we scan and select and we want to get to that information as fast as possible
01:27
It could also be a website where we have ordered some stuff, and we want to get it to be shipped at home So we need to enter our address information before the actual order can be shipped out
01:40
and yeah, basically That is something what my team what my talk is about it is it is going about how to ensure the best experience for the user on your website basically and And yeah, it is something that we
02:01
That we call perceived performance And it is not necessarily something Measured in speed in seconds or whatever but there are a couple of things that we can do to give this user a very good impression on how this is working and basically this performance is
02:23
Yeah, basically Designed It's come it's it's a two-step process. So it is about the design and the content Which is something that we will not be Using too much because yeah
02:40
There will probably be a designer who has made up to design the type of crop the typography the relationship between the white spaces images etc and then There is the raw speed which is a bit more interesting to us And that deals with downloads Bandwidth rendering speed and all that kind of stuff
03:03
So I said, I'm not a designer so I will Imagine that we will get this design and the content from somebody who has Studied for that particular purpose and we will be dealing with that last step So to give you a good example of the perceived performance
03:25
Web performance is basically like the estrogen simulator. Does anybody know what it is? And Does anybody has ever been in an estrogen simulator? This is what it looks As everybody as any of you ever been in such a thing
03:45
Well, it's actually a really cool thing It's it's a small like portable cinema and you you get in with a couple of people and most of the times they will Show you a movie about a rollercoaster ride or an X-wing fight in the galaxy somewhere and you have the impression that you are making
04:05
Barrel rolls and loops and I don't know whatever but this whole cabin is just moving Slightly and it will give you the impression if you're inside That you're actually hanging upside down while this thing is not going upside down. So you're being fooled with
04:22
This machine and you think that you are like a superstar pilot, but you're just sitting in a chair and Yeah hobbling a bit So this is this is an example of the perceived performance that I'm going to talk about And basically, yeah
04:42
It is it is something I'm going to break bad with some bad habits that you might have picked up And I'm going to show you a couple of things What you can do on existing sites, but also things that you can take into consideration when creating new sites
05:00
so There are a couple of guys who have mastered this art of perceived performance on websites as well And this is one of the sites that I'm going to show you. So let me switch over to my browser and If you take a good look I'm gonna reload this page. And if you take a good look at this page
05:20
particularly at the size of the thumbnail of the scroll bar You will see that it's getting smaller I'll do it again. So pay a good attention Yeah, you don't see it now anymore but what basically happens on this page is
05:44
This page is loaded in a two-step process and That means that basically the banner and the navigation is loaded instantly basically and all the stuff Which comes below the banner is? loaded in a second step So the guys of Amazon has studied the behavior of their users and it is perfectly fine
06:07
It is scenario to first load the first Step the first the top section of the page because most people will go to the search box anyway And they will or they will go to the departments And that stuff is shown instantly and the rest can go a bit further
06:23
So yeah talking about perceived performance this site appears to be very quick But in the second stage a whole bunch of shit is being loaded in By JavaScript or whatever so you can see there is a whole Quite some information there
06:40
But it is not really a big deal because most people will stick on the top of this page anyway So That is there's a nice example of how you can do certain things obviously you need to be aware But that is a bit of a different story if you are loading in information with JavaScript in a second step
07:05
That will probably not be Indexed very well by Google, so that's another discussion, and that's also another talk But yeah, that's that's basically something you should be aware of so the information that they want to be indexed are the offers and the stuff
07:21
That was on the top page and the rest is probably indexed on some other page by Google anyway, so Something to consider to think about well there has been several case studies about
07:40
response time limits and One of the guys who has done quite a number of Case studies on all kinds of subjects is Jacob Nielsen And he also studied this response time effect And he came to the conclusion that there is are basically a number of items or basically there are
08:03
three time frames Where you can draw some conclusions on it? and If your page loads within 0.1 seconds, which is really quick It gives the user the feeling of instantaneous response and that means that
08:21
the user has the Impression that the computer responds to his actions so he clicks and something happens immediately So the computer is actually listening to the user and that is a really good thing though It is very difficult to get these kind of numbers If it takes one second to load the page
08:42
It will still not be a problem because it will keep the user on the screen But the user has the impression that okay I click something and a whole bunch of things are going on and there is a whole process in the background It's not a problem because it will still
09:01
Wait for that one second and and do something if your site or your page takes ten seconds to load Yeah, that's going to be a bit of a problem And I mean if I go to a website and I have to wait for ten seconds I think after like six or seven seconds. I start thinking like hmm
09:25
Maybe I'll check out some new episodes of Netflix later today, or yeah there was this other side which I might want to check out and I start checking it out immediately while the page is loading and You're you'll be distracted from this site And with a little luck you will get back to the site like oh, yeah
09:43
I was watching I was checking out that side, but maybe you'll never get back so ten seconds It's just a big a big no Though sometimes it's pretty difficult to accomplish Something to complete within ten seconds especially if you have all back-end systems where you need to get information from
10:03
Stuff like that, but yeah ten seconds seconds basically is a no-go for for a website I'll now talk about What is involved actually in? loading up a web page and also
10:20
Which steps are? Being dealt with by the browser So you will have an idea on what's going on and on which particular areas you need to focus and what can be improved or? Fool around to do the perceived performance So for that I've put up a little test site
10:41
and don't Pay too much attention to the content But it is just to show you and I obviously put a number of things in here which have not optimized a couple of things are optimized, but I Put a couple of things in to give you a good impression on how this stuff works So I've got this little website here. We are only going to watch this first page
11:04
and I Will be using Firefox with firebug Which is a really nice plug-in and these days the other browsers like Chrome and ie they also have like the developer tools Where you can measure these kind of things? I'm using firebug in this scenario because I'm used to fire back for the very first version of it, so I
11:27
Might be able to show you some some other tricks with chrome as well because they've got some nice things as well But that depends a bit on the time anyway, I'm going to activate firebug right now and
11:41
Let me get back to the net tab because that is the most interesting one I'm going to reload the page And what you see here Is actually everything which is loaded in? Which all assets and all resources that are needed for this particular page to load and?
12:04
as you can see it is quite a bunch of of items and there is like CSS JavaScript images the whole stuff and There are basically a couple of interesting things to mention here You see that the first the page itself so the markup is loaded pretty fast. It's in like two
12:24
204 milliseconds the page has been loaded in What you then see is that a number of resources, so let me point it out So we've got a number of resources which are loaded in Right behind the home page and what you then see is a number of things are being
12:44
Queued up, and if I go down You'll see more items being queued up They are not downloaded yet What you actually see is that you have like a sort of a cascading thing going on with With with loading those resources, but what you also see is that
13:06
all this Sequential resources that are loaded up I load it up in batches of six so you see these items and
13:20
Then you get another six, and if you scroll down you get again six resources loaded at the same time and This is a convention which is used with all web browsers, so it is used with Firefox It's used with Chrome ie Safari every web browser is doing this and what it means is it will load
13:41
six resources from the same host or the same domain name at the same time and the reason that they have Built this in is to yeah relieve the web server so it can handle Other clients as well and in most cases. This is not really a problem
14:01
So it will take the the batch of the next six items And it will load it afterwards and in the meantime it can serve like thousands of clients by all giving a max of six resources so You might think like okay, but you said six six resources from one domain name, so
14:22
I've got like how many items I think like 45 Got like 45 or 46 requests, so let's make it 60 So if I set up like 10 subdomains different host names I'll split all those files over those subdomains. I'm gonna make changes to a markup
14:43
Hey, it's gonna be served in all in one go And I'll save quite some time Well, you're partly right and actually that phenomenon actually has a name We call that Domain sharding and it is something which is used pretty much
15:04
But the calculation which comes with it doesn't count So it doesn't mean that your site is way faster because there is something else which pops up when you're using domain sharding and That is for all the subdomains that you are using
15:21
The browser needs to do a DNS lookup to get the IP address of the host and to get the resources from that IP address That also takes some time so There is a trade-off in using this kind of stuff And there is actually like a recommendation if you want to go for domain sharding if you're gonna go for tens up domains
15:42
You're gonna lose time anyway And it doesn't make much of a difference the only difference that it will make in that scenario is that you will have to Make your deployment script in a way that it needs to deploy to different hosts or whatever. So That's going to take some time as well. So the recommendation if you want to go for domain sharding, which is absolutely fine
16:04
is try to use about like three host names max and That will be like the main host for the markup your index that HTML or your your your Web forms page. I don't know whatever
16:21
Use a CDN for JavaScript files, I'll get to that a bit later as well And you might want to use a cloud host for images especially if you are having a lot of images and stuff on your website a cloud host Might give you some additional benefits as well because those images don't tend to change that often
16:42
so those Servers are very optimized in caching those static content those static files and they will deliver Those images probably faster as you will put it on your set on your dotnet environment basically so this is something to to think about another way of getting your page to load faster is
17:09
By reducing the number of requests you saw that we were just doing 46 requests for this one page and there were like a whole bunch of JavaScript files as well So if I switch back to my Firefox
17:22
You can actually Select the type of files that you want to have so if I Now have about 20 JavaScript files smaller ones and bigger ones Well, if I would put them all in one JavaScript file that will save me 19 requests
17:41
That sounds pretty cool Same goes for CSS I've got like a whole bunch of CSS file 17 to be precisely well It would be cool if I dumped them all in one CSS file I've got one request so my page will load faster in that case
18:00
well with the CSS that is a very good opportunity to do so and We'll get to a number of things later on on how you can achieve that With JavaScript, there are obviously a couple of things to think about concatenating and
18:20
What happens is Basically with the JavaScript files in particularly you might have a caching issue. So for instance You are using a library like jQuery Like from a specific version and it might be the case that Another side that you visited in the past is using the same jQuery file as well
18:44
So if you would get that file from the jQuery CDN, it might be that it is already in the cache From the previous site that you visited so that will save you a download so that will speed things up So I would not throw everything in one big chunk of JavaScript file
19:02
Because then you will not use the benefit of caching JavaScript files from CDN's Another thing is well, this is actually what I was just mentioning Another thing is that if you have like this big JavaScript file with jQuery in it and I don't know maybe a couple of other libraries in it and your own
19:23
JavaScript and you're gonna make a small change because there was a bug in your JavaScript You have to demand your user to download that whole file again So you have to make sure that you have set everything correctly on the web server that the web server knows that the file has expired
19:41
but it will be a waste that if you only changed a small fraction of code and The end user still should download the entire one megabyte maybe two megabytes of JavaScript again because of a small change So that is something why you can't Just blindly put everything in one JavaScript file because then you will get some delays as well
20:05
and The last very important thing why you can't throw everything in one JavaScript file is because of the strict mode feature Has any of you heard of JavaScript strict mode?
20:20
Not everybody. So let me explain what that does As you might know I mean if you want you can create one big pile of Crap with JavaScript and if you take a look at your same code like two weeks later You don't know what the hell is going on So for that
20:40
ECMA has introduced a strict mode feature and You can turn on the strict mode feature and what it will do it will basically force you to write better organized JavaScript and you can turn that on by inserting this exact strict mode Use strict into your code. I'll show you in a minute how you can insert it
21:05
And what it actually does it will catch a number of common errors You will also need to declare your variables before you're going to use them So that is something which I personally like very much. So you'll not be able to Get a very use a variable which was already used in another scope and it will mix up some stuff and you will have
21:26
Some weird things going on that can yeah, you can still do that, but you will be forced to at least declare the variables If it encounters a number of unsafe things like for instance very important if you are using the evil
21:43
method the JavaScript evil that is not going to work with the use strict because that is Yeah dangerous codes basically And it will also disable a number of other Yeah, dodgy features basically, so it will force us to write better organized JavaScript and you can actually use
22:06
Put the use strict on two levels of JavaScript You can apply it to a whole file and you can apply it to an individual function and how does this work? Well, basically I've got a bit of JavaScript code here if I use the use script on top of my file
22:24
everything in the file should be strict compliant if I only have a small piece of code inside some function I can just put it in here and Everything inside the function will be handled as a strict compliance
22:42
But this also brings us back to the concatenation issue Because for instance if you have a number of JavaScript files and you're going to put them in one big file to reduce the number of requests It might be the case that some code that you're using is not strict compliance So in that case your application might crash
23:04
So the thing with concatenating is you need to test it and once you have the impression that it works You might want to test it again, especially with the libraries and third-party JavaScript And once you're absolute before you're uploaded just test it again
23:23
so that is that is a thing with concatenating JavaScript make sure that it all works and that's Can only be done by testing Another thing that we can do to reduce the downloads to get our pages load faster is by using minification
23:42
and Minification is a really real simple but effective approach What it does in the JavaScript if I go back to this JavaScript code that I just did You saw me Indending a couple of spaces and stuff I put in some comments and stuff, and I just made it look pretty
24:03
But those spaces are all bytes basically so what we can do with Minification is we can remove all those white spaces we can remove all the line breaks the comments They can be stripped out as well because the JavaScript engine doesn't need it And we can get smaller files or smaller portions of JavaScript
24:24
What it also does it is able to? Rename variable names I like to use longer variable names So I know it's going on basically But we could reduce that really long variable name to a one character one
24:41
The code will be for us really a readable, but it will save us bandwidth So for instance I've got a little function here I'm not sure exactly what it does, but that's not really the issue if I would minify it It would look like
25:01
This so What you if you want to use this kind of approach what you need to make sure is you would Need to have some sort of a deployment script Which will go over your JavaScript files and we'll do this process And it should not touch your original files obviously because if you need to make a change you don't want to do it in
25:23
This one, but you want to do it in the other one But this will anyway yeah reduce the bandwidth and the download Size of files and this can be done with CSS to a certain extent as well We can remove all the spaces all the line breaks We can obviously not rename things to shorter variable names in CSS because it doesn't exist
25:46
but it will make your file smaller and Well there are fortunately a number of minifier tools that you can use to reduce your JavaScript files in size The first one is well the granddaddy of minifiers
26:03
it was the first tool available, which would actually do something like that and that is gsmin and It just takes the input file as a parameter and it will Write a minified version to another file man, which is the second parameter Then we have the yahoo ue compressor, and we have Ajax min and Ajax min does JavaScript as well as CSS
26:28
But what we see these days well, I've been talking a bit about a deployment script or something which Builds your website, and there's a couple of tasks to prepare the stuff that you're actually uploading
26:40
One of the things which is quite popular these days and also available in Visual Studio 2015 is a so-called task runner like grant or gulp and This obviously comes out of the open source world and We now in Visual Studio 2015 have some really nice integration that we can actually use those task
27:06
runners to run certain tasks and Grant as well as gulp there are a bit like competitive or they approach the same the same goals They have a whole bunch of tasks for all kinds of things for deploying your site
27:24
And one of the things that they have they call it an ugly fight task and that will basically also minified JavaScript as well as CSS and With Visual Studio what you basically do if you have your website You need to deploy it either directly to the web server or to a local file system, and then upload it
27:45
Once your pros your project has been built Grant or gulp will run on the result at full structure and Yeah, minify or concatenate or do some stuff with the JavaScript and the CSS which is
28:01
Something which has become quite popular these days to use as well we can also reduce the downloads by doing some image optimization and Well if you have like a really good Designer in your team he might be able to help you out as well with it
28:21
but if you don't there are a couple of things that you can do to get smaller images and One of the things that you need to do basically anyway, especially for this perceived performance issue is You should always add Demand if you are using image tags to display all kinds of images you should always specify the width and the height
28:46
Attributes in your HTML The reason for that is that once this document has been downloaded And you didn't specify the width and the height the browser will take some default dimensions what this image should be so this document will be rendered and maybe it will take like an image a
29:07
Default width of 100 and a default width of height of hundred as well and then the image comes in once the document has been parsed and Displayed in your browser, and then this image appears to be 200 pixels and
29:21
In width and in height, so you'll see your documents Reposition quickly which is not cool To fit that image in but if you specify these dimensions up front The browser will make that space of 200 and 200 and it will be at first it will be empty
29:41
But once it has downloaded the image It will fit in nicely and you don't see any text wrapped around and stuff like that So that is important why you should always specify those width and those height attributes In your markup you could also check out if you could
30:02
Yeah, reduce the image quality of JPEGs Well, probably most of you know that most image formats used on the web are JPEG, PNG Maybe a bit of gif depending on the amount of colors and stuff The thing with JPEGs is that if you reduce the file size You will also reduce the quality of the images because it will just because of the compression algorithm used with JPEGs
30:26
It will just ditch pixels and it won't get worse So you should run a visual check on your image if you put the maximum compression on it if it still looks nice And for that you might be better off testing
30:42
recompression of PNGs because the compression algorithm of PNG is different it looks a bit like zip files and With zip files you can yeah twist a couple of parameters to get another compression algorithm all together Which can result in smaller images so with PNGs you can get better
31:07
Smaller files without losing quality But it will save it will take some time because you might need to turn a couple of knots to see what is the best compression for that particular image Fortunately there are a number of tools
31:23
And the last one I'm going to talk about is concatenating images, but let me get back to the PNG one There is this tool which is called PNG out and This basically runs a number of Compression stages on that same file, and it will compare the file sizes at the end
31:43
So it might run like six runs on one image to see which compression Parameters are the best for that particular image, and what you see here is a PNG out win Which is a commercial tool which? Actually does do this the same approach
32:00
There are also a number of common line PNG out tools available And if I'm not mistaken if you are checking out grant grant and gulp there are some tasks For that as well to to do the same approach and what you see here is a couple of files have been recompressed and
32:22
in this particular case like the first file the original size was 23 kilobytes and It has been reduced to 20 So yeah the remainder is 88% of the original size So if you have like a whole bunch of pictures it can save you quite a bit of of bytes to download basically
32:48
well Concatenating images that is actually something which started in the early 80s when Arcade games like pac-man and stuff came out
33:01
What they did to animate pac-man on that limited hardware Was using image sprites and how that basically works is they? There is a sequence with all all shapes of pac-man with his mouth open closed up down, etc. Etc They're basically placed in one block of memory on the machine playing that game and by only switching a memory pointer
33:26
They could animate pac-man which was a perfectly suited for that particular area What we can do with CSS 3 these days is more or less use the same approach
33:40
And what you can do here is I have one image, which is my image sprites that give It's got like a house the back and forward button and it also has a move over state So if I move over that particular Thing that I want to have this house on it will use the other one so basically six images in one
34:02
So getting back to firebug instead of six requests for those images only one, so that'll save some time We can then specify with CSS to just get a portion out of that image and The way that is specified is by specifying a left and a width and
34:27
to behind on the background we specify these Two numbers here and these numbers represent the position in a negative way where to snap out that particular image And this is something especially if you have a lot of images for all kinds of navigation purposes
34:46
This will save you tons of time downloading files and stuff like that and if I Show you what HTML would be involved for showing a little menu You'll see that I put these
35:01
Selectors on here, and I even put the hover Selectors on there as well, so this will make the home use the up house In normal position when I move over it will take that one and this is obviously very efficient way of
35:21
using your markup in combination with images and CSS but again CSS 3 so most recent browsers will obviously support this But if you have to support older browsers you might need to check whether it is supporting this kind of construct But most browsers do so it should not really be a big problem
35:45
There is one thing obviously if you already have a side and you want to go for this approach It might be a bit of work to see if a yours if you're able to optimize by using sprites Well fortunately there is a really nice site which you can use
36:00
I'm going to show it Let me see There is a site which is called sprite me.org Don't look at the design. It's definitely not a showcase for best design ever But the technology behind it is really cool because you can actually drag this sprite me link inside your toolbar
36:24
You go to the page that the website that you're working on Let me close this one down And what I can do now. I can click the sprite me button It will not and it will not analyze the site and I have been using a number of sprites in the site already so on
36:42
This particular case aside it cannot give me a lot of things to to optimize But it will also show you what? According to the sprite me tool should be sprites, and you'll have a number of sprites Available and
37:01
More important it can also create the CSS for you with the positioning with the numbers and stuff so you can now click make sprites and It created two sprites because that's something to be aware of if you're using PNG give and and JPEGs The sprite can obviously only contain all the gifts and it another sprite might contain the PNGs
37:25
And another sprite can do the JPEGs But you cannot mix them up obviously in one file or you have to convert everything to give or PNG or JPEG so I can now Get the CSS which it has
37:44
Which it has created What you can see is that it will also specify and that is something which saves you quite some time It will specify those dimensions inside the sprite so this is just a really nice easy tool to check whether you can optimize your site with it and
38:04
Then you can use this code or you can create your own sprites if you think you know it better But this will give you an impression if your site could be optimized with it another thing
38:21
Which will make your pages load faster is by placing scripts JavaScripts at the end of the page When we all started web development and we started with a bit of JavaScript like a decade ago Yeah, the rule was to include everything in the head section of your page
38:42
These days that doesn't turn out to be a best practice anymore The reason for that is that what actually happens if you request a page the the browser will first request a markup you saw that in the firework tool and as soon as it hits a script tag, it will either download the script file and
39:07
Then evaluate and execute it because it can manipulate the DOM Or if it is inline script, it will not download it obviously, but it will evaluate and execute it But if you put it in the head section
39:22
You will get a blank screen Until that file has been downloaded the JavaScript file Because nothing is written out yet yet ahead section, but it's something invisible in your browser So that is why it is better to first get all the markup and in the end get the JavaScript
39:40
Because in that case the visitor will already see something Like the HTML and then afterwards it will download the JavaScript and execute it So it will Give this perceived performance issue another thing to do Which makes it yeah, just it gives a better impression to the user
40:05
So this is yeah, actually what I was just talking about the way that it basically looks is Well should not be really new but anyway, I've got a page here doesn't do much Right Before the closed body tag
40:21
I have inserted a JavaScript file and I have some inline code and it could be the other way around Depending on what you're doing. But anyway, it is all the way at the bottom if you are working with web forms You obviously have a form tag probably right behind the body tag You can put it right before the form tag as well. Obviously, but put it all the way down that is just
40:46
Yeah to give a better experience while the page is loading Another thing that you might consider but I say might because you have to be a bit careful with it is You can use
41:00
Async and defer keywords in the script text that I was just showing you so I Could put defer or async inside these script tags, basically and Let's first look at async as I was mentioning if the browser is downloading this document and it encounters a script tag
41:25
Which requests an external file it will request it will stop processing it will request that file and it will evaluate it If you use async with your script files The script file will be loaded asynchronously and what that means is the browser is downloading the document
41:45
It's processing the document it encounters encounters the script tag It will create a separate thread which will download the JavaScript and it in the main thread It will continue processing the document so that will
42:00
Kind of make your page load faster, but you should be aware on a couple of things there One of them is that you might encounter out of order execution So normally when you specify to load in script A B and C if you do it
42:21
Async it could be that script C is Earlier downloaded as script A because it was running on a different CDN or a faster server. I don't know whatever maybe it's a smaller So if script C is depending on script A And you are using the async you will run into problems because script A was still downloading
42:44
so something very important to be aware of and If you have dependent scripts, then yeah, you might want to check out concatenating those JavaScripts Well, I said, this is how you
43:02
Specify an asynchronous download of your JavaScript and you could also use this for script inline script blocks The defer is a slightly different if you specify the defer What happens then is that if the browser is building the DOM and it encounters the script tag
43:21
But it sees that it is defer. It will instead of downloading the document downloading the script file and Evaluating it it will continue processing the document once the document has completely processed it will Only then download the JavaScript file and process So that is the defer
43:43
But again if you have like Depending scripts and you're mixing up async and defer altogether you know, you really need to have a good impression on what's going on and what's depending on what or things might turn bad and
44:00
Well, this is how you use the defer if you want to go on this path and it could it could save you quite some download times You might want to consider something like a script loading library, which is a really small JavaScript library and the two most famous ones at these days are a require GS and
44:23
head GS and the tip that the funny thing is I was just mentioning don't specify JavaScript in your head section Head GS wants you to specify a really small JavaScript file in the head But it will take some clever stuff to get scripts loaded asynchronously
44:44
Also, if you have dependent scripts It will make sure both of them will make sure that they are loaded in the right order and stuff So that might be something that you want to check out If you have a lot of JavaScript from different places that you want to load in so
45:04
Yeah Performance is basically a subjective subjective thing and Yeah, we are here to improve the technical speed and I've given you a couple of tips and tricks where to think about very common things I've given you a bit of an inside information on how it actually works and
45:27
Yes, we can improve the technical speed with a number of things that I've been giving you But it is only attacking in most cases a small part of the problem because if you have small JavaScript they have optimized it all and there's a whole bunch of JavaScript being executed in your browser
45:43
It can tell stake take some time before the page actually stands so Better yeah improving the perceived performance is actually Yeah, making it worthwhile to give your user the end the best experience
46:00
So what that means is that you actually have to check yourself by going to your browser and see how it loads preferably another Internet connection so maybe a slow one and that is something that you can do with the Google the the Chrome web tools You can actually throttle bandwidth So you see what's going on on a slow connection how your page is behaving and if it is still
46:25
pretty okay to load up and I'm Going to show you another tool Which is a very nice tool because it will actually cover all of the things that I have been discussing
46:44
I'm going To go over to a site Which is called GT metrics and it is actually also available or part of it is available as a plug-in of firebug But for some reason the latest version of firebug doesn't work well with the with this particular tool
47:00
So I'll be using the website There are a couple of analyzing tools, which are really really cool One of them is called why slow which is from Yahoo. And the other one is page speed and This GT metric site will actually Combine both of those analyzing tools and what those tools do basically is they will analyze every aspect
47:25
Of your page and it will say okay You can optimize this that maybe concatenate some files, I don't know whatever and The really cool thing is that if I go to this non Really non optimized website and I copy over the URL. I'll paste it in here. It will now
47:52
Actually, I'm a remote machine somewhere in this case. The test server is in Vancouver and it's using Firefox desktop It is now actually fetching my page on that server
48:04
And it is analyzing all kinds of stuff. Like how long does it take to load in the page? It will now analyze it with why slow and with page speed and it will give me a nice report and
48:21
More important it will give me a number of Page-speed score is is e 51 percent and the why slow is d 68 percent And you yeah now you want to know why it's giving me that score well, if I scroll down on the page, you'll see the results in this case of page speed and
48:46
What it basically says is okay. You've got a couple of things going on Remove query things from static resource as well in this case. That is not possible Specify a number of headers minify CSS minify JavaScript because that is something that I disabled on purpose on this site and
49:06
a couple of other things are doing pretty okay and That is because I have been using web forums for this page and a number of tools and web forums will optimize things for you And if I if I go up again and I go to why slow
49:21
You will see that it will measure a couple of other things so that's interesting to use this GT metrics site because it will it will use actually two analyzing tools and it will give you a number of different things to to check out and Again, it will also talk about expiry headers minify JavaScript the CSS a couple of other things but the scores basically are not good if you have a score of
49:47
800 You're the super star In this case, it's not too good so what I've done I've put on this exact same site on a different URL and
50:01
That is something I'm gonna show you as well. So it looks the same but I have done a number of optimizations and In this case the web server is concatenating JavaScript, so I'm not using any task right on some minification tools But I've got some tools on the web server, which will do that on the fly But yeah, there are several ways of doing that for dotnet you've got like the bundling and minification
50:27
Stuff that you can use you can you get it as a new get package and it will optimize stuff for you if I go back to firebug and Let me and I was talking about the why slow is a plug-in for firebug
50:42
Well, for some reason I cannot click this button and it has something to do with some Some version conflict, I don't know but the GT metrics does the same actually So I go back to the net tab and I'm going to refresh this page
51:01
and What you'll see is that I have been doing some concatenation of JavaScript CSS and what it actually means is that the number of requests has been reduced By half in this case, so I did have 46 requests for this page now I've got 23 and you see that yeah, the number of files are loaded in quicker
51:23
I've done some caching parameters and stuff as well So it's more optimized and the cool thing with GT metrics is basically that if I copy over this URL I Can actually select?
51:41
Compare with another site so the results that I had with the e51 and the d68 I can compare it with my optimized version it will now run this same analysis on this particular website and We're a bit backed up right now, I have to wait for two seconds
52:05
I'm using the free version. But if you go for the GT metrics Pro, you probably have to pay and It will analyze it faster So it's not fetching the site and we will now get the results side-by-side and
52:28
What you can see now is That a number of things have been optimized. So instead of the e51 on page speed. I now have a
52:41
895 which is almost a hundred so I'm almost a superstar Why slow is doing the same but a couple of things on web forums are very difficult to to improve For why slow so you could also tweak a bit with the why slow settings like don't check certain things
53:02
But that wouldn't be really objective B 98 for why slow is pretty good as well But more important you see that the downloads the page loads time has been decreased The total page size has been decreased by half
53:20
And the total number of requests has been half as well So this is one of the tools that you definitely want to check on your existing work as well because it will give you exactly things to check what is not going well in your site and what needs to be improved and Especially on an existing site it is yeah, it should be part of your checklist before delivering the site to your
53:43
Customer so yeah as a rule of thumb. What is really important to to understand is that these days? 20% of the time should be spent on the downloading the resources and on my second side you saw that that was pretty much the
54:04
case and the rest of the time will be spent on rendering your document and That is that is something which which should be a bit of a guideline So yeah to recap the things that I have been talking about
54:21
Try setting up some deployment script, and I'm not talking about Visual Studio right-click your project say build websites, but do some additional stuff like minifying Maybe use gulp or grant or some other tool to prepare your files and make them
54:42
smaller Try to get optimized caching well that can be done by using a CDM for images that kind of stuff Minimize round trips concatenating files Minimize download payloads as well so getting smaller files
55:03
Optimize rendering specify image dimensions etc stuff like that and test it Test it and before uploading test it one more time So yeah the conclusion of this of this talk is basically web performances like Esther jet simulator
55:24
The important thing is how the user experiences the performance Thank you. If you have any questions
55:40
Please feel free to come by or ask them right now Or visit our booth and get a free t-shirts or some other stuff nice cup of coffee for instance