Tam Nguyen Photography

New York Beauty and Fashion Photographer

Page Speed and the Solution to My Problem

Posted on December 18, 2010 in Personal

Page Speed and the Solution to My Problem

In case you’ve missed it, I had a small issue with my site last week. Here’s a quick recap:

You know when you share a link on Facebook, you drop it in your status box, and Facebook parses and fetches the link’s content, along with the thumbnail image right next to the post? Well, that’s not what happened here. Instead, all I got was the URL, the link’s content underneath my name, but without the thumbnail. This was driving me crazy because everything appeared perfectly fine on my site; so I had to figure out why it was doing that.

I later found out what caused it. Turns out, there was random string that appeared in the source url of my <img> tags. An example would be “ic.b9c300ea975508c9bb47eb8bd273d073.136x136x”. I tried every method there was to narrow why this was happening; I posted my question on a bunch of sites like stackoverflow.com, wordpress.stackexchange.com, superuser.com and WordPress support forum, but no one was able to answer my question. Luckily, a few days later, this is what I saw in the url:

http://cdn.tambnguyen.com/imgs/xxmas_party1.jpg.pagespeed.ic.1xHw5gUYym.jpg

You notice the “pagespeed.ic.1xHw5gUYym” part? I was able to google and find out what this was all about. It appears that DreamHost had enabled a feature called mod_pagespeed, a project hosting on Google Code.

Page Speed (http://code.google.com/speed/page-speed/) is a tool and library that identifies improvements that can be made to web-sites to improve their latency. mod_pagespeed automates the application of those rules in an Apache server. HTML, CSS, JavaScript, and images are changed dynamically during the web serving process, so that the best practices recommended by Page Speed can be used without having to change the way the web site is maintained.

I looked into how to tune and set up Page Speed to help your site’s performance. Here’s my final solution, added to my .htaccess file:

<IfModule pagespeed_module>
    ModPagespeed On
    ModPagespeedDisallow *timthumb.php*
    ModPagespeedDomain http://tambnguyen.com
    ModPagespeedDomain http://cdn.tambnguyen.com
    ModPagespeedDomain http://*.google.com
    ModPagespeedEnableFilters outline_css
    ModPagespeedEnableFilters outline_javascript
    ModPagespeedEnableFilters add_head
    ModPagespeedEnableFilters move_css_to_head
    ModPagespeedEnableFilters combine_css
    ModPagespeedEnableFilters rewrite_css
    ModPagespeedEnableFilters rewrite_javascript
    ModPagespeedEnableFilters inline_css
    ModPagespeedEnableFilters inline_javascript
    ModPagespeedEnableFilters rewrite_images
    ModPagespeedEnableFilters insert_img_dimensions
    ModPagespeedEnableFilters remove_comments
    ModPagespeedEnableFilters extend_cache
    ModPagespeedCssInlineMaxBytes 5120
    ModPagespeedImgInlineMaxBytes 5120
    ModPagespeedJsInlineMaxBytes 5120
    ModPagespeedCssOutlineMinBytes 6144
    ModPagespeedJsOutlineMinBytes 6144
</IfModule>

Also, I’ve made some changes to my site’s caching feature. Check out the performance of the browser on second load onward!

Problem solved. I’m back to being a happy blogger 🙂

4 Comments

  1. Gabriel April 19, 2011

    so did you add all this code and it fixed the problem?

    ModPagespeed On
    ModPagespeedDisallow *timthumb.php*
    ModPagespeedDomain http://tambnguyen.com
    ModPagespeedDomain http://cdn.tambnguyen.com
    ModPagespeedImgInlineMaxBytes 5120
    ModPagespeedEnableFilters outline_css
    ModPagespeedEnableFilters outline_javascript
    ModPagespeedEnableFilters add_head
    ModPagespeedEnableFilters move_css_to_head
    ModPagespeedEnableFilters combine_css
    ModPagespeedEnableFilters rewrite_css
    ModPagespeedEnableFilters rewrite_javascript
    ModPagespeedEnableFilters inline_css
    ModPagespeedEnableFilters inline_javascript
    ModPagespeedEnableFilters rewrite_images
    ModPagespeedEnableFilters insert_img_dimensions
    ModPagespeedEnableFilters remove_comments
    ModPagespeedEnableFilters extend_cache
    ModPagespeedCssInlineMaxBytes 5120
    ModPagespeedImgInlineMaxBytes 5120
    ModPagespeedJsInlineMaxBytes 5120
    ModPagespeedCssOutlineMinBytes 6144
    ModPagespeedJsOutlineMinBytes 6144

    • Tam Nguyen April 19, 2011

      Yes. Although, I’ve commented out the last 5 lines to run my website with Google’s default setting.

  2. Gabriel April 19, 2011

    I’m sorry, but I’m a newbie to all this…

    where do I find the htaccess file?

    Thank you

    • Tam Nguyen April 19, 2011

      The .htaccess file to modify should be located in your web root directory. It’s usually hidden. I personally use FileZilla to access my web server, and FileZilla allows me to view the file. I download the .htaccess file to my local computer, change it, and the upload it back up.

      I hope that helped.

Leave a Reply

Your email address will not be published. Required fields are marked *