ah 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. Lecture slides will be made available on the day of the lecture (July 19).
P2 grades
Your P2 grades will be released by Friday at the latest. Please remember to address any questions or concerns with the grades directly with Andrew.
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"></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></head>
<body>
<script src="js/loadCSS.js">
// Here we load non-critical CSS
</script></body>Lazyloading
JS:
// We need to collect ourselves all the elements we have flagged for 'lazy loading':
var lazyloads = document.getElementsByClassName("lazyload");
// Then select one based on a action (i.e. a click, or a scroll):
otherElement.addEventListener("click", function() {
var element = lazyloads[0];});
// Then swap out attributes:
var img = element.getAttribute("data-src");
element.setAttribute("src", img);HTML:
<img src="tiny-image.jpg" data-src="actual-image.jpg" class="lazyload" alt="...">
<noscript><img src="actual-image.jpg" alt="..."></noscript>The next couple weeks
The plan for the final weeks of our class:
- July 26: Brief 'future web things' lecture, in-lecture peer critique and open support time, lab critiques.
- August 2: Final in-lecture peer critique, no labs.
Attending July 26 and August 2's lectures will result in benefits.