Palmer Web Marketing Blog - eCommerce Blog PWM Products Justin Palmer Contact Justin Palmer at Palmer Web Marketing Free Internet Business e-books Palmer Web Marketing & E-Commerce Blog

25 Ways to Speed Up your Website

by Justin Palmer - December 4th, 2007

Speed kills. In the case of website usability, the lack of speed kills. Many have erroneously assumed the advent of high speed internet connections would make website performance optimization irrelevant. On the contrary, it seems as internet connection speeds increase, users simply become more impatient and demand faster browsing. Below, I’ve gathered some simple (and advanced) ways to speed up your site.

Before making any changes, I would recommend benchmarking your download time with WebSite Optimization’s webpage optimization tool.

Image Optimizing Tips:

  1. Compress .jpg and .gif images: If you use photoshop, always use the “Save for Web” feature. If you don’t have access to PS, there’s a ton of free image compressing freeware out there.
  2. Compress or eliminate unnecessary Flash elements: In my opinion, flash is over-rated, slow, and buggy. It has it’s benefits, but make sure you don’t rely on it for navigation or other necessary site elements.
  3. Don’t Resize Images within HTML: Don’t use the width or height attribute in the IMG tag to resize larger options. For example, if you resize an image that was originally 300 x 300 to 100 x 100, the user still has to download the full size one. Instead, use thumbnails.
  4. Specify Image Dimensions: Don’t leave the width or height attributes blank. By doing so, you’ll slow down the browser rendering of the page, since it doesn’t know how much space to give for each image.
  5. Slice Your Images: Slicing doesn’t actually reduce image size (in fact, it increases the overall size). However, it does increase the apparent load time by making each slice appear one at a time rather than one big image popping up after it downloads.
  6. Avoid Too Many Slices: Don’t use too much of a good thing. As mentioned above, each slice actually increases the total size. I would recommend using no more than 4 slices, unless you are dealing with a huge image.
  7. Coding Tips

  8. Use CSS instead of Images: Cascading style sheets can do more than you think. Many sites make effective use of CSS formatting and eliminate the need for excessive images. Even effective brand logos can be created with CSS. CSS Zen Garden has some examples of creative use of CSS.
  9. Convert from Table to CSS based layout: Tables are ok for displaying data in columns and rows, but is grossly inefficient for designing web page layouts. By using DIV tags with CSS, you can cleanup your code extensively, which will reduce page load time and also offer SEO benefits.
  10. Use External Style Sheets: Rather than formatting through embedded inline styles in pages or html elements, reference an external css files that the entire site can reference. The browser will cache this page on the first visit, so it won’t need to download it repeatedly.
  11. Use External Javascript: Simliar to above, put all of your JavaScript functions in an external file for caching benefits.
  12. Remove Unnecessary White Space in HTML: Surprisingly, white space hogs
    a lot of disk space. Remove unnecessary space and other code clutter with this handy tool called HTML Tidy.
  13. Use Shorthand CSS: Instead of putting each CSS attribute on its own line, use shorthand CSS to prevent extra line breaks in your external CSS file.
  14. Use CSS Images instead of IMG tag: An easy way to speed up the rendering of an image is to simply call as a background of a div tag.
  15. Use Relative Links: Removing the ” http://www.yoursite.com ” from the beginning of every link will shed some weight. Just be careful not to allow people to jump back and forth between secure and insecure pages, which will generate one of those annoying “insecure items” errors in the
    browser.
  16. Specify the DocType: Pages that have the DocType specified tend to load faster than those that don’t.
  17. Server & Database Tips

  18. Reduce Http requests from other sites: Try to eliminate connecting to other servers to retrive images, audio, or video. Each http:// connection only slows things down.
  19. Don’t Use Https://: Don’t use secure pages if you don’t have to. Connecting through secure http is about 3 times slower than regular http. Obviously, your checkout process needs to be secure, but your product pages most likely do not. In addition, make sure your navigation doesn’t use relative links which forces users to flip flop between secure and non-secure pages.
  20. Upgrade your Web Server: Just like that old PC you bought 5 years ago, web servers can go down hill and become outdated.
  21. Use Gzip Compression to Reduce HTML Size: Gzip is great for compressing html code, however it does nothing for images, flash, or other embedded files. Many open source programs such as WordPress and Joomla already support it.
  22. Upgrade Server Memory: A boost in memory resources on your server can reduce processing time and greatly increase performance.
  23. Upgrade your Database Server Hard Drive: The faster your server’s hard drive is able to access data, the faster it can serve up files. A fast hard drive is especially important for your database server.
  24. Separate Content and Database Servers: If you have a high traffic, database driven website, you can benefit by placing your content on one server and your database on another. In addition to the speed benefits, it is more secure.
  25. Other Tips

  26. Loading Progress Indicators: By letting users know that you are processing their request, you can assuage their impatient fears. This won’t necessarily speed things up, but it will update them on the progress.
  27. Use AJAX instead of Page Refreshes: Interacting with a web page is far different than interacting with your computer OS. Imagine if Windows XP had to refresh the whole screen ever time you perform an action like websites do? In the next few years, we will probably see more adoption of AJAX technology, which will make page refreshing uncessary.
  28. Reduce Size & Number of Cookies: Each time a browser makes a request, cookies must be transmitted. Keep an eye on the total number and size of the cookies your site uses.

I hope you found these tips helpful. Be sure to drop a comment if you have any more ideas. Like these 25 tips? Here’s 192 more.

About Palmer Web Marketing

Justin Palmer offers eCommerce usability consulting and SEO services in Orange County. Justin has also written an eCommere ebook entitled the eCommerce Roadmap.


Related Posts:

27 Responses to “25 Ways to Speed Up your Website” by Justin Palmer

  1. Jason Billingsley Says:

    Nice points Justin. I don’t agree with them all however. I have done extensive front-end performance tuning and the top cause for most slow downs is number of HTTP requests. That is why I do not suggest slicing images. Each HTTP request typically adds .2 seconds to page download time (increase that for HTTPS).

    Typical scenario. Each menu tab is a separate graphic x7 with a hover effect image as well: 14 HTTP requests x .2 seconds = 2.8 seconds (this on even super fast connections)
    PLUS download time of each image 14 x 3k’ish = 42k

    Switch that to a CSS sprite based menu using one image and visual placement = .2 seconds
    PLUS download time of 1 image x 36k (there is data saved in each image that can be written just once – consolidation).

    WAY FASTER!

    The HTTP request issue is multiplied in different browsers. IE has a connection pool of 2, Firefox has 4. That means you can stream 2 requests from a single domain at one time. It is a browser default to protect the server.

    HINT: get around this throttle by making the requests to different domains. ex. img1.domain.com and img2.domain.com and img3.domain.com

    This will stream 6 items simultaneously. COOL.

    Javascript will also be executed before rendering visuals if requested within the HEAD. Moving JS files to the bottom of the page (before the /HTML tag) REALLY speeds things up. This can be done in MOST but not all situations.

    Other tips like using keep-alive can have major impact.

    I use a tool called HTTPWatch [ http://httpwatch.com ] to really do deep forensics on what is happening (costs $300 or so for a single user).

    I have TONS of performance tricks, but there is a great guide at Yahoo:
    http://developer.yahoo.com/performance/

    Also, install the YSlow plugin for Firebug
    http://developer.yahoo.com/yslow/

    I love this topic because it is often overlooked. Many people blame backend code for performance problems when it is often the front-end that is most noticeable by users. It is all perception.

    When Disneyland says 30 minutes from this point in the line, they know it only takes 20. You get to the ride in 20 minutes and you think everything is sooo fast and you beat the system. Perception.

  2. palmerwebmarketing Says:

    Great points Jason. I should have specified that I don’t actually think slicing saves time, although it may give the appearance that more progress is being made. Like you said, it’s about perception.

    I’ll definately checkout the guide from Yahoo.

  3. Verango Says:

    Good points. I learned something new.

    Here are a few more:

    1. Progressive jpgs appear to load faster to the user since it comes in phases.

    2. Slicing an image into smaller images can be faster in some cases if for example your image is half black and the other half white (exaggeration), but the point is that the compression can be much much better in some cases; or instead, Photoshop has some tools to pick different export settings within a single image to get slightly better compression.

    3. Caching and application optimization. Caching comes in lots of flavors, especially if you are daeling with a dynamic application. This may range from network level (squid), to server memory (memcache), to database caching (most sql programs have it), php and html caching, to much more. It depends often on your application design, so not something for hte average user, but this can mean the difference of 2, 3 or 4 times speed difference. Optimizing your application code can have similar effects same, and is best after you have done all teh easy things listed in teh article above.

  4. kvz Says:

    You might want to pack your .js files with dean edwards packer.
    And for back end (apache, mysql, etc) optimization you can look here:
    http://kevin.vanzonneveld.net/techblog/article/survive_heavy_traffic_with_your_webserver/

  5. London SEO Says:

    Again stumbled upon your post :)

    I was looking for an explanation for the website performance w.r.t images located on same webserver (in local folder) vs. images located on external image server.

    Each image causes HTTP request whether it is in local server or external server.

    Now question is do we see any benefit of hosting all image on same server?

    Any inputs?

  6. palmerwebmarketing Says:

    Good question. Many content delivery networks specialize in serving up fast content such as images and video. It can be much faster to use a delivery network instead of hosting your own images.

    Justin

  7. Simon Says:

    I have a dedicated IP can I reduce dns lookups client side on my images by having the dedicated ip in lieu of my domain name.?

    Also where I have php content with the path of say a theme as ./themename/directory/randompic.jpg

    can I replace this with my dedicated ip address so it becomes ?

    xx.xx.xx.xx/themename/directory/randompic.jpg

    thanks

  8. Steph Says:

    To Simon: The client operating system usually caches dns requests. So writing a static IP address in Html code is useless, and reduces flexibility.

  9. Play Games Says:

    Thanks Steph,

    I think you might be right on that one, I started the process of putting ip addresses in the html code but didn’t complete all of it.

    rgds

    Simon

  10. » 7 things you can do so your users won’t leave :: ENHANCE Says:

    [...] 25 Ways to Speed up your website [...]

  11. zuborg Says:

    Slicing is applicable only to very large (full screen) images.

    About IP vs. domain – using IP will allow browser to avoid unnecessary DNS lookup in case images are hosted on separate domain.
    It’s quite helpful to server to move hosting of static files into separate webserver like nginx or apache without php/cgi modules, even on same hardware, because lightened software cause less load on server.

    I would also recommend to use more visual speedmeters to test you site, http://Site-Perf.com/ for example. It supports a lot of features like Keep-Alive and HTTP-Compression and is highly customizable

  12. ahydra Says:

    Its great post all the necessary tricks are included in this post. Many thanks. :)

  13. Top 10 tips for speeding up your website - David’s Web Development Blog Says:

    [...] Need more tips?  Check out these related articles: Yahoo’s best practices for speeding up webpages YUI Blog: Image Optimization (4-part series written by Stoyan Stefanov) 20 Tips and Tricks to Speed-Up Your WordPress Blog 25 Ways to Speed Up your Website [...]

  14. Susan Petracco Says:

    I agree with Jason here about the number of http requests for sliced images. Justin, you made a good point about that already with #16 “Reduce Http requests from other sites”. This was a HUGE issue we dealt with recently on a client’s site. In addition to loading files from their own domain, they were loading the HackerSafe logo from McAfee, analytics from Google and Raven SEO, etc etc.

    YSlow from Yahoo is a great tool for optimizing sites. http://developer.yahoo.com/yslow/ It requires Firefox and Firebug.

  15. Ed Evans Says:

    I agree with Jason Billingsley as do server developers such as Microsoft. Most performance benefits can come from reducing the HTTP requests.

    I just thought the Sprite idea may need a little more explanation:
    The best way is to combine several images into a single file (called a Sprite) and then these can be placed on the page as background images and positioned with CSS.

    Typical uses would included buttons in their various states (as an example create the button background with it’s hover state as a single image so when you hover you simply change the position of the background image, rather than downloading a new image on the fly), custom fonts can be put in one file and inserted using image replacement, and there are of course others…

  16. Web Hosting Delhi Says:

    i agree with Justin Palmer we use CSS and reduce formatting to direct HTML.
    We always try to call custom CSS and replace table tag to div as much as possible.

  17. You are now listed on FAQPAL Says:

    25 Ways to Speed Up your Website…

    Looking to speed up your website? Try these tips….

  18. links for 2009-02-18 | This Inspires Me Says:

    [...] 25 Ways to Speed Up your Website (tags: web optimization speed) [...]

  19. Top tutorials week ending 02/21/09 Says:

    [...] 25 Ways to Speed Up your Website – Palmer Webmarketing [...]

  20. Julio, from Ecuador Says:

    Great, very good tips, i have one more.. If you wish loading whatever image as background, before loading other page you can put on it on some place principal page with a size of 1px width and heigth where doesn´t see it.

  21. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? Says:

    [...] 25 Ways to Speed Up your Website Great ways to speed up your website!! (tags: web tips optimization speed) [...]

  22. the_guv Says:

    cheers Justin,

    Handy stuff.

    Couple more tips:-

    For platform users, deactivate unwanted plugins/modules.

    For VPS users, check out the Nginx web server, which is better than Apache or Lighttpd.

    Many tx for this.

  23. sunnybear Says:

    All this can be done automatically. And there has been developed open source tool to do all this stuff – Web Optimizer ( http://code.google.com/p/web-optimizator/ ). It includes gzip, merging, minify, CSS Sprites, data:URI, multiple hosts,unobtrusive logic, etc, etc.

  24. Reducing Friction in the Sales Process | Get Elastic Says:

    [...] Our friend Justin Palmer offers 25 ways to speed up your website. [...]

  25. Imprinted Flash Drives Says:

    Very helpful and useful information. I wish I found this article before I’ve done all this already. But however, I suggest everybody to follow this rules.

  26. hermes kelly bag Says:

    agree with Jason here about the number of http requests for sliced images. Justin, you made a good point about that already with #16 “Reduce Http requests from other sites”. This was a HUGE issue we dealt with recently on a client’s site. In addition to loading files from their own domain, they were loading the HackerSafe logo from McAfee, analytics from Google and Raven SEO, etc etc.

    YSlow from Yahoo is a great tool for optimizing sites. http://developer.yahoo.com/yslow/ It requires Firefox and Firebug.

  27. hermes kelly bag Says:

    cheers Justin,

    Handy stuff.

    Couple more tips:-

    For platform users, deactivate unwanted plugins/modules.

    For VPS users, check out the Nginx web server, which is better than Apache or Lighttpd.

    Many tx for this.


Blog Updates
RSS Twitter