Website Optimization Measures, Part IV
Jens Meiert, May 5, 2008.
This entry is filed under Web Development, Usability, Design.
Once again, though already covering a few weeks of various improvements. Some have been taken place in Bremen, others in Zurich, all on one or more of my sites. Anyway, enjoy some additional tips, this time roughly touching typography, usability, SEO, and web development with performance focus.
-
Applying the typographic scale. Thanks to Mark Boulton I went for yet another typography improvement by carefully adjusting the font sizes in my projects, and it is Mark who can explain best what the benefit of addressing the typographic scale is:
Figure: Copyright Mark Boulton.
So, what’s so special about these sizes? Well, because this scale of sizes has been used for centuries, if set correctly, type set in this scale will appear more pleasing to the eye and therefore more legible.
-
Revising “title” elements, consistenly putting the site name last. One might consider it a usability, SEO, or “common sense” measure that page titles should describe the content of the page first, then reveal the site’s title – the content is what counts, and the first words are important to illustrate what’s truly going on in the document in question, not only in search engine results pages. While I have been applying this method for ages, there still were a few more “general” pages that featured the site name first, then described the content. This has been fixed.
Example: “Archive for 2008 – Jens Meiert” instead of “Jens Meiert – Archive for 2008”, (in this case) following the simple convention to assemble the page title out of the
h2andh1headings, in this exact order. -
Using a content delivery network. Since you probably noticed this measure in a recent tip I will not quite repeat what I wrote there. Using a CDN is a nice exercise, even though it is a large, wide-spread audience that makes sites really go for CDNs; other performance measures can be more important. (Well, and my Coral experiment didn’t end yet anyway, Coral seems to mean even more latency from time to time.)
-
Enabling file compression. Yah, some of you might even have heard of my compression tests, too, as I recently enabled compression of HTML files, style sheets, and scripts by adding the following line to my projects’ root .htaccess files (all on Apache 2 machines):
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
Be aware though that some providers do not allow use of
AddOutputFilterByTypeor the corresponding server module, respectively (which might result in an internal server error), that this directive is available in Apache 2.0.33 and later (but deprecated in Apache 2.1 …), that you better make sure that your server not just applies compression but also returns aVary: Accept-Encodingheader (to avoid proxy problems), and that me lazy guy will write about compression (and alternatives toAddOutputFilterByType) in more detail soon.
Less and more incomplete information than usual has been provided here, but please remember that this series of posts has rather to be seen as a loose log of measures I apply to my sites than a comprehensive guide for more quality of other sites. Yet one day, there might be one.
This has been the fourth part of an open article series. Currently there are three additional articles on website optimization, part I, part II, and part III.
Read More
Enjoy the most popular posts, probably including:
Comments
-
On May 5, 22:41 CEST, Jens Nedal said:
Hi Jens,
Part IV has been the most interesting until now. I guess neither of those 4 points are actually used widespread, but should.
I would also add minimizing of external scripts. Also the Yahoo!’s analysis of what slows and speeds your site loading can be a useful read here, since this lead to the YSlow extension for Firefox.It is interesting to see that there is alot more that needs to be done to make a site accessible, not only in readability, but also concerning speed of information delivery and consistent information delivery.
-
On May 7, 9:35 CEST, Jens Meiert said:
Cheers, Jens!
since this lead to the YSlow extension for Firefox
Well, I think that it is nice that Yahoo made focus on performance more popular, but at the same time it should not be forgotten that YSlow is not “everything” as some of the recommended measures do not necessarily apply to all sites (like CDN use), and, more importantly, others are completely missing (code, image, HTTP headers optimization, etc.).
Interestingly, Google seems to illustrate exactly that
It is interesting to see that there is alot more that needs to be done to make a site accessible, not only in readability, but also concerning speed of information delivery and consistent information delivery.
Right, and it makes things even more exciting
-
On May 7, 20:35 CEST, Duluoz said:
Revising “title” elements, consistenly putting the site name last.
I’ve always thought of a page as though its a subset or a chapter of a book where you’d list the title of the book, then the chapter, then the page, etc. But you are absolutely right in what you’re saying in terms of SEO and I have been thinking about this all wrong. It never crossed my mind to put the page title first before the site title, but it makes perfect sense when you’re looking through search results. How this simple concept has eluded me all these years is alarming. Thanks!
-
On May 8, 12:49 CEST, Jens Meiert said:
You’re welcome, David
-
On May 13, 15:51 CEST, Richard Morton - QM Consulting Ltd said:
Jens,
Nice idea about the title element being composed according to a simple convention of reversing h2 and h1. I like that and will probably use it. Even if things get changed later it is an easy rule to follow and will help for sites with a lot of pages.
-
On May 16, 7:18 CEST, John Faulds said:
assemble the page title out of the h2 and h1 headings, in this exact order.
Some would argue that the name of your site should only be a h1 on the home page and that on internal pages, the page title should be the h1 with the site title dropped back to something else (usually a paragraph or div so as to not interfere with the hierarchy of heading tags).
-
On May 23, 0:31 CEST, Jens said:
Hi Jens,
I am very interested in your upcoming article about compression.
My provider does not offer mod_gzip at all, and I’ve been trying to create a php-based “poor man’s” gzip without success.
My main stumble points were that a php-based compression does not work with web-based services who spider the page (e.g. a keyword density tool), broke in IE7 and did not allow for my photo galleries using parameters in the url (e.g. …index.html?photo=2).
I wonder if you could cover this aspect as well, ie. what can I do if my provider does not provide.
