Alfredo teaches web design & development (Debugging Day lecture)

Debugging Day

Lecture outline

As the title suggests we'll spend this lecture helping you debug your final projects in addition to covering some speed optimization. Lecture slides will be made available on the day of the lecture (July 29).

Page speed optimization

To get our pages to render as efficiently as possible, we need to keep in mind a couple of things:

Render blocking
Compression
Critical rendering path
Lazyloading

Render blocking

Anything that appears in the head of our HTML must be loaded before the page can start to render.

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/grids.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/jquery.ui.css">
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery.ui.js"></script>
<script src="js/popover.js"></script>
<script src="js/interface.js"></script></head>

Compression

"Minifying" your files

Using tools such as preprocessing we can remove all the extra spaces and comments in our files and deploy them online. We can also use such tools to to reduce requests.

/* We can set up preprocessing to combine files */

@import "main";
@import "grids";
@import "animations";

Critical render path

If we are getting into extensive page-speed optimization, we begin considering what is absolutely necessary for the user to get first (when they access the page), as opposed to what can wait until later.

<head>
<style>
<!-- Here we put in the 'critical' CSS for the page -->
</style>
<!-- Here we put 'non-critical' CSS for the page (i.e. fonts, animations -->)
<link rel="preload" href="/css/non-critical.css" as="style"></head>

Lazyloading

Lazyloading allows us to defer the loading of images until (and if) the user scrolls to an image on the page.

<img src="image.jpg" loading="lazy" height="230" width="1800" alt="...">

P3: Portfolio

Oops, this content didn't quite load. Check it out at <a href="/teaches/web_design_and_development/projects/03#week4" target="_blank">/teaches/web_design_and_development/projects/03#week4</a>

For today's code tutorial

Please make sure you have today's starter kit — available at short.alfredosherman.com/339-t09

The next couple weeks

Just a reminder of what is coming up in IAT-339:

Aug 5 — P3 final portfolio review.

If there are other code items you would like covered please do not hesitate to reach out and let me know.

Activities for today's (remote) lab

Not so busy agenda:

P3 check-in