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.
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.
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:
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:
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.
Optimize the order of styles and scripts
This was a simple copy and paste fix where we made sure all of our CSS is
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.
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!
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)