Tips for Website Speed Optimization

DZone 's Guide to

Tips for Website Speed Optimization

Some straightforward concepts that will shave more than just a hair off of your webpage loading times.

· Performance Zone ·
Free Resource

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!
Credit: Rakaz.nl.

Any other tip that you know which should be included in this list? Let us know in a comment!

css, scripts, website performance

Published at DZone with permission of Jean-Baptiste Jung , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}