Website Loading Speed Optimization
Before optimization, we need to analyse and find the bottleneck of the current Web abilities, then we can figure out where to improve. If we can't handle everything at the same time, we should optimize something that will result in obvious improvement.
Golden stats on website: 10~20% time on end user HTML documents downloading and 80~90% time on website components. Because of this, we provided a complete list over website optimization on a sample site. Summary of the sample test site: blog site with 2 js file, one header/footer, 3 css file, less than 10 sql queries on home page.
Step 1: Admin panel optimization, Turn on page caching
Before page caching, all data are reading from database directly, this is the screenshot of the overall loading time
So now, after turnning cach on, the entire page will be cached and the response time almost halfed
Step 2: DNS resolving optimization
DNS resolving is the first step when we open a website. The DNS resolving time should not exceed 300ms, if your domain name does take longer to resolve, you should consider to change DNS provider.
Step 3: Use CDN service
Integrate website with a quality CDN network will improve website loading speed greatly. CDN will cache our web content on multiple locations on their networks so it will greatly reduce the response time from different locations. (Tips: Better to join CDN on last step. Because we can see obvious changes after all other optimization, CDN cache will affect the monitoring)
Step 4: Use multiple servers to increase concurrent loading
The theory is, the concurrent downloading thread with the same domain is 2 for browser, 4 with HTTP 1.0. protocol. Based this, we can speed up the loading by hosting different contents to different servers with different domains/subdomains.
Step 5: Merge Jscripts and CSS
It's highly suggested solution in case your website has lots of such files. There's a tool called Minify (http://code.google.com/p/minify/). If you are fans of YII framework, there's YII version called "minscript Extension" (https://bitbucket.org/TeamTPG/minscript/wiki/Home)
Step 6: Compress CSS/JS/HTML/XML files
Sending compressed contents will greatly reduce response time. Many web servers now support this techque and should be pre-configured. Take Apache web server for example, we just need to add following to .htaccess in website root
#set compress
<ifmodule mod_deflate.c>
AddOutputFilter DEFLATE html xml php js css
</ifmodule>
Content size with no compression
Content size with compression turned on
From above firefox monitoring screenshots we found it reduced almost 2/3 transition time.
Step 7: Reduct http requests as more as possible
It's always good to expire http requests after downloading and cache static contents. We just need to add the following to .htaccess
# Image and Flash content Caching for One Month
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=2592360"
</FilesMatch>
Conclusion
From the testing results, the website loading is obviously improved. Because we used third party testing tools with no caching on local computers so it's acurrate. The final waiting is 1.1s comparing to the unoptimized 3.4s, we reduced 2s waiting.
Above article is translated/edited from a server professional in CN.
