Find Us On Twitter
Recently I attended the WordCamp 2010 Conference for WordPress. This is the second year the conference has been around and just hearing that the numbers of attendees jumped from 200 to 500 just proves how quickly WordPress is gaining popularity as a web content (not just blogging) platform
Speed & Page Rank
Some of the surprising things I took away from the conference (other than learning more about WordPress) is that Google now takes into account speed as a criteria in its PageRank algorithm. Sitting back and thinking about it, it makes perfect sense since slower websites are less desirable even though it’s content maybe great. None wants to sit and wait for a webpage to load anymore and would probably hit the back button to go back to the SERP before waiting for the page to load and actually read the content.
Some of the things they suggested to speed up a website are things we already do on some of our bigger sites such as minifying JavaScript include files. They also suggested that CSS files also be minified if speed is a key issue. We haven’t done this as of yet since it creates an extra step and we haven’t seen a big enough impact in performance to inherit an extra step in our development/maintenance procedures. But as webpages become more complex and CSS files become increasingly larger, we may have no choice but to add this extra step in future websites. Another suggestion that was thrown around was to add CSS include files and/or definitions in the top portion of the HTML file. The idea is to have the browser be able to pre-render right away the layout of the website while it is loading the code which it does in a top-to-bottom manner. Personally, I never heard of a performance differences based on where a CSS definitions are located. We do this by default anyways, so it isn’t a game changer for us to implement this tip.
Another tip that was given which I’ve had personal experience with is to put Javascript functions at the bottom of the page, especially those that are stored in files on a different server. For example, our Google Analytic Javascript functions rely on data coming from Google’s server. Sometimes our pages would load noticeably slower because there would be a hiccup when our server would have to wait on a request from Google’s server. To combat the issue, the Google Analytics code is added after the <body> tag so that the page is already rendered by the time a request to Google’s server is needed.
eAccelerator is an open source PHP accelerator & optimizer that caches PHP in its compile state. By design, webpages have to be interpreted, and then compiled, and then display to the screen. By skipping the first step, lots of time and resources can be saved on a heavily used website. We haven’t implemented this yet, but it sounds very promising.
Have you downloaded an image from a website and get a goofy image that contains almost all the icons and pictures of the whole site? Perhaps something that looks like this?
(Image taken from www.SoLongInsecurity.com)
This is called CSS Sprites, and the idea behind this is that it’s more efficient to download 1 big file than it is to download several small files due to the overhead involved while requesting files from a server. So for example, downloading a single 5kb file is more efficient than downloading 5 1kb files. I think this solution should be reserved for only websites that gets extremely large amount of traffic such as an Amazon or a Google site since maintenance would be painful with this method.
So that’s a jist of what I learned at WordCamp 2010. If you want to learn more about WordPress and pickup additional web development tips, this is the place to be. I’ll definitely be looking forward to attending this conference again next year!
This really solved my problem, thank you!