IAT-339: 11 Turning it to 11

IAT-339: 11 Turning it to 11 — A slide deck

Turning it to 11

Lecture outline

Covered this week:

  • Speed optimization of website
  • Final course considerations

Lecture slides will be made available on the day of the lecture.

Quiz Rules

  1. You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
  2. This quiz is closed book, meaning there is no use of external resources of any sort. No exceptions.
  3. Any talking, texting, messaging, paging, or secret-tiny bluetooth resulting in communications with friends or classmates will result in a grade of zero. No exceptions.
  4. Please answer any questions in full sentences.

Quiz time

You have 30 minutes.

Turning it to 11

Cranking the amp

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
  • Caching
  • Critical rendering path

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>

Preprocessing, Compression & Request Reduction

"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.scss";
@import "grids.scss";
@import "animations.scss";

Transfer Compression

We can compress images and all the extra spaces out of our text files, but we can also compress our files for transfer as well. Using a server-side file (on Apache servers) called .htaccess, we can set some specifications as to how our page should use compression.

# An .htaccess file allows us to control server-side redirection and delivery

<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
</IfModule>

Caching

To enable caching of files, we can again use our .htaccess file to tell the user's browser to cache content accordingly.

# Enabling caching in .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType text/css "access 1 week"
ExpiresDefault "access 1 day"
</IfModule>

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

JavaScript:

// 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="blank.png" data-src="actual-image.jpg" class="lazyload" alt="...">
<noscript><img src="actual-image.jpg" alt="..."></noscript>

P03 Code Rubric

"B: Code uses preprocessing and compression to increase page-loading efficiency..."

You can achieve this simply through minifying your CSS using Prepros.

P03 Code Rubric

"A: Code uses preprocessing, compression, and request reduction to increase page-loading efficiency..."

You can achieve this through reducing the number of files being loaded when the page first opens up: i.e. only loading one CSS file (instead of file) and, or, lazyloading your images.

Bonus Office Hours

Since we have lost a couple weeks this term, I am offering some final bonus office hours for those who would like some additional project assistance. Please note that these office hours are by email appointment only:

  • Tuesday, July 31st from 2:30-4:20pm in Surrey
  • Wednesday, August 1st from 10:30-11:30am in Vancouver
  • Friday, August 3rd from 10:30-11:30am in Vancouver

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Mondays from 8:30-9:20am and Thursdays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1