Tuesday, September 6, 2011

Page Speed Testing

While it is true that the average Internet user is no longer buzzing along at a healthy 56Kbps, that doesn't mean page load speed isn't important. Perhaps your viewers are on a spotty wifi connection, are using a phone to access your site, or really are using a modem.

 You might wan to try out Google's Page Speed lab. It checks for common problems with website page loading speed and gives examples of what can be fixed.

Speedy websites are fun to make, easy to maintain, and helpful to users. If you want to be proactive (before the site is built), here are some tips on how to build site speed in to the development cycle:


Lesson 1: Fun to make
1. Make a small bonfire out of your Dreamweaver, Rapidweaver, Publisher, and and (God forbid) Frontpage discs.
2. Run away before the smoke from burning discs gives you cancer.

3. Now, pull out your favorite text editor and start coding! I like Geany, because it auto-completes HTML tags, highlights CSS, JavaScript, and PHP embedded in HTML and a whole slew of other things, while being lightweight. As a side note, one of my favorite features is Ctrl + Shift + O, which opens the file that your cursor is over, say you had embedded a CSS file, placing the cursor over it and hitting the combo would open it up for editing.

4. Code like the wind!
5. Test.
6. Repeat 4 and 5 until you have the same page you did originally. I usually get the size down by three or four times by hand coding.
7. Run your site through the w3c validators and put a fancy badge on your page.

Where is the fun in this? Well, first of all, you know what every page does and have gained new knowledge in the fields of JS/CSS/HTML, soon enough, you'll be able to re-write entire sites in a few hours for great speed enhancement.

Lesson 2: Easy to maintain
Being your site is now W3C compliant and small, changes are really easy! Want all the text on your site to be purple and flashing? Change it through CSS in thirty seconds. Holiday themes are easy to make now!

What else can you do though? How about separating out the common stuff in each page to a separate php file? And the navigation to a nav generator? Now all of the pages on your site are updated at once when you upload a new one.

This isn't the best practice, but in my opinion, it works for small sites. Why not separate out variables, like phone numbers to a separate php file? Then you can just echo the variable wherever it is needed. Result: Want to change xxx-xxx-yyyy to xxx-xxx-yyyx? You can in a very short amount of time; and you don't have to worry about missing pages!

Lesson 3: Helpful to users
Users that have screen readers installed will thank you, along with users that are on spotty/slow connections. Oh, and your server admins will be happy too, imagine using half the bandwidth through smarter pages?

No comments:

Post a Comment