Home› General support

Optimization:- Making zenphoto super-faster as per YSlow - Firebug plugin

vikaskbh Member
in General support
AS per yahoo! optimization guidelines http://developer.yahoo.com/yslow/

I have tried to make this site as optimized as possible, as per YSlow. Finally, I could achieve A grad with 90+ score for http://actress.bollysite.com with CDN as the same site.

Steps:-

Step 1:- Edit .htaccsss file and add the following lines.

----------------------------------
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

FileETag None

----------------------------
that will make your image cache 1 year+ & remove Etags if server attach any.

Step 2:- If your server is supporting gzip compression, edit index.php & add following line at top

----------------------------
header("Vary: Accept-Encoding");
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler");
else ob_start();
----------------------------

Step 3:- Convert your JavaScript & CSS into PHP code, by simple echo statement. & follow step 2 on them.

& load them as follow...
e.g.
<link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/rating.css.php" />

which will make your js,css compressed & faster.

========================================================
ZenPhoto may add this changes into cvs/svn repository.

Comments

  • aitf311 Member
    I've tried step 1 but now I get a 404 error when I click on a gallery name. I have taken it out of htaccess but I still get this error, any help?
  • vikaskbh Member
    There may be two possibility for this error.

    #1:-
    ---
    open httpd.conf

    <Directory "C:/Program Files/xampp/htdocs">
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    # Options FileInfo AuthConfig Limit
    AllowOverride All
    Order allow,deny
    Allow from all
    </Directory>

    AllowOverride All may be AllowOverride None

    So, make it AllowOverride All

    #2:-
    ---
    line
    LoadModule rewrite_module modules/mod_rewrite.so
    is commented (#LoadModule rewrite_module modules/mod_rewrite.so)
    So try to uncomment it.
  • vikaskbh Member
    If you are testing on windows wamp/xampp you need to restart apache after this changes.
  • vikaskbh Member
    For more help look at:-

    http://phaedo.cx/archives/2007/07/25/tools-for-optimizing-your-website-etag-and-expire-headers-in-django-apache-and-lighttpd/
  • aitf311 Member
    I got #1 and #2 to work and did a couple tests on the testing theme. I ran a the same page 3 times to see how many seconds it took to load without #1 and #2 applied: .150 seconds.
    Then I tried it with the optimizations applied: .1178 seconds. Very cool! Over a 25% decrease in time!

    I tried renaming the CSS file to .css.php and the css file would not load. Any ideas?
  • vikaskbh Member
    You might have css path problem in link tag.

    Here is my sample CSS...

    <?php
    header("Vary: Accept-Encoding");
    if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler");
    else ob_start();
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $gd = "Expires: Sun, 1 Jan 2017 05:00:00 GMT";
    header($gd);
    ?>
    body{background: #FFF;margin: 0;padding: 0;text-align: center;font: normal 11px Verdana, Arial, Helvetica, sans-serif;color: #888;}
    #main{text-align: left;margin: 0px auto 5px auto;padding: 0;width: 100%;background: #FFF;}
    ...

    Yes, please don't forget to minify it (by removing white spaces etc.)
  • vikaskbh Member
    Main magic is... Just wait till your entire page is loaded... browse some more page... you will notice common components among all the pages are not loaded again from server & only different components are get loaded.

    Whenever you will browse already browsed page(album,index etc), always it's served from browser cache. So, you will feel its loaded even faster then google homepage.
  • trisweb Administrator
    This should already happen in a correctly configured server... especially step 3; the JS and other static files should be cached and GZIP-compressed like any static files. I'm not convinced this should help all that much.

    By the way, basically what you're doing is configuring the application for something the server should be doing -- but if you don't have control over the server's configuration, this is what you have to do to get the same effect.

    I don't recommend this for most people; the default server settings should be just fine and won't issue any further overhead (as in step 3 -- I promise static files are better than PHP-evaluated scripts, even if the PHP scripts are loaded less).

    In any case, I assure you zenphoto is one of the lightest weight gallery apps out there, so it shouldn't need much if any tweaking to make it blazing fast.
  • Ein Member
    As per step 3 (gzipping files) add

    <FilesMatch "\.(js|css)$">
    SetOutputFilter DEFLATE
    </FilesMatch>

    to your htaccess file (assuming apache). Now your server will handle compression instead of calling php, which is faster (especially if your sever is not using fastcgi php), and much less resource intensive for the server.
    There's ways of having apache automatically cache the gzipped content if server cpu usage is a concern.

    My server is lightly loaded (cpu and bandwidth wise), but regardless making some of the above tweaks (set expires on certain files, js/css gziping) has made it much more usable.

    If anyone is interested, I was considering writing a ie specific background cacher (similiar to adding mozilla pre-cache tags, but done via js in a hidden div). If there's any interest, I'll go ahead with it. User experience is more important to me than server utilization.
  • aitf311 Member
    Very interested, and thank you for the extra compression code!
Sign In or Register to comment.