The multiplying effect of shaving 600kb off wayne.edu ⚡️

We’re always looking for things that have a multiplying effect.

A little bit goes a long way

Wayne.edu is just one of those places. It gets ~700,000 page views per month so changes to the homepage impact a lot of people.

Webpagetest.org results for wayne.edu

Scroll map of wayne.eduOnly 25% of people scroll

Internally and externally the homepage is used as a primary resource for the Login, Search or Top menu (in order of interaction).

Because of that, only 25% of people scroll past the initial fold.

Studies show a fast webpage gets more interaction.

The bulk of the file size (and thus perceived speed) of wayne.edu is from images. Using the existing infrastructure, we already compress each image as far as possible. Taking the homepage down from historically ~3mb to ~1.1mb.

Deferred loading of images

Using the technique that Rob implemented on Base to detect if an image is on or near the screen to trigger actually loading it, this was then transitioned to the CLAS website by Tom and wayne.edu proper by Jenny.

The result is a ~600kb reduction in initial page load on wayne.edu, from ~1.1mb to ~600kb depending on the hero image.

Animation of wayne.edu content loading

This change at scale

75% of 700,000 visits = 525,000 pageviews do not scroll
525,000 times 600kb savings = 315gb savings per month!
10.5gb savings per day.

The CLAS homepage had similar results for end users, but with fewer page views per day, the impact is not as visible.

Bandwidth costs can get expensive for our users. This change not only helps locally but globally, the impact is great without impacting the user experience.

YouTube embeds just got a little more clear

A few years ago we added the ability to embed a screenshot from a YouTube video through the CMS editor. This alleviated the need to take a screenshot, edit with software to add the play button, and then finally uploading it to the web server to embed it into a page or an email. With one click, pasting the url of the video a screenshot of the video can automatically be generated and embedded into a page.

But there was a problem

YouTube play buttonThe default YouTube play button at the time was a red rectangle which does call a lot of attention and allows users to immediately identify what will happen when they click the image. It became a problem over time as more of our videos (especially now that we can upload a custom still photo as the default screenshot) became people with a YouTube play button head:

Solution

New YouTube play buttonWe are happy to announce the play button graphic has been swapped out with a more transparent version that equally emphasizes the screenshot and the fact that the image will link to a YouTube video.

Now at a glance you can see the details in screenshot while still still understanding the link will bring the you to a YouTube video.

How to use the YouTube screenshot button in the CMS:

YouTube Preview

How To Create a Seamless Image Suitable for a Repeating Background

First, I think I broke the record on having the longest title thus far on our blog! YAY!

Secondly, when I read the write up on the Planetarium launch in January, I was slightly disappointed that there was no mention of the beautiful background image in the post. I think one of the awesome things about the site was the background and how it seamlessly repeated itself beautifully. I swore then on to dedicate a post solely on the background image.

Here’s the Planetarium site. Drag your browser window to extend the width and take in the beauty of the background. Now we’re ready to dive in the tutorial! Open up Photoshop and let’s start!

STEP 1

Pick your image for the background and put it in the mock, sizing it accordingly. In this case, we have a starry background.

 

STEP 2

Establish the height of the background you want to work with. Our height for this one is 400 pixels. The bottom (silhouette of the mountain) happens to be black so we can use a solid black color for the background that we can repeat using HTML.

 

STEP 3

Create a new document with the same height as your working background image. Your width should be three times the width of the sized-down background image. For our example, our canvas size is 400 x 3200. Manually size down the original background image ’til it replicates the background in the mock.

 

STEP 4

Duplicate the image.

 

STEP 5

Overlap the two images to create one image. Lower the opacity of one image to see where to sew/merge the image.

 

STEP 6

Use the Eraser Tool with a soft edge to clean the background and erase any visible seam lines. When done, you will have one seamless image.

 

STEP 7

Pick two identical points on your image. Use the margin to mark the beginning and end.

 

STEP 9

Use your marquee tool and select the area. SHIFT + COMMAND + C to copy the selected image and click “OK”. This image is what we will be repeating.

 

STEP 10

To make sure that the image is truly seamless, go back to your canvas with the really long width. Hide the two layers which housed the two sized-down original images. Drag or paste the base image from Step 9 into the artboard area. Duplicate and put them next to each other and you should have a seamless image.

 

To be extra sure, you can test the image in a browser. Copy the HTML below and save it as test.html and open it in a browser. Make sure that you change the file name to the file name of your image and the path of the image to the correct path according to where you saved the .jpg of the background that you will be using.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Repeating Background</title>
	<style type="text/css">
		body {
			background: url('starry-bg.jpg') top left repeat-x;
			height: 100%;
			width: 100%;
		}
	</style>
</head>
<body>
</body>
</html>

Hope this tutorial helps with your future seamless repeating background endeavors. 🙂 If you end up using this tutorial, post a link here because I’d love to see your work! Peace and carrots!

Attribution, copyright and fair use of images

I wanted to put together a quick reminder for anyone who uses images in their university published documents. “Published documents” meaning: print, web, email, basically anything that leaves your computer.

This post should not be taken as a complete rule set for every situation or image, just a general guideline. If you have specific image questions you should contact the person who produced or is distributing the image.

Basic Rules

  1. If you use an image in anything that is eventually going to make it someplace public, implemented on the web or used in any type of distribution you must first gets rights to that image from the appropriate source.
  2. If the images are from Rick or MJ (university photographers), or a stock photo site they will be all right. If they are from any other site you must follow the existing rights attached to that image.
  3. If the images are marked as creative commons, depending on the level of the license (http://creativecommons.org/about/licenses), you must follow the rules attached to that image.
  4. If there is nothing on the page that explains the license of the photo you have to assume it is copyrighted by the person who published it and you must get approval to use the image.
  5. If you are using a logo, most larger brands have media guides with high resolution versions available. Contacting the company is your best bet to get the highest quality. Most often using logos for “sponsorship” areas on a publication doesn’t require special permissions as long as the company knows it will be connected with the event or item.

Every situation is different so these rules might not apply to everything. The reason I bring them up is just a reminder that not all images found online are free to use. Treat digital images the same as you would software and any other artwork for that matter.

Resources