Jet PlaneSummary:

  • Apache web server tuning
  • Place images and big files to a different host
  • Use lightweight WP Themes
  • Modify and tidy selected WP Themes
  • Use WP Super Cache
  • Reduce plugin use and remove bad ones.

After the hardware refresh and Database tuning, it is now time to look into the applications. For this site, WordPress and Apache HTTPD are the main components for the presentation layer. WordPress is the Content Management System written in PHP. Apache HTTPD is the web server. Both programs are Open Source and widely supported by their respective communities. Both programs also offer flexible configurations, enabling many optimization opportunities.

Compiling Options for Apache HTTPD

With Apache HTTPD, compiling the program from the source code is the most recommended way to start. This provides a way to remove any unnecessary modules that are included. To do this, use the configure script to exclude non-essential built-in modules such as IMAP or user directory support:

./configure –prefix=/usr/apps/apache2 \
–disable-imap \
–disable-userdir

It is also recommended to compile the modules using shared libraries, instead of statically linked, to reduce the memory usage during runtime. Add this option in the configure script:

–enable-so

Any additional modules can now use the “=shared” suffix to enable shared library.

Enable Caching on the Client Side

With Apache HTTPD version 2.0, or above, the use mod_headers module and ETAGS are recommended. Etags headers enable caching of static files, such as images or Flash, on the client’s browser side. The main advantage is to reduce the web server’s work to upload the files. Consequently, it also reduces network bandwidth utilization. This is an Apache HTTPD extension module. Run the configure script with the following:

–enable-headers=shared

Edit the httpd.conf file in Apache to include:

ExpiresActive On
ExpiresByType image/jpg “access plus 7 days”
ExpiresByType application/x-shockwave-flash “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 30 days”
FileETag none

Etags headers are especially useful for repeat and frequent visitors. They are supported in most modern browsers.

Outsourcing Images

To reduce bandwidth consumption on the main blog site, consider the option to move images to a different server, such as Flickr, or a separate web hosting company. One can expand this further to include Flash or client side Javascript files, if they are used often. If this is not an option, then the ETags caching procedure above is the best way to speed up pages with a lot of images to download.

WordPress Tuning

WordPress has an awesome set of free themes to choose from. It is best to pick a simple theme and build on it. Once a lightweight theme has been selected, review the included PHP codes and strip out the unnecessary DB lookups to form a file path. For example,

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

Can be changed to:

<link rel=”stylesheet” href=”/opt/apache2/htdocs/wp-content/themes/myTheme/style.css” type=”text/css” media=”screen” />

Use an Open Source tool called tidy, to correct and compress style sheets into smaller file size. Note: backup the original CSS file, in case there is a need to modify the style sheet.

Remove any unnecessary nice-to-have features in the PHP codes, such as rotating headers or different background images on pages.

Evaluate WordPress Plugins

Rendering a dynamic page for a blog site takes up system resource. The job of caching plugins, such as WP Super Cache, is to convert a dynamic page into a static page, bypassing the need to execute PHP codes and perform DB lookups. The installation is not entirely straight forward, but the result is amazing and is worth the effort. For further explanation of the plugin, visit Donncha’s WP Super Cache page.

Not all plugins are created equal. There are plenty of similar plugins available for the same job. Pick the ones that are small in size and operates in a simple way. The ones to avoid are plugins that rely too much on another site’s access to pick up client-side javascript codes, icons, etc. An example is the ShareThis plugin that calls it’s home site all the time. This plugin is being used on every page, including the home page, so it just adds to the pages loading time. The alternative is Joost De Valk’s Sociable or Valent’s Social Bookmarking Reloaded plugin, which is much smaller and simpler to use.

Finally, deactivate and remove all unused plugins.

Further readings: Web Site Optimization – 13 Simple Steps, Web Site Optimization – Fast Downloads, Web Optimization Options.

Tags: , , ,

5 Responses to “Web Site Tuning – Web Server and WordPress”

  1. Wow! Excellent article Rudy! I definitely have some tweaking to do.

  2. J.F.H. says:

    Nicely done Rudy!

    I actually just took off the ShareThis plugin and switched to Sociable. Much MUCH better in my opinion.

    I have to start using another place to host my images…it’s just so easy to use the provided WordPress uploader. I wonder if there’s a plugin that adds a Flickr or Photobucket upload box to the “write” page? That would be awesome.

    J.F.H.’s last blog post..Has Your Blog Been Sucked Down the Google Drain Pipe?

  3. rudyamid says:

    @Michael:
    Thanks. Good luck with the tweaking and let me know how it works out for you.

    _
    @JFH:
    I also tried and removed Twitter Tools and Yahoo Shortcuts plugins. I need to start boycotting Alex King’s plugins from now on. 🙂

    I’ve always struggled with images, it’s a long process for me. Finding, editing, uploading, manually link to it, adding titles, etc. I wish there’s a drap/drop solution for the WP editor too.

  4. Tim says:

    There is an important issue to consider when using a free service to offload your images. Since most of the popular services like Flickr and Photobucket are actually photo sharing sites, copyright becomes a concern. Be sure to read the service disclaimer and decide if it suits you. Moreover, you may not want your images exposed to the users of the photo sharing site.

    I recently came across a service called SteadyOffload (http://steadyoffload.com) that provides an innovative, subtle and convenient way to offload images. The whole mechanism there is quite different from ordinary photosharing sites. Instead of permanently uploading your images to another host, their cachebot crawls your site and mirrors the content in a temporary cache on their servers. All you have to do is include a little piece of 1K JavaScript in the head of HTML pages. The image remains stored on your server while it is being delivered from the SteadyOffload cache. The URL of the cached image on their server is very scrambled and is changing often, so you don’t have to worry about hotlinking or copyright issues.

    Cost of bandwidth varies between $0.1 and $0.3 per GB depending on the utilization. Performance seems to me pretty good at this point.

    It’s definitely worth trying because it’s not a photosharing site like Flickr or Photobucket but exactly a service for offloading static content.

  5. rudyamid says:

    Hi Tim. Thanks for the detailed info on that SteadyOffLoad site. It’s something to consider if anyone wants to pay for such services.

    Your concern about using Flickr got me looking into the Yahoo’s term of service:

    9b:
    With respect to photos, graphics, audio or video you submit or make available for inclusion on publicly accessible areas of the Service other than Yahoo! Groups, the license to use, distribute, reproduce, modify, adapt, publicly perform and publicly display such Content on the Service solely for the purpose for which such Content was submitted or made available. This license exists only for as long as you elect to continue to include such Content on the Service and will terminate at the time you remove or Yahoo! removes such Content from the Service.

    Then I read the Flickr Photos FAQ:

    If the photo isn’t yours, you may not be able to access the Different Sizes page (if the owner doesn’t allow downloads of the photo).

    Note: Per our Terms of Use, whenever you place an image you’re storing on Flickr on an external web site, you must also include a link back to Flickr.

    From my own interpretation of these terms, I get the following:

    – Flickr gives the right for a user to take what’s in the public areas of the site.
    – Flickr wants me to link back to the original Flickr site when the image is used at another site.

    So it is ok for me to take photos from that are publicly available via Flickr, and they’re encouraging me to even link back to it.

    Besides, if the images that I uploaded are my own photos, I don’t see how Flickr can disallow me to link to my own work. With thousands of images on Flickr, it’s impossible to ensure copyright is enforced. That’s why they’re encouraging Flickr photo owners to make their material private if they don’t want it copied or linked to.

    There is one caveat to linking an image directly from Flickr: if they decide to change the URL to the image, I will get a 404 error and get a broken image on my site. If I have a ton of links, it will be painful to fix those broken links.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>