Beverleyh
(Beginners) Easy ways to speed up your web pages
by , 04-15-2011 at 06:19 PM (31459 Views)
This week I was asked to look at and offer opinions on a student's website project.
Now, its been a while since I was in student-shoes but it brought back memories of the mistakes that I made myself back when I was first learning how to make websites so I thought I'd create my first blog about the easy mistakes and easy fixes that can really help improve loading times.
My first observation is with the common development path that a lots of new-starters take when making their first website (me included, back in the day);
Priority 1 >> Find an easy-to-use package software that creates a web page for me - all I want to do is point-and-click and drag-and-drop.
(Mistake 1 >> Not fully understanding the basic structure of a web page or HTML)
Priority 2 >> Making the page look nice with lots of eye-catching elements
(Mistake 2 >> Not understanding web-suitable media formats and the extra impact that all embedded elements/scripts/animations have on the speed of a website or impression they make on visitors)
Priority 3 >> Getting Priority 1 and 2 finished with as quickly as possible so content can be added.
(Mistake 3 >> Not realising that visitors wont hang around to read your content, buy your goodies or comment on your articles, or that they're unlikely to want to come back, because the pages take too long to load)
So it seems that while we're in the learning stages, a student web developer's key goal is to just get a nice-ish looking website online as quickly as possible at (seemingly) any cost.
The students I cross paths with do have a basic understanding of web page structure - they know that a very basic web page is laid out like this…
…And they are also familiar with the “code view” in their web page builders, so if you’re not, turn it on now and have a look at what’s there - you're going to need to know what the <head> and <body> sections are for points 4 and 5.Code:<html> <head> <!-- stylesheets, scripts and metadata goes here --> </head> <body> <!-- content (text, pictures and other elements) that visitors see goes here --> </body> </html>
So taking one student's website under my wing and using it to illustrate some easy improvements, we set to work on fixing things up.
Now the tips I list below are basic common sense things so it's unlikely that I'll be covering any new ground - I'm just bringing a few thoughts together here so other newbies can try them out and see how they work for them. They're all really easy to do but just require a bit of extra thought, time and effort - collectively their effects can be quite dramatic so it really is worth trying them out if you don't do them already.
1 - Scale images prior to putting them in a web page
When putting things on the web, the idea is to make things as small as possible so they download quicker and save on bandwidth. For most media this refers to physical file size on disk rather than physical dimensions, but for images it's a double-whammy, so I thought it was worth covering early
If your image only needs to be 100 x 150 pixels when it's on the web page, resize it to 100 x 150 pixels in Photoshop or GIMP before you put it there rather than rely on drag-and-drop visual scaling with your web page builder.
2 - Use the right image format for the job
- Use .jpg/jpeg for photos or detailed images that require a lot of colours. Also try .png-24 as you can often get more savings with them over .jpg/.jpegs.
- Use .gif for simple, small animations, logos, diagrams and images that require 1-bit transparency, which means a pixel is either transparent or it isn’t (no middle-ground). .Gif only supports 256 colours so you may notice speckling after saving in this format.
You might also like to try substituting .gif for .png-8 as in most of my tests, .png-8 offers a higher compression with, on average, a 7-12% saving over the .gif format.- Use .png-24 for images that require lots of colours and alpha-transparency (pixels can be varying degrees of transparency)
3 - Optimise images
If you're saving images directly from something like Photoshop, make sure you select the option to "save for the web". This will reduce the dpi and quality of the image to strip out all the in-between colours that the human eye can't really differentiate between, leaving you with an image file that takes up much less physical disk space on the web that downloads much faster. Even saving at 60% quality will produce an image that is almost indistinguishable from the original.
You can also try DD's image optimising tool here: http://tools.dynamicdrive.com/imageoptimizer/
When optimising, there will always be a trade-off between size and quality so you'll need to do a bit of fiddling to find the best-fit settings for you.
4 - Use an external CSS stylesheet (and condense multiple stylesheets into one and minify)
Web page builders often insert styles in the <head> section of every web page meaning that a browser has to download extra code to view that web page, and then download the whole lot again when the visitor moves on to page 2.
Taking all the CSS out of the <head> section and putting it into an external stylesheet will make it cachable by the web browser so the stylesheet is downloaded once and then sits ready and waiting in reserve to style the next page (minus the need to download it again).
It's also worth minifying it to take out all the comments and unnecessary whitespace. I've had mixed results with online minification tools so I find that doing it manually is often more reliable. To minify by hand, just do this;
instead of this;Code:h1{color:red;text-align:center;font-size:18pt;} p{color:black;text-align:left;font-size:10pt;}
How to use an external stylesheet: http://www.w3schools.com/css/css_howto.aspCode:h1 { color:red; text-align:center; font-size:18pt; } p { color:black; text-align:left; font-size:10pt; }
5 - Use an external javascript file (and condense multiple js files into one and minify)
Same cachable reason as point 4.
You should only really merge multiple files if they are common to all/most pages of your website. If you have a page that utilises a one-off javascript file, particularly if its quite large, you should probably only include it in the page that actually needs it to avoid unecessary load-time on your initial home page.
You can argue that downloading a script before it's actually needed can create the impression of faster load-times elsewhere around the website, but that's something to be considered for each website.
To create an even bigger impression of faster load-time you can also put javascripts at the bottom of your web page (above the closing </body> tag) but this depends on what the javascripts are needed for (e.g. if the script uses document.write to insert some content, it can't be moved to the bottom of the page) so for the purpose of keeping things simple, lets just stick with merging and minifying.
How to make an external javascript file: http://javascript.about.com/library/bltut13.htm
Online minification tool: http://jscompress.com/
6 - Spread files over other domains
All the files, scripts and images that make up your web page can be downloaded faster if they are spread over a few different domains. This is because browsers are limited to the number of files that they can download at any one time from one domain, putting subsequent files in a queue to download later. If you are able to put files under other domains, a browser can download them in parallel, resulting in shorter queues and more files being downloaded at the same time.
For a more detailed explanation of this, please refer to this article: http://yuiblog.com/blog/2007/04/11/p...search-part-4/
7 - Stream-line your content
(OK, so this is heavily linked to usability and accessibility, as well as SEO, but I still think it's relevant for page-load times so I'll continue.)
Obviously if you're writing a medical blog you'll be using lots of fancy sounding, scientific terms, but for general everyday web-talk, try and keep things simple.
People tend to visit websites to find information and achieve a goal in the shortest times possible so why make them wade through reams of content to find what they want?
Keeping things short and simple will allow people to find the information they want quickly, and also help to stream-line your web page content and allow things to load a bit faster.
- Only use pictures that are relevant to your content.
- Use animation *sparingly* to highlight areas of importance
- Try not to auto-play videos and music - allow users the choice to play or ignore.
- Write shorter sentences/paragraphs (and cut out the jargon). If you need to provide a lot more information on one particular matter, consider providing an additional document for download that the user can take away and read at their leisure.
- Use bullet lists to get key points across quickly.
OK, as I said at the start of this post, these are all easy steps for new web-developers to take to speed up web page - no revelations, just common sense considerations. Anyway, I hope its of use to somebody
To be covered in my next blog post >> “Further ways to speed up web page loading times with php”
Updated 04-16-2011 at 09:30 AM by Beverleyh (completing what I started)
Tags:
None
- Categories
- Uncategorized
Go to Profile
Mark as Read
