How To Speed Up Your Website
Posted by Unknown on 14:39 with No comments
How To Speed Up Your Website
First , to understand how you will speed up your website I’ll explain how internet browsing works.
Let’s assume that you’re from London and you want to load website as hackspc.com . You’re typing in the web browser (firefox, internet explorer..) hackspc.com and click on load , your web browser sending request to server where is placed my website hackspc.com . It’s placed in Los Angeles . Server sends back the requested page . Let’s assume that hackspc.com contains one HTML document . two images and one css file. In this example your web browser will sends one request for html , two request for images and one request for css. It’s 4 requests to send from London to Los Angeles and 4 answer to received from Los Angeles to London to load hackspc.com . So for people close to Los Angeles page loading will be fast but for people that aren’t close as from London page loading will be slow . To speed up your website you can use Content Delivery Network CDN. Content Delivery networks MAXCdn takes heavy objects as images , css , javascripts and store it to cdn servers around whole world . I use CDN on hackspc.com , so let’s see what will happen now , if you try to load hackspc.com from London . Your web browser will send one request for html document to server in the Los Angeles, two request for images will be send to CDN server which is close to you , probably in the London, one request for css will be send to CDN server from London. This will speed up your website at least for 30% .
Network Map For MaxCDN
How To Install W3 Total Cache
Go to wordpress dashboard, click on the Plugins -> Add New , type W3 Total Cache and click on Install Now
Activate W3 Total Cache
How To Set Up W3 Total Cache
Click on Performance , on the left in your dashboard
General Settings
Now lets dive into the general configurations page. First you see an option to enable or disable preview. You should click disable, so the site is actually running W3 Total Cache rather than just previewing it. So your final screen would look like this:
Next option on the screen will be Page Cache. This section is responsible for creating static cache pages for each page that is loaded, so it is not being dynamically loaded upon each page load. By having this enabled, you will significantly decrease your load time. For Shared servers, which most users are using, the Disk (Enhanced) Method is highly recommended. Your final screen result should look like this:
After the page cache, you should see the option for Minify in the general page. Minify is the famous technique of reducing the size of your CSS files, JS files, HTML files, posts, pages, and RSS. What this does is remove the unnecessary objects that your users do not need to see. Such as commenting in the stylesheet. That is for developers, not for average users to see. This plugin will remove all useless spacing from the code which by average speeds up your site load time by 10%. Disk is the only / best option for Shared servers. Your final screen should look like this:
Next option is Database Cache. This is crucial for site load time because WordPress sites are entirely running on Database. Often high load of database queries are the cause that slows yours site down and/or crash the site upon high traffic. The Database cache option will cache queries such as pulling the twitter count from your database, if you are using that. This option can essentially speed up your site by 100x. Your final setting for this area would look like this:
Object Cache is the option that comes next. This increases the performance of highly dynamic sites that uses the Object Cache API. The final settings should look like this:
The next option after this is for Content Delivery Networks (CDN). W3 Total Cache supports MaxCDN, NetDNA, Amazon S3, Rackspace Cloud, and Amazon Cloud Front. WPBeginner is using MaxCDN. This section will only apply to sites that are using CDN, or are planning on using CDN. If you think you will be using CDN, then we recommend MaxCDN (use coupon “wpbeginner” for 25% off). Example screen of someone who uses MaxCDN would look like this:
The next and last option on the general settings page is for Browser Cache. Browser Cache enables HTTP compression and adds expiration headers on the objects of your site. Each time a user visits your site, their browser stores a copy of your site, so on the next visit, your user does not have to re-load the site entirely (which speeds up the load time). But each browser resets the cache on their own schedule even when the file has not been changed. By enabling this, your site will tell the browser how long to hold each object. For example, you don’t change your favicon every day, or even month. That is something can be stored for one month period without change.
Page Cache Options
Notice in the screen above that you will see Page Cache is currently enabled. If you do not see this, then you are doing something wrong. Go back to general settings and enable it. Next, you also see a way to empty page cache. When you notice an error on your site, you want to immediately fix it. This could be a spelling error that your user reported, or something else. In a situation like that, you would have to manually clear the cache so the changes can be implemented on the live site right away.
We have selected the option to not cache pages for logged in users such as administrators. The reason for that is, if we want to see any changes that we make on the live site before it goes live, we can do so. Next option is cache the homepage. Homepage is often the most visited page on many sites. It would be a good idea to check that. Cache feeds, categories, and tags is checked because thousands of people go through our categories daily. Dynamically loading each page will slow our site down significantly. We have not selected the option to cache search strings, and 404 pages because we do not see a need for it, but for some websites it can be great.
Under the advanced options, you can see that we haven’t really touched the default. You can select to change the page cache to be longer or smaller interval. Default is 3600 seconds. You can make it smaller interval if you have a busy site. Next option is for Rejected User Agents and Rejected Cookies. You can select not to send cache pages to Google Bot, not recommend, but you can if you wish. If your page use a specific cookie, you should have those pages listed under rejected cookies page.
Minify Settings
Minify Settings advanced option will vary from site to site, but there are somethings that should be universal. First you need to make sure that it is enabled.
Everything else should be left to blank, unless you know what you are doing.
Database Cache Settings
We did not modify anything in the Database Cache settings. Everything was left as default
Object Cache Settings
Everything should be left as default for an average site. If you know that you need something in there specifically, then you may modify it.
Browser Cache Settings
Everything should be left as default
CDN Settings in W3 Total Cache
This section will be slighly biased because we are only showing MaxCDN implementation. We are using MaxCDN and their quality service, so that is the only option that we have access to display (we will also explain why we chose them). If you followed this tutorial entirely, you should have already enabled the use of CDN and seleted MaxCDN as the option (only if you have an account with MaxCDN). If not, then this can be done through the General Settings. One you have done that, lets visit our CDN Settings Page.
As you see that we have selected all four options in the general settings. Host wp-include files, this so if your theme is calling jQuery from WordPress include library, it will be added and served through the CDN service. Theme files option is checked, so all of our theme files are served via CDN. Host minified CSS and JS files via CDN. This is important to have checked, so when W3 Total Cache minify your CSS files, it can be served via a CDN. Lastly serve custom files via CDN. Often bloggers have a tendency of keeping somethings separate for the sake of organization. Let it be ad images, or other set of files. You can specify those to be served via CDN as well.
How To Set Up MaxCDN With W3 Total Cache for WordPress
Next option is configuration of your CDN provider. We will show you how to do that with MaxCDN. You need to have an “Origin Pull” CDN account. Rackspace Cloud, and Amazon cloud front, do not offer this service which makes MaxCDN superior. Origin-Pull is simple to use and highly transparent. This type is also known as “mirror” CDN.1. Login to your MaxCDN account (If you don’t have one, then get one).
2. In your MaxCDN dashboard menu, click on “Manage Zones” option. Then click on “Create Pull Zone” button
3. On the next page, you will need to fill out the necessary information to create a Pull Zone:
Pull Zone Name: This can be anything without spaces, minimum 3 characters long. Think of this as your username.
Origin Server URL: Enter the URL of your wordpress blog. Must have “http://” and the trailing slash(/).
Custom CDN Domain: This is Optional, but we recommend it for the sake of branding. Use any subdomain for examplke: cdn.hackspc.com
Label: This is like a description field. It is optional to add a description.
Compression: We recommend that you enable this as it will save the usage of bandwidth on your account.
We have filled out the fields for you to see in the image below:
Upon creation, you will see a screen that will give you the URL for your CDN. My is hackspc.pc.netdna-cdn.com . If you chose the option for Custom CDN Domain, it will ask you to create a CNAME record for that domain. We will show you how to create the CNAME Record for Dreamhost web hosting , if you don’t know how to do it then ask your web hosting support “How To Add CNAME” , they will probably explain you in detail.
You can add CNAME records to your domain in the DreamHost Control Panel, under Domains->Manage Domains->DNS
Categories: Networking
Posts
0 comments:
Post a Comment