The importance of website performance is paramount to the experience of the end user. Every visitor to your website is a potential customer, and customers do not like waiting. Even Google, the search ranking behemoth, factors website speed in its algorithm; in other words, your site performance affects how high your webpages will appear in the SERPs (search engine result pages). Studies also suggest that operating costs are lowered when care is taken to optimize site performance. Google’s Page Speed and Yahoo’s YSlow are fantastic detective tools to run a website speed test in order to get an idea of how slow or fast your site is to start. The following are some helpful, basic ideas for maximizing the responsiveness of your website.
* EXTERNAL FILES
If you place JavaScript and CSS code in external files, the user’s web browser can cache these external resources — they won’t have to be requested on subsequent page views. Instead of inline code, remember to use external files.
* USE CACHING
If your code is repeatedly connecting to a database to load certain content, implement a caching system to avoid this overhead. Your CMS (content management system) may already have an easy way to do this.
* SERVE SCALED IMAGES
If you have one large image that appears in multiple forms as thumbnails, do not serve the big original file and rely on the browser to downscale it. Do all image resizing server-side; this decreases bandwidth consumption and increases responsiveness.
* ALWAYS PREFER TEXT
This should be a no-brainer: Do not serve images that stand in for text. Serve text whenever you can. Fancy custom fonts are still possible; learn about the @font-face rule.
* JAVASCRIPT AT THE BOTTOM
Whenever possible, put your scripts at the end of the webpage. This lets the web browser render the page before getting busy processing the JavaScript.
* STYLES AT THE TOP
Remember to place CSS code in the webpage’s HEAD section. This allows the browser to perform progressive rendering, increasing perceived performance for the user.
* WATCH THE NUMBER OF REQUESTS
When coding, try to minimize the number of HTTP requests the browser will make after loading the page. Consolidate all scripts into a single script file, and do the same with CSS. Consider combining multiple images into one master CSS sprite.