WordCamp San Francisco 2009: Steve Souders Speeds Up Websites
By Lorelle VanFossen, posted May 30, 2009 at 4:22 pm | No Comments ยป
Live Blogging from WordCamp San Francisco 2009
Steve Souders is a high performance website expert formerly of Google. He worked on the web performance and open source initiatives and is the author of High Performance Web Sites. Steve serves as co-chair of Velocity, an event to promote web performances and practices for high performance sites, and co-founder of the Firebug Working Group.
He says that a lot of the problems associated with slow speeds for WordPress blogs are not the fault of WordPress but of the HTML in the WordPress Theme and Plugins.
He spoke about his work and books, including the sequel to his first book, “Even Faster High Performance Web Sites.
He recommends combining stylesheets so there are fewer requests to HTTP since it requires more overhead handling. For Parent/Child Themes with many stylesheets to handle all of the style requests, combine them into one or two or as few as you can. It works fine for those distributing WordPress Themes, as it makes it easier to have the Theme be more flexible, but if you are developing or designing your own, combine, combine, combine…
Don’t use @import in stylesheets. It loads them in parallel. If the first one has an @import, it sees it, then loads the next one, and if there is another @import in that stylesheet, it loads it again at that pot, creating sequential loading, not parallel, which causes the page to pause and take longer to load.
If you are loading extra stylesheets for different browsers, again, combine them into one to reduce the load time, even if they don’t apply to the masses – or maybe they might, such as the custom styles necessary for Internet Explorer versions.
The same thing applies to JavaScripts and other redundant scripts. Reduce them as much as possible. Concatanate jquery and AJAX scripts as much as possible. Scripts block downloads from moving forward. They have to load first, delaying the loading of the rest of the page elements and code.
He also recommends a technique called “lazy loading” described in Wikipedia, as a way to help delay and structure the loading of scripts to bypass the problem of delayed loading of all the bits and
He recommends using PHP CodeSniffer to help track down all the scripts and page loading slugs, the things that are slowing down your page execution and loading.
He also recommends combining CSS background images into sprites, making fewer HTTP requests for “static” images. CSS Sprite Generator will help to create these a bit easier, though he admits that there needs to be some more productive methods. CSS Sprites generator or CSS Sprite Generator help to create CSS sprites which reduces the load on the page.
Optimizing images is critical to really speeding up a page. Use smaller, lower resolution images, or use better compression to reduce the file size and page loading of larger images. smush.it! helps to reduce the image compression smaller. He also recommends preloading images when possible so they will load faster in parallel.
GPZIP is another way of speeding up the pages, empty cache before and after, use primed cache before and after, and a few other options.
As he spoke, he worked on a live page to make it faster and more streamlined, showing us the tests as he went through the process. Slides will be on his site.
They key to a better user experience is having a faster website so they spend more time on content and action and interaction than waiting for page loads.
