Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Front End Web Optimization Workflow

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

How the Web Works

7:02 with Dale Sande

Getting a web app from it's host to a user is a series of lightning fast transactions, initiated from the user and executed by the code in our web app. Server and data-center performance is part of the solution, which is out of scope of this course, but once the server replies to the request of the user, let's just say, the less we can send, the better.

New Terms:

Front End Performance Optimization -- The modification of HTML, CSS, and JavaScript (and sometimes, server configuration) for the purpose of improving page load times.
SPDY -- The now deprecated project, Google’s next generation Transfer Protocol for web traffic
HTTP/2 -- Official next generation Transfer Protocol, based on SPDY created by Google
HTTP Header Request -- Information passed between the client and server during a web request
Head of Line Blocking -- a web performance limiting issue where a request may be stuck waiting for another request to be completed before it can begin
Load time -- the total time it takes for a web app or site to load
Latency -- An issue related to Head of Line Blocking where time is added to the total download time of a web site waiting to download additional assets
Performance Budget -- The total allowed page weight of your site or app
GZip -- A popular server side compression method
Brotli -- A newer server side compression method developed by Google
Perceived Performance -- A metric for how fast user’s think your site is
First Meaningful Paint -- A perceived performance metric where the user first sees content appear in the client post request
First Available Interaction -- A metric that closely associates with First Meaningful Paint where the user is able to begin interaction with the content of your site/app
Above the Fold(AtF) -- CSS, Images and JavaScript that are essential to the initial load of the site or app within the constraint of the first view

Further Reading:

Performance is User Experience
Performance Budget Builder
HTTP/2 Frequently Asked Questions
GZip test
Brotli test

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Hi, I'm Dale. 0:04
    Is your web app not loading as fast as you wanted to? 0:06
    In a world where every second counts, 0:10
    load time is a major factor to user abandonment. 0:12
    If your app takes more than four seconds to load, 0:16
    chances are you have lost more than 25% of your users. 0:18
    And when performance matters, these users rarely come back. 0:23
    When it comes to mobile, the stakes are even higher. 0:28
    More than 50% of mobile users will expect their experience to be equal, 0:32
    if not better, than their desktop experiences. 0:35
    In these lessons, we will address common performance impediments. 0:39
    And by the end you will know the leading techniques needed 0:43
    to make your web app perform at its best. 0:46
    Getting your website or app from its host server location to a user 0:49
    is a series of lightning fast transactions. 0:53
    On your desktop or handheld device using a browser or 0:56
    an app with an embedded browser You initiate a request. 1:00
    That request is received by the server, processed, 1:04
    and the response is sent back to you to be executed in the browser, but how? 1:06
    Let's talk about HTTP or Hypertext Transfer Protocol. 1:12
    See HTTP is a request response data transfer protocol, 1:17
    used for the web or a client server computing model. 1:22
    For example the browser the client initiates the request, 1:26
    read data from an application that lives on a server. 1:30
    This request is called and send in the form of an HTTP header request message. 1:33
    Upon receiving the request the server in return will send the HTML file, 1:39
    the response to the client. 1:44
    It is here that the rubber meets the road and where optimization is key. 1:46
    The first definition of HTTP 1.1, 1:51
    the version we are still using today, happened in 1997. 1:54
    So while this spec has stood the test of time, and served the internet well in its 1:58
    creation, there are limitations It is these limitations that are the core 2:02
    reasoning behind many of the optimization methods we use today. 2:07
    First, the main limitation is HTTP only allows for a maximum of 6 to 2:12
    8 parallel connections to any one domain, that is progress believe it or not. 2:17
    IE 7 used to only allow for two, so 2:23
    this means that it first load any request past the initial allotment is held in 2:26
    weight resulting in a cascading waterfall of black request. 2:31
    We call this latency, as any web developer knows all too well, when building 2:35
    a webpage there are way more than six to eight things being loaded into the page. 2:40
    It is because of this limitation that we have come up with processes that limit 2:45
    the number of requests and reduce the amount of data set the transfer of data 2:49
    in combination with latency accounts for what we call load time. 2:54
    Web optimization means managing load time and reducing latency. 2:59
    In an upcoming section, we will discuss how to use modern performance monitoring 3:04
    tools To see what the actual load time for a site is and how latency is a factor. 3:07
    The goal of a performance site is to have most 3:14
    if not all of the site loaded within two seconds, but when browsing, 3:17
    some sites appear to load in under a second, and some appear to take forever. 3:22
    Within a load time spectrum, there are concepts like perceived performance, 3:26
    first meaningful paint, and first available interaction. 3:31
    It is the management of these load time properties that help us to understand 3:35
    how to best optimize a website. 3:39
    Proceed performance is more psychological than technical. 3:42
    Developers can use techniques that load the essential code and data first, 3:47
    and then progressively load the rest in the background or on demand. 3:51
    This gives the user the experience that the site is loaded 3:56
    when it actually hasn't completed yet. 3:59
    First meaningful pain goes pain in hand with perceived performance. 4:02
    Ever open a new site and stare at a blank screen for three seconds? 4:06
    Some devs have taken the path of loading everything up front so 4:10
    that each subsequent interaction is super fast, but 4:13
    the first view is slow and the perceived performance of the app is terrible. 4:17
    First available interaction, as you can imagine, 4:22
    is an important metric, as this is when a user can actually use the app. 4:25
    If the app visually loads but 4:31
    none of the actions work, then the app is essentially broken. 4:33
    Not all optimization happens in the front end, 4:37
    server side compression plays a huge role as well. 4:40
    There is a widely used format called Gzip and then a new kid on the block Bertoni. 4:44
    Both these technologies are server side configurations and 4:50
    serve the purpose of comprising the data of your application and 4:52
    reducing a response time from the server to the client. 4:56
    It's also extremely common for any third party host provider 5:00
    to automatically have this in place as it reduces their cost for transferring data. 5:04
    We will explore this later in the course, to see if your 5:08
    site is using gzip or Bertoni, check the links in the teacher's notes. 5:12
    It's one thing to optimize resources, but 5:17
    it's another to be fully mindful of your site's weight as you are building, 5:19
    a popular tool many developers use is a performance budget. 5:24
    It is a development spec that can be used to visualize 5:28
    how well we are maintaining our performance goals. 5:31
    It's one thing to say that you want a site that loads in under two seconds, but 5:35
    if you are not maintaining some kind of boundaries, 5:39
    you will find yourself at the tail end of a project trying to stuff Cram and 5:42
    compress all the things to increase performance. 5:47
    Maintaining your performance budget is to log all of your essential assets. 5:52
    In some case, your assets are text and text compresses very well, but 5:56
    then there are assets like videos, images and fonts. 6:01
    These are all killers of performance, to help us visualize our budgets better, 6:05
    Brad Frost built us a tool. 6:10
    It runs inside code pen and really helps to drive the point home 6:12
    when discussing the goals of our performance budget. 6:15
    To the right set your personal budget, the budget value is editable. 6:18
    Let's set our budget to 1000k and edit some resources. 6:23
    How does that 150k image impact our performance and load time? 6:28
    How about adding in a new font library. 6:34
    Or what about adding some more JavaScript. 6:40
    As you can see every decision make an impact on performance and load time. 6:43
    Remember, the fastest site is the site with nothing in it. 6:47
    So every line of code you add, every image you reference, every style selector and 6:52
    JavaScript function you'd write, you are decreasing performance. 6:58

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up