Couple of weeks ago we refreshed the servers serving www.sjsu.edu & my.sjsu.edu . One of the objectives behind the refresh was to lay the foundation for the website relaunch and new content management system (scheduled in the next few weeks). We took this opportunity to make numerous improvements on the server side to improve the user experience specifically page speed. Below are notes and thoughts.

We used Google’s Page Speed plugin & developer tools to identify areas for improvement on the server side. We turned on compression, page caching & combined images into CSS sprites to name a few. We were able to see the a the page score improve drastically. Example: my.sjsu.edu page speed score changed from 44/110 to 80/100.

Page speed scores for my.sjsu.edu before and after the project.

Here are some of the changes we made:

Replaced images with image sprites

Image sprites are a single image file with several icons in them (for example, Facebook, Twitter, and YouTube). The beauty in image sprites is that you are only making one server request, meaning that you are only downloading the image once rather than several different images.

Facebook, Twitter, and RSS icons as image sprites on SJSU.edu

In the image above, the Facebook, Twitter, and RSS icons are one image sprite.

How did we do it?
We set this single image file as our background image in our CSS for our links, assigning each one a specific position and a specific size of 25 pixels by 25 pixels. Each icon has its own class name, that way the background image is adjusted to show that image specifically.

Here is an example of the CSS class for showing the Facebook icon on SJSU.edu:

.social_btn_f
{
background-attachment:initial;
background-clip:initial;
background-color:transparent;
background-image:url(/pics/icon/social_icons.png);
background-origin:initial;
background-position:0;
background-repeat:no-repeat;
float:left;
height:25px;
width:25px;
line-height:0;
overflow-x:hidden;
overflow-y:hidden;
text-indent:-9999px;
margin-right:5px;
}

What about alt tags? Image sprites do not need an alt tag because you can type directly into the link what text you want a screen reader to pick up. This text is hidden from the viewer and you are left with just the icon.

Here’s an example of the Facebook link:

<a href=”http://www.sjsu.edu/about_sjsu/links/facebook“>Facebook</a>

Reduced image file size

Another thing we did was reduce the image file size of some of our common images. We did this by simply changing a JPG image to a PNG in Photoshop. You can further compress the file in Photoshop so the output is an even smaller file.

Avoid @CSS import

In SJSU’s style sheet (CSS file), there was a CSS file being called into it for the Google Calendar styling. So as SJSU.edu was being sent to the browser, the browser would have to slow down to first render the imported CSS file into the main CSS file, before rendering the rest of the site in the browser. This imported CSS was obviously added in at a later point.

Rather than having the imported style, we included the CSS from the imported CSS file into the main CSS file. This got rid of that hiccup for loading one CSS file into another, which improved our page speed score.

Inline small JavaScript

In Web Design, it is generally good to have JavaScript in external files and have them loaded. That way they are only loaded if they are needed. We had an external JavaScript file that was two lines of code. Loading the external file took up more page loading time than if it were in the actual HTML page.

We took out the external JavaScript file and included the code on the page.

Optimize the order of styles and scripts

SJSU.edu used to be set up where some CSS files would load first, followed by some JavaScript files, and then more CSS files. This was not good because the website was not fully graphically loaded first with the CSS before the interactive elements were loaded with JavaScript.

This was a simple copy and paste fix where we made sure all of our CSS is
first in our HTML file, followed by the JavaScript.

Minify CSS and JavaScript

For those of you who are not code savvy, white space takes up bandwidth resources in web scripting. The script/ code may be easier to read from the Web Designer’s standpoint, but it does add on page load times. The browser has to read from the sever all of the additional white space as it renders each item the way it is supposed to look on the web page. Visitors to SJSU are most likely not going to be reading our source code, so we decided to minify it.

We compressed the CSS and JavaScript using Google’s Page Speed tool. This got rid of all of the white space. However, it also got rid of our comments, which are notes in our code that tell us what the code is supposed to do. We saved a back up of our old CSS and JavaScript files, so that way if we need to make changes, we can easily do so (by reading the commented code) and then re-compressing the code when uploading it to the server.

If you are a site owner, try out some of these recommendations on your site. You will see a difference in how fast your page loads!

Conclusion

The most import lesson we learned was that improving page speed is a coordinated effort that includes configuring your web servers, designing your templates and content creation. We are applying what we learned to the new templates and educating content providers about creating content that is web & search friendly. We are also waiting for improvements to mod_pagespeed to handle high performance sites (Issue 334: mod_pagespeed uses too many threads)