English Thai

Tips For Faster Websites



A fast loading page has a significant proportion of a good user experience. However, there are still many web developers or agencies which are still missing the technical understanding for simple optimization measures. We present three methods that can partially reduce the loading time of a website drastically.

Improve the Browser Caching

Usually a website has many elements that are not only used once, but repeatedly on multiple pages – for example, the logo graphic, comprehensive CSS statements or recurring JavaScript files. In order for this to not be requested again and again from the server, each browser has a caching functionality to cache files on the local hard drive.

Inherently the browser cache is relatively dull. Not surprising since he cannot know how many times a file is modified on the server. In case of dynamic web applications such as Facebook it would do not make sense to store HTML files in the cache. On the contrary it would make sense for small static info-sites on which the HTML change minimally every few month. So it is the web developers’ responsibility to assign all files an appropriate expiration date.

If the website runs on an Apache server, the browser caching can be defined in the .htaccess file. By using the mime type, every type of file can be set to a specific cache period.

<IfModule mod_deflate.c>

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/ld+json \
                                      application/manifest+json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/cache-manifest \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/vtt \
                                      text/x-component \
                                      text/xml
    </IfModule>

</IfModule>


In this case HTML files would be cached only one second. CSS and JavaScript files remain two weeks in cache and images (jpg, png) even three weeks. Google-Page Speed-Insights recommends for static resources at least a durability of one week.

Automatically Compress Files

Each Web worker will eventually have worked with a ZIP-archive. It cannot only combine multiple files, but also employs a more or less complex compression-algorithm to reduce the size of the Zip file. Put simply, it searches for recurrent data sets, which it will then store as variables. The more redundant text exist in a file, the greater the savings will be. Therefore, HTML, JavaScript and CSS files in particular are excellent for compression.

Similar to the configuration of the browser caching, server-side compression of static resources can be realized by using the .htaccess file of the web server. Thereby the apache modules mod_deflate or mod_gzip come in handy.

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

    ExpiresByType text/css                              "access plus 1 year"

    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

    ExpiresByType image/x-icon                          "access plus 1 week"

    ExpiresByType text/x-component                      "access plus 1 month"

    ExpiresByType text/html                             "access plus 0 seconds"

    ExpiresByType application/javascript                "access plus 1 year"

    ExpiresByType application/manifest+json             "access plus 1 year"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"

</IfModule>


In this example, HTML, CSS and JavaScript files are automatically compressed by the server and sent to the browser. File formats such as .jpg, .png or .woff that are already compressed, should be excluded from the server-side compression.

Optimize Images And Graphics

According to httparchive.org, in 2014 on an average of over 50 photos or graphics were involved on each individual website. The data amount that had to be transferred through images increased by more than 20 percent compared to last year. As being part of the Page Speed Optimization it is extremely important to compress as much image files as possible.

A distinction is generally made between the lossless and lossy compression. The first one removes unneeded Meta information, identical image sections are stored only once. The axed file size is smaller as in the lossy compression. The lossy compression locates areas within an image, which have approximately have the same color space. Through an assimilation to exactly the same color value, the algorithm can then compress much more of file.

If you like to improve your loading duration, don't be afraid to contact us.