Faster load times

Dissatisified with the load time of my blog on a mobile phone using GPRS, i wanted to pimp my site to get better load times.

• page load is slow and jumpy. Some background images are loaded very late, which leaves the initial state unreadable for a few seconds. Looks very unprofessional.


• snaps.com takes up a lot of time, as it loads much stuff and injects a lot of javascript code into the page.


• twitter plugin takes up time as it does a real HTTP request on each request. Okay, there seems to be a cache somehow, but twitter is awfully slow and the plugin requests new updates every minute or so. I decided that it's not worth the fancy widget.

See how the page load time could be improved from 1.5-7.5 seconds down to 0.5 seconds with some quick changes done in 5 minutes.

Update: Unfortunately, initial load time from U.S. is still rather slow due to a lot of JavaScript files being requested. I used webpagetest.org to do a tests and it shows how the latency kicks in and produces 6.5seconds load time of the 'optimized' page. Have to do a lot more than that to get this better.

Measured using HttpWatch Professional in the newest Microsoft Internet Explorer 8 on Windows Vista and a T-DSL 6000:

• General: serendipity.css is not cached (9kb, 0.2s)


• General: pngbehaviour.htc is requested twice, both uncached (2x 2.5k, 2x 0.15s)


• Page load in IE8: 1.551s (59kb, 25 requests)


• Page load in IE8:3.917s (51kb, 26 requests)
  3.459s for json request to twitter.com
  0.587s snap.com javascript


• Page load in IE8: 7.501s (52kb, 25 requests)
  6.206s for json request to twitter.com. Wow that's slow.
  0.352s snap.com javascript


• Page load in IE8: 1.524s (52kb, 25 requests)
  0.997s for json request to twitter.com
  0.284s snap.com javascript

hmmm, look at those times. They go up and down and heavily depend on how fast twitter is responding. That's a dependency I'd like to remove.

Then, I did some improvements, mainly by adding Cache-Control headers and removing the two plugins.
Removing twitter and snap.com plugins:

• General: Wow, there are still a lot of HTTP requests for images. They should have been cached.


• Page load in IE8: 1.615s (46kb, 20 requests)


• Page load in IE8: 0.885s (46kb, 20 requests)


• Page load in IE8: 0.886s (46kb, 20 requests)

Enabling caching for serendipity.css (it's created dynamically by a PHP script and changes when the style theme is replaced):

• General: All the images loaded from the CSS file previously are now implicitly cached, too. Perfect.


• Page load in IE8: 0.826s (37kb, 3 requests)


• Page load in IE8: 0.611s (37kb, 3 requests)

Enabling caching for pngbehaviour.htc, a static file:

• General: Perfect now, after we're utilizing the browse cache, only one HTTP request is left for the actual content of the page.


• Page load in IE8: 0.462s (32kb, 1 request)


• Page load in IE8: 0.436s (32kb, 1 request)


• Page load in IE8: 0.453s (32kb, 1 request)

.

Now, i'm satisfied and the time to load the page on my old iPhone is acceptable even with GPRS.

For reference, the changes in the serendipity.css.php file:

elma htdocs # svn diff serendipity.css.php
Index: serendipity.css.php
===================================================================
--- serendipity.css.php (revision 13)
+++ serendipity.css.php (working copy)
@@ -50,13 +50,19 @@
 }


-if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) {
-    header('Cache-Control: no-cache');
-} else {
-    header('Cache-Control:');
-    header('Pragma:');
-    header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time()+3600));
-}
+// mhaller 2009/04/06 Enabled caching to speed up site
+//if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) {
+//    header('Cache-Control: no-cache');
+//} else {
+//    header('Cache-Control:');
+//    header('Pragma:');
+//    header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time()+3600));
+// }
+
+header('Cache-Control: max-age=172800, proxy-revalidate');
+header('Pragma:');
+header('Expires:' . gmdate('D, d M Y H:i:s \G\M\T', time()+172800));
+
 header('Content-type: text/css; charset=' . LANG_CHARSET);

 if (IS_installed === false) {

And the change to add caching to the pngbehaviour.htc file:

elma htdocs # svn diff plugins/serendipity_event_browsercompatibility/serendipity_event_browsercompatibility.php
Index: plugins/serendipity_event_browsercompatibility/serendipity_event_browsercompatibility.php
===================================================================
--- plugins/serendipity_event_browsercompatibility/serendipity_event_browsercompatibility.php   (revision 3)
+++ plugins/serendipity_event_browsercompatibility/serendipity_event_browsercompatibility.php   (working copy)
@@ -63,6 +63,8 @@
                     switch($eventData) {
                         case 'pngbehavior.htc':
                             header('Content-Type: text/x-component');
+                           // mhaller Added caching
+                            header('Cache-Control: max-age=172800, proxy-revalidate');
                             echo str_replace('{blanksrc}', serendipity_getTemplateFile('img/blank.gif'), file_get_contents(dirname(_FILE_) . '/pngbehavior.htc'));
                             return true;
                     }
@@ -80,4 +82,4 @@
 }

 / vim: set sts=4 ts=4 expandtab : /
-?>
\ No newline at end of file
+?>

• Comments (0)
• Trackbacks (0)