Optimizing Web Pages For Ultra-fast Downloading

By Chongchen Saelee

I want to share with you my way of optimizing web page downloads at fast speeds. It seems webpage technology is always evolving, so if you want to take advantage of some of the improvements, you have to stay informed. For example, HTML5 is looking to be very effective version of HTML. So the first thing you want to do is take advantage of that. All my modern webpages are declared HTML5 now. You do so like this, as the very first line in your HTML source:

<!doctype html>

Because with HTML5, you can take advantage of some new features which I’ll explain in the following parts.

Utilize cascading style sheets (CSS) for most of your visual layout. There should be enough CSS functionality that you can make your webpage look interesting enough but also not hinder it’s utility. The most important aspect about a webpage is ALWAYS to deliver information. You’re not making a full-on computer program, which isn’t to say you can’t make a full-on application, but delivering it through an Internet browser just isn’t a good user experience. So treat webpage design like webpages, nothing more.

Use as little additional scripting as possible. Javascript can work wonders, but most of the “cool” libraries out there are just clutter and will slow your page down drastically. My rule of thumb is only use Javascript when it’s really vital. Forget it when it’s a custom widget or other fancy useless stuff. But if you do have to use Javascript or other scripting language, make sure you load it last. It gives the perception that the page loads faster.

And if you do use an external Javascript, now you can utilize HTML5-enabled attribute for the script tag to asynchronously load a script. Asynchronous means running code parallel with the parsing and loading of the rest of the page. Therefore it gives perception it is loading faster. You would enable asychronous script loading like this:

<script src='required/script.js' type='text/javascript' async></script>

Google AdSense is another culprit of slow-down and they require Javascript. They’ve only recently taken advantage of this new asynchronous script loading. It’s a slight performance boost, but AdSense still is No. 1 reason any well-designed simple webpage is slow to download. So if you don’t mind losing monetization, you could reduce the number of AdSense ads, or any other third-party ads for that matter, from your site to improve download time.

Optimize your images. Use smaller images and compress them. In graphic design, a wall of text just isn’t visually interesting, even if it’s ASCII art. So you are almost required to use a small graphic here and there. The best compressed image formats are JPEG and PNG. Avoid animated image formats like GIF and APNG if you can. There’s also the option to use vector graphics like SVG, but it’s not compatible across all browsers, which limits your creativity anyway.

Avoid movies and audio files.

Avoid custom fonts. But if you do use a custom font, make sure it is super portable, containing only the necessary characters you’re ever going to use (otherwise just rasterize those characters into a flat image). I understand, web-standard fonts can get boring (or even ugly), but at least they load right away because they are pre-installed on most platforms.

Make sure you aren’t referencing missing files.

Minify your source code. It’s probably a good idea to memorize syntax of every scripting language. That way you know which shortcuts to use in your coding. For example, you never use semi-colons (“;”) to end any lines of commands in HTML, you use brackets (“<" and ">“). So if there are chunks of HTML that don’t change much, you can remove all the line breaks between your bracketed tags. In CSS, you can write elements in single line only separated by curly brackets (“{” and “}”) and semi-colons. It makes it less readable, but the machine parsing it won’t know the difference. And in Javascript, remove all comments and also remove most line breaks and whitespaces between semi-colons. I’m sure there are more minifying tips out there if I didn’t get them all. It’s good to know the shortcuts while you’re typing rather then letting a software doing after the fact and possibly mess up your code. All you got is time.

And if you’re using PHP, you can compress your HTML to an output buffer, essentially ZIP it before it’s sent from the server to the client. You can do it like this:

<?php ob_start('ob_gzhandler'); ?> <!doctype html> <html> ... </head> <?php ob_flush(); flush() ?>

You call ob_flush() and flush() to immediately send your buffer to the client. A good place to do this is right after the tag.

But be mindful about PHP files, too. If your PHP module isn’t functioning on your server, you’re not going to get any output. And this is why popular content management systems (CMS) like WordPress cache their pages now via plugins. The PHP files are saved into static HTML files for faster access. Ironically though, I think it still requires PHP to redirect you to those cached HTML files. Pretty much, if you don’t require PHP, using HTML files is way faster because it’s guaranteed to work at the most basic level.

Well, I hope that helps you out. Who doesn’t want faster downloading webpages? I remember back in the dial-up days, we still had to get pages downloaded in less than 15 seconds. Nowadays, people lose patients if it doesn’t download in less than a second. Go figure. Think about the children!

Leave a Reply