How to Accelerate Loading Website Blog Complete

Tricks how to speed up blog website loading should be applied to all the web. Because all would agree if all visitors liked the web fast when loading its content. It is true if loading the website related to the speed of your internet, which need to know that is not always true if the faster your connection the faster loading web.

Why? Because if your web requires a very complicated computation, then the connection speed is not so helpful (the problem is on the server, so it takes time for the content to be ready to send to the client), moreover we want that all types of connections either slow or fast will be served well, then our effort is to optimize server performance in computing until content distribution and strive for content to have very small size.

If you have a web that has a lot of scripts like css, javascript and fonts all of which are big in size, it's ensured that the longer the server performance in the compilation and content distribution. In this tutorial we will discuss the basics and general, both for Wordpress and blogspot, for details of each step will be delivered in its own tutorial.

The Benefits of a Fast Web Loading or Blog

Lots of benefits that we will get, not only the satisfaction of visitors that we get, even this benefit is also felt for web owners who use the web as a field to make money. Here are the details of the benefits of having a web with a high loading speed:

Improve SEO rankings (Google wants the best)
Improve UX (User Experience), give a good impression for visitors. This is very important if your visitors are potential buyers of products.
Lighten the bandwidth burden, the more optimal it will reduce the amount of content distribution.
Lighten for visitors with slow connections.
Lastly, you also hate the slow web right?

Detail Speed website affect UX (User Experience), I will quote from some websites, note the following details:

From Aberdeen Group, a 1 second delay upon opening the page will cause:

11% fewer visitors will blur
16% decrease in visitor satisfaction
Losing about 7% of the conversion
Amazon has increased revenue ranging from 1% for every speed increase over 100 milliseconds.
Walmart too, has a 2% increase for every 1 second increase.

A study from Experts found that:

47% of visitors expect the web at 2 seconds.
40% will leave the web at 3 seconds and above.
52% of online shoppers say the speed of the web is what keeps them loyal.
It's enough right ?, okay let's directly discuss the steps of each step how to speed up the website loading website or blog page.

Steps to Accelerate Loading Blog and Web

In this technique we will try our loading speed as optimal as possible, note that we do not have to apply all the steps to be explained, do it wisely and keep the direction of each step.

Steps will be divided into two categories:

Server
Content Elements

Before starting, please backup your website or blog first.

Server

In the case of a server, you can start doing the optimization by choosing a good place in terms of support and easy in performing server optimization. Do not let you get constrained because the rules of hosting providers that complicated this should be and this is limited. Let's start doing the optimization, and try to change your web to maintenance mode so as not to disturb the visitors.

Cache Browser

By utilizing the browser cache, you can trim loading for frequently loaded files like CSS, JS and images. The way it works is on the first visit the client browser will load the content from the server and will store in the browser cache, by storing the content in the browser cache then for the next visit the browser will not request content to the server but will load the browser cache.

The trick is as follows:

htaccess

By adding an expires header setting to the htaccess file, you can set the file type and cache time to last. In this tutorial I use the usual example settings and pass the Google Page Speed.

The code below tells the browser what files will be cached and how long to "hold" in the cache (local). Add to the top of your .htaccess file. Set how long the cache lasts according to the level of web updates in the "access 1 year" section, be careful not to set too long if your web update frequently.

Script htaccess

# Leverage 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 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
Header set Cache-Control "max-age=2678400, public"
</filesmatch>
<filesmatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</filesmatch>
<filesmatch "\.(pdf)$">
Header set Cache-Control "max-age=86400, public"
</filesmatch>
<filesmatch "\.(js)$">
Header set Cache-Control "max-age=2678400, private"
</filesmatch>
</IfModule>

`W3TC Plugin (W3 Total Cache) - WordPress`

For those of you Wordpress users, you simply install and set the configuration as below:

» Enable preview mode in general settings to view results without having to be applied live (optional).
» Enable browser caching fixed in general settings.


Please go to the "Browser Cache" section and set it like the picture below (this setting is the same as web), you can try for other settings, maybe every web requires different settings.

Save all settings, click stop preview and click preview or deploy and reload the web. To test, you can use the Google Page Speed and YSlow plug-in. Note the changes that occur between using plug-in with no or if necessary try to change some settings.
» After testing, deploy and disable previews so that the settings are applied to the live version. For the next you can test optimization on web provider web speed test.

`Blogpsot`

If you are a blogspot user, keep in mind that actually Web Admin get this trick on other web and after applying this trick, admin feel change that is not too mean or maybe not even work, considering Blogspot server is fast in content distribution. If you want to try, please follow these steps:

`login to your Blogger account`

Please go to Dashboard -> Template -> Edit HTML
Add the following script between the "< head >" tags:

`Script HTML`

<include path="/assets/**.css" expiration="7d" />
<include path="/assets/**.js" expiration="7d" />
<include path="/assets/**.gif" expiration="3d" />
<include path="/assets/**.jpeg" expiration="3d" />
<include path="/assets/**.jpg" expiration="3d" />
<include path="/assets/**.png" expiration="3d" />

`Keep Alive`

For those who do not know what is keep-alive, keep-alive is a technique that allows TCP connections to stay alive and helps reduce latency in subsequent requests, so latency is caused by always requesting a new TCP for each request, by making TCP live on will force it using the same TCP and avoiding the new TCP usage. More simply, the communication process between a web server and a web browser that says "You can grab more than one file at a time".

To implement keep-alive, you can first ask your hosting provider and have the keep-alive feature enabled. If you are having trouble doing so then there are some other ways described below (use one):

`Script Apache`


#
# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
#

`KeepAlive On`


#
# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
#
MaxKeepAliveRequests 100

#
# KeepAliveTimeout: Number of seconds to wait for the next request from the
# same client on the same connection.
#

`KeepAliveTimeout 100`


Add the above script to the apache config file (if you are allowed web hosting provider).
Website using htaccess technique because it is not allowed config file configuration apache. After you have configured it, try testing on Google PageSpeed, GTmetrix or other web speed testing sites.

`GZIP Compression`

There are several benefits that we get by enabling Gzip compression, because this method is the most popular to load our site faster by reducing more than 70% the size of blog or web page. Now most web or blogs use Gzip compression.
htaccess
You can use htaccess to enable the Gzip Compression method, how to add the following script to your htaccess file.

`Script htaccess`

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .pngW3TC plugin (Wordpress)
If you use Wordpress, then you just do the steps we've discussed earlier (browser cache). You just make sure the method is active or not by going to the Performance> Browser Cache .

`PHP Scripts`

We can also use PHP, by putting the following script at the top of the PHP / HTML script.

`CDN`

CDN (Content Delivery Network) or Content Delivery Network is a server network system to deliver existing content in an application / web to various visitors / users in various places so that data / content sent is received faster (data transmission does not have to be from a central server, but via the closest CDN).
In the picture above (extracted from gtmetrix.com) explains that with CDN, European users will be able to download static content via the closest CDN (located in Europe as well) so your site is faster because it does not need to download static content from the central server who are in America.

The problem is, as smart CDN buyers we have to be smart in choosing a CDN provider. Make sure the available space (CDN spot) meets our target market, the more it is not necessarily better, adjust to the level of needs of the area you want to reach.

Web stop the application of CDN, for wordpress users W3TC plugin has worked with one CDN provider and you live enable it If you have more budget you can consider this method because it is very significant results (from the experience of CDN users), please search on google the best CDN provider and please share your experience in comment field yes.

`Content Elements`

After the server has finished our optimization, then we move to the content. In this section we will do optimization that focus on the content, on the server that served in terms of content distribution is completed optimized, then by optimizing the content to be distributed will make web speeds increase very well.

Minify Script
The first part to be optimized is the script section in the form of HTML, CSS and JS (Javascript). This technique works by optimizing the script that will be used in the production site (used during live, open trial or debug).
When scripts are used in trial and debugging we will make our script as neat as possible by adding tabs, spaces and comments to make it easy to read and easy when handling script errors.

When the script is ready to use, then we can reduce the size of the script by removing spaces, tabs and comments. This technique is called minify, if you ever downloaded a script that when opened looks without spaces, the comment and feel stacked into a single line, then the script has been diminify.

Minify is not limited to one script file, if we have more than one CSS / JS script, we can combine all CSS / JS on one file and directly in minify (CSS and JS must be separated, join the like). To do this please follow the steps below:

`Minify with Online Tool`

We can use online tools such as jscompress.com, willpeavy.com/minifier/ and many others, live search on google. The way is quite easy, we just pastekan our script into the text area that has been provided and click submit, then the minify results can we use

`W3TC Plugin (WordPress)`

For wordpress users, we can use the W3TC plugin to do a minify, do the following:
- The first step please go to Performance> Minify.
- At this stage, we will play to optimize css and js in our wordpress, this second step to facilitate us in the selection of which files will be optimized, please click the Help button (Minify: Help Wizard) select the file, and end by click the Apply button & Close . Watch the picture after the help button is clicked. - The third step is to make sure the JS and CSS minify settings are enabled, if not you can check the combo box to activate it.

`Blogspot User`

For blogspot users, we can use manual techniques, namely by meminify with the Online Tool and reinstalled in the previous way.

Minify is the hardest part because we have to make sure the code in minify is not broken or keep running. We have to be patient in this stage, web nyekrip just managed to meminify little scripts, because many are damaged when all want in minify or join.

`OPTIMIZING IMAGES`

At this stage we will make the image in our website optimally well, we all know if the image is the main content that takes up space or space in the website because most of the filling in the web is the image. If we can optimize the use of images in the web then we've managed to reduce the server load so large.

There are several techniques that can be applied starting from reducing the size of the image by in-compress to utilize free cdn. About what steps we can take, please note the steps below:

`Compress Image`

Before you post a picture, you should first compress the image. Can use online tools or software, usually the image size will be reduced without unduly reducing the image quality.

Use Vector and PNG
If your web requires images that simply add illustrations and should not require real images or photos, just use a vector image and save as PNG. Because in this way, the image size will be very small and the image quality is good.

If you want to know how small the size is, please try downloading the header image in this article and check the image size.

`Define Image Dimensions`

The browser will start rendering the page before the image loads. If we have determined the dimensions (height and width) then the time it takes the browser in rendering will be faster. In this technique you can also use CSS to define image dimensions.

The trick is to use the <img> element, specify height and width.

`CONCLUSION`

For how to speed up blog website loading is not exactly simple, a lot of which must be optimized from the server side until the side of the elements that will be distributed. We do not need to do all the above optimization if some technique has answered the need.

This article will be updated if there is a new technique in speeding up the blog. If you have any questions, please fill in the comments field.

How to Accelerate Loading Website Blog Complete