You are browsing the archive for Web Design Archives - 可能实验室.


March 21, 2014 in Knowledge Sharing, Web Design



Optimize your website -Part 3

November 24, 2013 in Knowledge Sharing, Web Design

Feedback from our users:

Y.Li : Cannot login in Chrome and Safari2
Please clear your chrome cookies. Please check the following link for how to clear the cookies:

F.Fei: Why I still feel it is slow?
Well, it because of two factors:
1. Your network speed
I know this answer might not be able to convince you, but in some case ,it is the root cause. Because different people located in different region, sometimes it is the major reason. So the better way is using the webpagetest for measurement.
2. Website host’s design
Even in using webpagetest, sometime is faster,sometime it is slower. This is caused by the design of the webhoster, they will slow down those pages which are not frequently visited. If you run the webpagetest more than 5 times ,you will find the fist time it is ‘F’ ,but the rest 4 times will be ‘A’

One possible solution is using static page as the homepage.
Here is the testing result if we use the static page:


Z.Su: CSS is mess up in my browser.
It is caused by w3 total cache, disable the ‘Minify’ feature will solve this problem.


Optimize your website -Part 2

November 19, 2013 in Knowledge Sharing, Web Design


From the report we already know the key point for optimize our website: fix the Time to First Byte, the 2nd could be using image compress, the 3rd is using Cache static content.

Time to First Byte

For Time to first byte, it is a little tricky, you need to serve Static Content from a Cookie Free Domain.You need to set below two constants in your wp-config.php file.
define(“WP_CONTENT_URL”, “”);
define(“COOKIE_DOMAIN”, “”);
It can greatly reduce the Time to First Byte.

Compress Images

For Cache static content we use a plugin called WP You could fined it in the plugin manager and install it, then it is done. Unfortunately, it will only optimize the image which uploaded after you installed the plugin, but for the image which uploaded before, it can do nothing about it.

Cache static content

For Cache static content we use a plugin called W3 Total Cache. You could fined it in the plugin manager and install it, then it is done.

Final Result


Hey guys ,we made it!
From the report we see that it is 90%(1.96/3.76) faster than before.
Please contact us if you have any problems or suggestions. :)


Optimize your website -part 1

November 16, 2013 in Knowledge Sharing, Web Design


Lots of our team members found the web site is really slow these days, they are asking us to investigate the issue and optimize our website


Improve our website performance will greatly improve our work efficiency and customer experience, while I am doing the investigation ,I also find that it will greatly help the SEO ranking.

Testing tool

We running the online tool to test our website’s performance and we get the following result:



Compare the two image we could get a conclusion that:

Our site performance it greatly decided by Time to First Byte.

Report from google:


What is Time to First Byte?

From wiki page we got:

Time To First Byte or TTFB is a measurement that is often used as an indication of the responsiveness of a webserver or other network resources.

It is the duration from the virtual user making an HTTP request to the first byte of the page being received by the browser. This time is made up of the socket connection time, the time taken to send the HTTP request, and the time taken to get the first byte of the page. This can be measured using Microsoft’s Application Center Test (ACT).
1.首字节时间 (Time to first byte)
解释:Time to First Byte是指客户端发送一个HTTP GET请求,接收从服务器请求资源的第一个字节所耗用的时间,中间包括了DNS查询、服务器接受响应,查询数据库,服务器反馈时间,可以看做后端时间。后端时间受哪些因素影响?网站架构影响;内存泄露;连接数太多、太多进程;外部资源消耗;SQL效率低消耗数据库资源;数据库调用缓慢;服务器资源不够或负载过大
Find the Time to First Byte Using Curl
curl -w “Connect time: %{time_connect} Time to first byte: %{time_starttransfer} Total time: %{time_total} \n” -o /dev/null

Using this command in our website ,we get

~$ curl -w "Connect time: %{time_connect} Time to first byte: %{time_starttransfer} Total time: %{time_total} \n" -o /dev/null
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
Connect time: 0.197 Time to first byte: 0.768 Total time: 0.768

Improve Server Response Time

This rule triggers when PageSpeed Insights detects that your server response time is above 200 ms.


Server response time measures how long it takes to load the necessary HTML to begin rendering the page from your server, subtracting out the network latency between Google and your server. There may be variance from one run to the next, but the differences should not be too large. In fact, highly variable server response time may indicate an underlying performance issue.


You should reduce your server response time under 200ms. There are dozens of potential factors which may slow down the response of your server: slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation, or memory starvation. You need to consider all of these factors to improve your server’s response time. The first step to uncovering why server response time is high is to measure. Then, with data in hand, consult the appropriate guides for how to address the problem. Once the issues are resolved, you must continue measuring your server response times and address any future performance bottlenecks.

Gather and inspect existing performance and data. If none is available, evaluate using an automated web application monitoring solution (there are hosted and open source versions available for most platforms), or add custom instrumentation.
Identify and fix top performance bottlenecks. If you are using a popular web framework, or content management platform, consult the documentation for performance optimization best practices.
Monitor and alert for any future performance regressions!

Avatar of Fei

by Fei


November 5, 2013 in Web Design



SEO PPT 搜索引擎优化胶片