Website speed optimization: Additional tips for a faster website

Website speed optimization: Additional tips for a faster website

Many of you have enjoyed my previous article on website speed optimization and had real benefits from the tips I provided. However, website speed optimization is often tricky, this is why I decided to compile a second article featuring extra tips for even more speed.

Make use of Data URI’s

Data URI’s can be useful for embedding images into HTML/CSS/JS to save on HTTP requests and consequently enhance the loading time of your site. The following function will create a Data URI based on $file for easier embedding.

function data_uri($file, $mime) {
  echo "data:$mime;base64,$base64";

Source: CSS Tricks

Manually move scripts and css files to the footer

This example features how to do it on a WordPress blog, but any developer with a little experience can modify the code to make it fit any kind of website.

First, open your functions.php file and paste the following code in it:

 * Filter HTML code and leave allowed/disallowed tags only
 * @param string 	$text 	Input HTML code.
 * @param string 	$tags 	Filtered tags.
 * @param bool 		$invert Define whether should leave or remove tags.
 * @return string Filtered tags
function theme_strip_tags_content($text, $tags = '', $invert = false) {

    preg_match_all( '/<(.+?)[\s]*\/?[\s]*>/si', trim( $tags ), $tags );
    $tags = array_unique( $tags[1] );

    if ( is_array( $tags ) AND count( $tags ) > 0 ) {
        if ( false == $invert ) {
            return preg_replace( '@<(?!(?:'. implode( '|', $tags ) .')\b)(\w+)\b.*?>.*?</\1>@si', '', $text );
        else {
            return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text );
    elseif ( false == $invert ) {
        return preg_replace( '@<(\w+)\b.*?>.*?</\1>@si', '', $text );

    return $text;

 * Generate script tags from given source code
 * @param string $source HTML code.
 * @return string Filtered HTML code with script tags only
function theme_insert_js($source) {

    $out = '';

    $fragment = new DOMDocument();
    $fragment->loadHTML( $source );

    $xp = new DOMXPath( $fragment );
    $result = $xp->query( '//script' );

    $scripts = array();
    $scripts_src = array();
    foreach ( $result as $key => $el ) {
        $src = $result->item( $key )->attributes->getNamedItem( 'src' )->value;
        if ( ! empty( $src ) ) {
            $scripts_src[] = $src;
        } else {
            $type = $result->item( $key )->attributes->getNamedItem( 'type' )->value;
            if ( empty( $type ) ) {
                $type = 'text/javascript';

            $scripts[$type][] = $el->nodeValue;

    //used by inline code and rich snippets type like application/ld+json
    foreach ( $scripts as $key => $value ) {
        $out .= '<script type="'.$key.'">';

        foreach ( $value as $keyC => $valueC ) {
            $out .= "\n".$valueC;

        $out .= '</script>';

    //external script
    foreach ( $scripts_src as $value ) {
        $out .= '<script src="'.$value.'"></script>';

    return $out;

Once done, edit your header.php file. Replace the wp_head() tag by this:

$themeHead = ob_get_contents();
define( 'HEAD_CONTENT', $themeHead );

$allowedTags = '<style><link><meta><title>';
print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );

And finally, place the code below into your footer.php file, just before the closing </body> tag.

<?php theme_insert_js( HEAD_CONTENT ); ?>

Credit: Tomasz Dobrynski.

Manually combine JavaScript files

If you’re using WordPress, you should definitely use the W3 Total Cache plugin which combines, but also minifies JavaScript and CSS files. But if you’re working on a custom made website, you can definitely take advantage of this super simple technique to combine multiple .js files into one and consequently save on HTTP requests.

The first thing to do is to open your site’s .htaccess file and paste the following code into it:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

Once done, download the combine.php script and upload it on your server. By default this script looks in the JavaScript and CSS directories in the root of your website, but if you are currently using different directories you can manually change these values at the top of the script.

The last thing to do is to create a cache directory that is writable by the web server. Then, you’re all set!

Need fast hosting? Click here for a list of the best hosting companies.