Skip to content

Posts from the ‘Optimization’ Category

25
Feb

Web Page Optimization – Changes I Made for Page Loading Speed

It has been years since I optimized the page loading speed at GoToQuiz. At that time, image sprites and CSS/javascript minification were the state of the art. In the intervening years, though, further progress has been made. Of particular note is the “retirement” of older versions of Internet Explorer, and the emergence of CSS3 and HTML5, which allows developers the ability to further streamline their sites. So as I am in the process of revamping the UI, I’m taking advantage of the latest techniques to boost page loading speed. Be aware, this is nothing revolutionary–this blog post is simply an overview of which changes I’m making, and why.

Migrating pages over to HTML5 allows the markup to be more semantic while taking fewer bytes–a double win.  Using tags such as nav, section and article helps alleviate so-called “div-itis”, allowing cleaner markup and a smaller overall filesize.  HTML5 also follows the maxim of “convention over configuration”, letting you eliminate unnecessary attributes like type=”text/javascript” on script tags, for example.

The adoption of CSS3 has provided many possibilities for creating beautiful visual effects without using image files.  Here is an example: on an early iteration of the design of the various headings on GoToQuiz, I used this sprite combined with CSS to create the rounded color bar appearance.

Read moreRead more

3
Feb

Prefetching Javascript and CSS

Prefetching javascript and CSS files can improve the page load times as users navigate your site.  This creates a better user experience and may even improve your search engine rankings.

I’ll describe an easy prefetch technique useful in situations in which you are reasonably sure the user will navigate from Page A to Page B.  This situation typically involves the user filling out a form.  Chances are high that if a user begins to fill out a form, she will eventually submit it, arriving at Page B.  If you prefetch resources that will be needed by Page B, it’ll load faster when the user navigates to it.  This is a technique I’m using on our lifespan test.

Read moreRead more