Unit 28 Week 2

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

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

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 2
Create 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 Sizes
Rank 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 chose
3. 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 2
Create 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)…

Part 2 – the user’s computer


The User’s Computer
Obviously, 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 2
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.
information about … user or client side factors
(download speed, computer performance factors –
cache memory, processor speed)…

Part 3 – Your web server


Issues at your server
Obviously 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 2
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 …
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

More Related Content

What's hot

Similar to Unit 28 Week 2

More from MrJRogers

Recently uploaded

Unit 28 Week 2