How to Create new website

On this occasion admin will share tutorials How to Create a Complete Website With Images, will be peeled in depth step by stage. This tutorial is suitable for you who still lay, if you are skilled you can skip directly on the optimization only.

Many options how to create a web, it is up to you in choosing a way, because it chooses how it depends on your goal to create a web. From the easiest to the hardest way it's all your choices, obviously every way there are advantages and disadvantages.

What is the Web

The Web is a page that contains both written content, images and videos that can be accessed online (of course according to privacy rules). For those of you who want to sell online or create an online store, want to create a personal blog that contains even want to start an online business it takes the ability to create a web, not hard to know how.

Why Must Have Web or Blog

Almost every business owner has a web to introduce themselves and their products to support the brand, existence and sales. If you are a businessman, do not let you miss the competitors who already have the web.

By knowing the advantages of having a web, it's time you decide your goal in creating the web. Why should you do this early? Because this will greatly affect the appearance, web structure and web end results.

Step - How to Create a Website

 Specify a Domain Name and Give a Web Name

Domain is your web address, with that address people can visit the web by typing the web address in their browser. For example this web has address, which need to be considered in choosing a web address or domain is make sure the address is easy to remember and not too long so it allows visitors to remember the web address.

Tips on choosing Domains you need to consider:

1. Most webs that want to aim business using the suffix. Com or. Co., If the suffix was already purchased by others and it was sold, try to buy it.
2. You may also consider using the .biz or .net domain suffix if the .com domain is not available.
3. If you have a specific purpose for transactions for example Indonesia area only then use .id, if the American area use .us and so on.
4. Do not be too push in choosing a domain name, you can use additional words in front or a suffix. For example if the domain baca.com already purchased, try to add the word front me so baca.com or the ending to be bacak.com
5. Buy a domain with a minimum period of three years, so no one is trying to take advantage of your negligence in the domain renew.
6. If you are worried that your domain name is being misused, try buying some other domain suffix.

How to Sign / Buy Domain Name

1. Do not check the domain name repeatedly on the web that does provide domain name purchase services, in some cases the domain name will be immediately purchased by the web provider because it is considered a lot of demand so that the selling price will increase.
2. If you want to buy abroad make sure already have a credit card, because the author's experience using paypal only credit cards that can be used (If there are other tricks please add in the comments column).

Determining Techniques How to Create a Website

How to Install CMS WordPress On Offline PC

How Web Hosting Has Been Created

How to Accelerate Loading Website Blog Complete

The Benefits of a Fast Web Loading or Blog

• 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?

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:

1. Server
2. 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.