Website Optimization Measures, Part IV
Published on May 5, 2008 (⻠February 5, 2024), filed under Development (RSS feed for all categories).
This and many other posts are also available as a pretty, well-behaved ebook: On Web Development. And speaking of which, hereâs a short treatise just about managing the quality of websites: The Little Book of Website Quality Control (updated).
Once again, though already covering a few weeks of various improvements, some of which have been implemented in Bremen, others in Zurich, all on some of my sites. Enjoy additional optimization tips, this time touching typography, usability, SEO, and performance.
-
Applying the typographic scale. Thanks to Mark Boulton I went for another typography update 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: Typographic scale. (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, consistently 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. After all, itâs the content that counts, and the first words are important to illustrate whatâs going on in the document in question. While I have been applying this method for ages, there still were a few â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 a convention to assemble the page title out of the
h2
andh1
headings, in this order. -
Using a content delivery network. Since you probably noticed this measure in a recent tip, I wonât repeat what I wrote there. Using a CDN is a nice exercise, even though itâs a large, widespread audience that makes them impactful; other performance measures can be more important.
-
Enabling file compression. Some of you may 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 application/xml text/css text/html text/javascript text/plain
Be aware, however, that some providers do not allow the use of
AddOutputFilterByType
or the corresponding server module, respectively (which can 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 only applies compression but also returns aVary: Accept-Encoding
header (to avoid proxy problems), and that I lazy guy will write about compression (and alternatives toAddOutputFilterByType
) in more detail at a later point.
Less detailed information than usual, but please keep in mind that this series of posts has to be seen as a loose log of measures I apply to my sites, rather than a comprehensive guide for more quality of other sites.
This is a part of an open article series. Check out some of the other posts!
About Me
Iâm Jens (long: Jens Oliver Meiert), and Iâm a frontend engineering leader and tech author/publisher. Iâve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, Iâm somewhat close to W3C and WHATWG, and I write and review books for OâReilly and Frontend Dogma.
I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
If youâd like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!
Comments (Closed)
-
On May 5, 2008, 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, 2008, 9:35 CEST, Jens Oliver Meiert said:
Cheers, Jens!
since this lead to the YSlow extension for Firefox
Well, I think that itâs nice that Yahoo made focus on performance more popular. 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, as others are completely missing (code, image, HTTP headers optimization, &c.).
Interestingly, Google seems to prove 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, 2008, 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 13, 2008, 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, 2008, 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, 2008, 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.
Read More
Maybe of interest to you, too:
- Next: CSS: Simple Rules for Better Organization and More Efficiency
- Previous: The Worldâs Best HTML Template
- More under Development
- More from 2008
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.infoâand The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.