Unit 28 Week 2

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

Why are some websites fast? (And others not?)


Objectives• Demonstrate an understanding of a

variety of factors that affect the performance of a website


Website Performance• Assignment 2 – due one week today

– 21 November• Email it to me before the start of the

lesson• You should be able to complete this

task in today’s lessons!


Assignment 2Create a leaflet that explains to new clients of YellowZebra the various different factors that influence the performance of a website. This should include both server side and client side (user side) factors. Include the benefits of particular server side capabilities and also the limitations of the equipment and software that website users might be using to access the website.


What makes a Website Slow?Part 1 – the files you’re using


General Rule:Bigger files = slower to load


File SizesRank the following types of file in order biggest to smallest (on average)• Audio• Video• Image (photo)• Animation


So what to do?• If the files your website uses are too

big, what can you do?1. Change the physical size of the file 2. Change the file type you chose3. Increase compression


Change physical size• Zooming an image can make it

smaller• Download an image from google

(anything appropriate!)• Save it• Resize to 50% in both dimensions• Save again and compare file size


Change physical size• Images can be zoomed or cropped to

reduce the number of pixels – more pixels = bigger file size• Audio and video can be trimmed to

take less time – more seconds = bigger file size


File Types• Download an image from google

(anything appropriate!)• Open it in Paint and go to

File > Save As• Save it in 3 different formats:–.jpg–.bmp–.png


Filet types and file size• Not all image files are the same (the

same goes for video, audio, etc.)• Some image types are uncompressed

– e.g. bmp, tiff• Others compress data in different

ways - .jpg and png both reduce the size from the .bmp but in different ways


Rule of thumb for images• .jpg is smaller for photos• .png is smaller (and looks better) for

vector images• .gif can move• All the other formats are not really

any good for the web


Compression• In some image editing programs (not

paint!) you can change the compression settings for .jpg files–A slider for image quality from 0 to 100–Smaller file sizes means worse image

quality and visa versa


High Compression


Compression• Video and Audio can also be

compressed• MP3 is a common compressed audio file

that can be adjusted to sound better or have smaller file size• AVI or M4V are video files that can be

customised in the same way• There are lots of other video and audio

file types that can do the same


Assignment 2Create a leaflet that explains to new clients of YellowZebra the various different factors that influence the performance of a website. This should include both server side and client side (user side) factors. Include the benefits of particular server side capabilities and also the limitations of the equipment and software that website users might be using to access the website. You should make sure that you include some information about file types (image files, sound files, video and animation files and their different formats)…


What makes a Website Slow?Part 2 – the user’s computer


The User’s ComputerObviously, if your computer is slow and/or if your internet connection is slow it will affect the way websites work on your computer


What can the designer do?• You can’t make users get a faster

computer• You can make sure your website

doesn’t have too many features that will slow their computer down or take ages to load over a slow connection


Assignment 2Create a leaflet that explains to new clients of YellowZebra the various different factors that influence the performance of a website. This should include both server side and client side (user side) factors. Include… the limitations of the equipment and software that website users might be using to access the website. You should make sure that you include some information about … user or client side factors (download speed, computer performance factors – cache memory, processor speed)…


What makes a Website Slow?Part 3 – Your web server


Issues at your serverObviously if the server is overloaded, has slow hardware or a slow internet connection your site will seem slow


Reasons for Overloaded Servers• Too many people are accessing the site at once– Load balancing allows you to share one website

between several different servers to share the pain

• The server has to sent loads and loads of separate files for every single page (e.g. image files)– Combine images and use only part

of the mega image each time – this is called “sprites”


Reasons for Overloaded Servers• The server has to rebuild a dynamic

page every time it’s loaded and that takes more time than loading from disk–Dynamic pages are super useful (e.g.

all blogs are dynamic as are search engines) but if there’s a lot of traffic they can break


Server Side Capabilities• Turn compression on–Most web servers can compress (like

ZIP) the actual HTML pages and other text/code files as they are downloaded

• Use web caching–Keep a copy of a dynamic page and

send that to the user instead of rebuilding it each time


Assignment 2Create a leaflet that explains to new clients of YellowZebra the various different factors that influence the performance of a website. This should include both server side and client side (user side) factors. Include the benefits of particular server side capabilities … You should make sure that you include some information about … server side factors (web server capacity - bandwidth, and executions to be performed before page load)


Deadline Reminder• Assignment 2 – due one week today

– 21 November• Email it to me before the start of the

lesson• You should be able to complete this

task in today’s lessons!

Unit 28 Week 2

Technology

start20assignment

start20what

server side

server side

start20reasons

client side

todays lessons

user side