How To Optimize The Loading Time Of Your Website Successfully

The loading time of a website is an important aspect in the usability as well as an official ranking factor in search engine optimization. In this article, I would like to address it, which methods and techniques are best suited for an optimized loading time and how to implement this.

Good load times make users happy

Runs a website quickly and without problems that will make your users happy. A good user experience leads to a better conversion rate and lowers the bounce rate.

Since the optimization of the charging time requires some extensive technical skills and in some cases requires some effort, it is important that the workflow is kept clean to implement. Fashion to see if you can take the measures shown here always best step by step from, think about individual measures even implement or need help for this. If you are half-hearted in the matter, you will not have much of the invested labor.

If you observe these things should a good implementation are no more obstacles?

Table of Contents

• Optimize HTML / CSS, scripts and images
• Load JavaScript at the end
• Outsourcing of JavaScript libraries and frameworks
• The content caching
• Enable browser caching and compression
• use Content Delivery Network
• The performance under WordPress
• The Conclusion

Optimize HTML / CSS, scripts and images

The first step of optimization should always be to reduce the file sizes of CSS / HTML and JavaScript files. This can be for example with the online tool " refresh SF done efficiently". Here the corresponding CSS styles, locations, and scripts can be easily inserted and reduced. In 99% of cases, the default settings will suffice. It is also recommended because nothing more to adjust.

The images can also be compressed using various online tools effectively. Here, the following tools are the most suitable:

• JPG file format: JPEGmini
• PNG file format: TinyPNG

Also suitable popular graphics software such as Adobe Photoshop or Gimp.

With the jQuery plugin, "LazyLoad" images are not loaded when you reach the viewport or be visible there. This can reduce the load time for large sites with many images a lot.

For more information and guidance on the integration can be found on the project page .

Make sure that you are running excessively many individual stylesheets. Think about whether or not it makes sense to put together several different CSS files into one file.

Load JavaScript at the end

A common problem that affects the loading time of a website massively is to load individual JavaScript files. The problem here is that the loading of scripts blocked the further rendering of the page until all scripts are fully charged (Progressive Rendering).

Tie your JavaScript files so always end or immediately before the closing body tag.

Outsourcing of JavaScript libraries and frameworks

If you use different JavaScript libraries, CSS frameworks, and fonts, it is advisable to outsource these files and special CDNs (more on that later) to use that host these resources.

The advantage here is that a lot of scripts, frameworks and fonts used very often and are outsourced to the respective CDNs. If the user now has previously visited a page, for example, relies on the same Library and is accessed via a CDN, then this resource must not be loaded because it is already in the browser cache.

Most JavaScript libraries can be found in Google's " Hosted Libraries " and for frameworks such as Bootstrap from Twitter is the " BootstrapCDN ". For Web fonts suitable Google Fonts best.

The Content Caching

When caching content of a web page such as CSS stylesheets, images, scripts, texts and audio / video files are cached and may not be charged again after a new load. This speeds up the load time after the first call by a multiple.

There are basically two types of caching: once the browser caching for static elements and the separate PHP caching for PHP pages. When browser caching all resources on the first visit a website initially be "downloaded" and stored for a certain time set by the browser. The PHP caching contrast ensures that the source code of PHP-based pages or scripts is compiled only once and then cached. only browser caching is once relevant for our purposes.

While browser caching is an important part of a performance optimized website and absolutely should be used when it comes PHP caching on whether it continues its website or the CMS on PHP or not. Below I will explain how best to implement the browser caching and compression of content.

Enable Browser Caching And Compression

For browser caching a configuration file must be created on the server once, in all resources, including deceleration times are set to be cached. Recommended are flow times between at least one week and up to one year. This period is the way also recommended by Google .

HTML documents should not be cached since these are not static elements according to Google. By means of additional gzip compression to all content again compressed additionally in gzip format before they are delivered to the browser.

In most cases, the web server "Apache" used. Here the browser caching can be enabled as follows:

First, the appropriate module "mod_expires.c" must be activated. If you have access to its server, then this is done with the following command:

a2enmod expires

/etc/init.d/apache2 restart
If you have booked no access to the servers and a hosting plan for a web host, then this module is enabled by default already in the rule. Then pass the appropriate configuration in the .htaccess file must be written:

#BROWSER CACHING#
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 year"
ExpiresByType application/pdf "access 1 year"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/x-icon "access 1 year"
</IfModule>
#GZIP-Komprimierung#
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

If, on Lighttpd as web server instead of Apache, then have the following lines in the configuration "lighttpd.conf" shall be inserted:

# Modules to load
server.modules = (
    "mod_expire",
 "mod_redirect",
    "mod_compress"
)
# Compression
compress.cache-dir = "/tmp/lighttpd/compress/"
compress.filetype = (
    "application/atom+xml",
    "application/javascript",
    "application/json",
    "application/ld+json",
    "application/manifest+json",
    "application/rdf+xml",
    "application/rss+xml",
    "application/schema+json",
    "application/vnd.geo+json",
    "application/vnd.ms-fontobject",
    "application/x-font-ttf",
    "application/x-javascript",
    "application/x-web-app-manifest+json",
    "application/xhtml+xml",
    "application/xml",
    "font/eot",
    "font/opentype",
    "image/bmp",
    "image/svg+xml",
    "image/vnd.microsoft.icon",
    "image/x-icon",
    "text/cache-manifest",
    "text/css",
    "text/html",
    "text/javascript",
    "text/plain",
    "text/vcard",
    "text/vnd.rim.location.xloc",
    "text/vtt",
    "text/x-component",
    "text/x-cross-domain-policy",
    "text/xml",
)
# Expires headers
# CSS
$HTTP["url"] =~ ".css" {
    expire.url = ( "" => "access plus 1 years" )
}
# Favicon
$HTTP["url"] =~ ".ico" {
    expire.url = ( "" => "access plus 1 years" )
}
# JavaScript
$HTTP["url"] =~ ".js" {
    expire.url = ( "" => "access plus 1 years" )
}
# Media
$HTTP["url"] =~ ".(gif|jpg|jpeg|png|m4a|f4a|f4b|oga|ogg|webm)" {
    expire.url = ( "" => "access plus 1 years" )
}

Who also would like to use a PHP Caching, which should rewatch the following modules or the following software in more detail:

• Alternative PHP Cache (APC)
• eAccelerator
• XCache

The technique of PHP caching and integration of applications would provide details at this point the scope of this article and something is perhaps a topic for another article.

Use A Content Delivery Network

How it works is a Content Delivery Network (CDN) a particular network with many regionally connected servers, which enables the rapid delivery of certain content.

At the core of a CDN of the main server where all outsourced content are stored as well as many "mirror servers" on which all the contents are "mirrored". The advantage of this system is that the closer the content you load the users are, the faster they can be delivered to him. Thus, the CDN system always chooses the from the user's perspective best server.

A CDN is best suited for very large websites / portals, with a corresponding range and a high load. Here, it should consider whether the use of a CDN is actually a benefit to your project.

When selecting a CDN provider is to be noted in any case, the availability (uptime). If a provider has repeatedly or relative to record many fluctuations in its uptime, you should keep from using more distance, otherwise, a good availability of your website to 100% and can not be guaranteed. A resulting downtime should be avoided, of course, from SEO perspective.

When using a CDN, it is also important that by the DNS function "DNS CNAME" is referenced CDN on your own URL / domain such as "cdn.example.com" instead of the URL of the CDN provider. This also reduces additional (unnecessary) HTTP requests.

Who plays with the idea of using a CDN for his website, the best deal with the following services:

• MaxCDN
• Amazon CloudFront
• CacheFly

The performance under WordPress

Again and again, one hears of performance problems with WordPress, which can be a major problem, in fact. In most cases, it is because you have too many plugins in use, which actually were not really necessary because their functions can also be installed directly in the theme. So set all the features such as social media buttons Analytics Tracking Codes, advertisements etc. always directly in the theme to and avoid it, add such functionalities later via a plugin.

Another aspect of this problem is that many plugins write automatically a large number of scripts and other stylesheets in the source code, so this will be unnecessarily bloated. Many contents is also hosted on a server of the plug-in developer, resulting in many unnecessary HTTP requests.

Basically, it should be used for the optimum operation of the website also always a caching system. Here is W3 Total Cache proved to be a good system.

What needs to be observed when loading time optimization

The best strategy for implementing a better load time is not protected against some pitfalls. Example, it may cause problems in the use of foreign-hosted scripts, frameworks or fonts if the server can not be reached and therefore your page no longer functioning properly. If one has optimized a bit at the end, you will usually have a problem with too many HTTP requests to other servers.

Note also that if graphics or style sheets are changed, it may due to come through the browser caching means that these amendments to the user so long are not visible until it manually empties his browser cache.

The Conclusion

Good adjustment of the charge time is an important part of the on-page actions and should, therefore, be tackled with a correspondingly high priority. There are in addition to the options listed here are a few more ways to improve performance, which many then very "failure" is to become familiar with SEO rather than tolerate (keyword: Ajax), or in the implementation is far too complex. In the future, the new addition might AMP project by Google for fast charging of mobile websites are a ranking factor.

If you set the most important things like browser caching clean, adjust your code, keep slim and compress all your graphics well, then you've made a good step in the right direction. Put WordPress, then think about whether you can customize your theme in order to remove unnecessary plugins.

How does it look to you? Do you have the load time of your website is already optimized? If so, on what technique or techniques you set? If not, what did you previously held by the optimization?