Thursday, March 5, 2015
Wednesday, March 4, 2015
Ionic Route TemplateUrl Not Found Issue
Note that both of the following are working in browser & simulator, even run directly on the phone is good. However, when you package the app and install it on your phone, the template file will not be found.
This is a tricky one because when the app installed on the phone, unlike web deployment, it most likely is not installed at root of your phone, thus, it cannot find the file.
To solve this, just trying to avoid starting with '/' in your url mapping.
CORRECT
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'template/list.html'
});
$urlRouterProvider.otherwise("/home");
});
WRONG
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/template/list.html'
});
$urlRouterProvider.otherwise("/home");
});
This is a tricky one because when the app installed on the phone, unlike web deployment, it most likely is not installed at root of your phone, thus, it cannot find the file.
To solve this, just trying to avoid starting with '/' in your url mapping.
CORRECT
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'template/list.html'
});
$urlRouterProvider.otherwise("/home");
});
WRONG
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/template/list.html'
});
$urlRouterProvider.otherwise("/home");
});
Wednesday, February 11, 2015
[Mac OS] [Android SDK] [Ionic] [How to Fix] ionic platform add android - ANDROID_HOME is not set and "android" command not in your PATH.
- Download Android SDK & Unzip it
- Setup Environment Path
- Open terminal, run 'vi ~/.bash_profile'
- Add the following lines in that file
- export ANDROID_HOME=/Users/Ian/Documents/Dev/android-sdk-macosx
- export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
- Save & Exit
- Run 'source ~/.bash_profile'
- Make sure you have the write permission for the sdk folder.
- Run 'chmod -R 777 <Your sdk path>
- (e.g. chmod -R 777 /Users/xxx/Development/android_sdk_mac).
- This is really important. I have spent a lot of time figuring this out. If you don't have the write permission, ionic will always throw 'ANDROID_HOME is not set and "android" command not in your PATH' error even if you have correctly set up all the environment variables and path.
Tuesday, November 25, 2014
Wednesday, May 28, 2014
那些你爱过的人，总会在平行时空，爱着你
1.
小白兔有一家糖果铺，小老虎有一个冰淇淋机。兔妈妈告诉小白兔，如果你喜欢一个人呐，就给一颗糖他。小白兔喜欢上了小老虎，那么那么喜欢，忍不住就把整个店子送给了他。回家后兔妈妈问她，那小老虎喜欢你吗。小白兔直点头，妈妈说，那他为什么不给你吃个冰淇淋呢。
2.
小白兔说，他是要给我来着，我说我不爱吃。兔妈妈说，那你真的不爱吃吗，有七种口味呢，巧克力味道的里面还有你最爱吃的杏仁啊。小白兔用脚划拉着地板，喃喃的说，其实我也没吃过，只是就想着把糖给他了。
3.
小老虎有了糖果店，小白兔说不如我帮你把冰淇淋机推到公园去卖吧。夏天可真热啊，冰淇淋每天都卖得光光的，大家都夸小白兔好聪明。小白兔呢，还是一口也舍不得吃。她就想等小老虎亲手送她一个，小白兔自己也没发现，她最爱的口味已经换成了香草，想要的也不再只是冰淇淋了。
4.
时间一天天过去了，小白兔还是没有吃到冰淇淋。倒是隔壁摊子卖饼干的小熊，给了她一盒小兔子造型的曲奇。小白兔留下糖果店和冰淇淋机给了小老虎，跟小熊去了更远的小公园卖饼干。兔妈妈问她，你不是不喜欢吃饼干吗，怎么又收下了呢。小兔子揉着红红的眼睛说，我就是饿了。
5.
后来小兔子听说，小老虎把冰淇淋机送给了小企鹅，和她一起住在了糖果店里。小熊把这些告诉小兔子的时候，她耷拉着耳朵呆了很久。小熊开玩笑的问她，你是不是后悔没有吃个冰淇淋再走呀。小白兔愣愣的转过脸说，就是有点难受，没能留些糖给你。
6.
小兔子卖力的帮着小熊卖饼干，没多久就又攒了一笔积蓄，买了新的糖果铺。这次兔妈妈千叮咛万嘱咐，她说宝宝啊，这糖要慢慢的给，不然后来就不甜了。小兔子 嘴上连连答应，心里却想着小熊收到糖果店该多开心啊。她只知道小熊又加班去了，不知道他小鸭子形状的饼干马上就要烤好了。
7.
小兔子回家看到了偷偷藏起来的小鸭子饼干，什么也没有多问，只是跑回家跟妈妈大哭了一场。她呜咽着和兔妈妈说，小熊最喜欢吃糖了，我终于可以给他糖果屋了，他为什么要离开我呢。兔妈妈笑了，她摸摸小兔子的头说，当他不爱你了，你的糖就不甜了。
8.
小兔子还是想不通，只好带着糖果店搬去了更远的地方。小鸭子可不是什么善茬儿，她不知从哪里打听到了糖果店的事。一天饭后，她揶揄的告诉小熊，哎呀你可不知道吧，你心里最单纯的小白兔，背着你用卖饼干的钱给自己买了好东西呢。不久之后，小兔子就收到了小熊的来信。
9.
信里只有短短几句话，大致是说小兔子走后饼干铺子生意一直不好，钱怎么说也是卖饼干挣来的，希望小兔子能把糖果店还给他。小兔子看完信后眼睛哭成了桃子， 她想起了妈妈的话，把店给了小熊。兔妈妈说小兔子是韭菜馅的脑子勾过芡的心啊，她说妈妈，其实糖还是甜的，只是人生太苦了。
10.
后来小白兔又爱过几个人，都无疾而终了。这缺心眼的小兔子啊，喜欢上一个人，就会使劲对他好，恨不得掏心掏肺给他看。她以为只有这样，才能让爱情活得更久更久一些。可惜那时候的小兔子还不明白，其实任何东西啊只要够深，都是一把刀。
11.
有一天小兔子出门，发现小熊醉倒在她门口。他哭着碎碎念着，说他过的不开心，说糖果店已经被吃完了，小鸭子嫌他没本事拍拍屁股就走了。 他一把抱住小兔子说，如果说着世界上我还有什么值得得回忆的，大概也只有你了。 小兔子被勒的喘不过气来，他心里想着，也许爱上一个旧人，就不会再有新的问题了吧。
12.
很久很久以后，小兔子和别人讲起这段故事，总是感慨万分的说，那些值得回忆的事啊，就该永远放在回忆里。
13.
不知道你又没有玩过一种游戏机，投硬币的那种。有好多小爪子推啊推，硬币们互相推搡着，摇摇欲坠却又固若金汤。拟投入的越多就越难收手，机器里的硬币落得越厚重就越不会有收获，可越是不掉币你就越觉得大奖就要来了。这逻辑很有趣，它只在你输的时候成立。可小兔子就是这么觉得的，她在万丈悬崖边，以为跳下去是学会飞翔的捷径。她默默地想，大奖终于要来了。她被大把硬币即将掉落的景象迷红了眼，以至于忘记了，自己没有翅膀。
14.
既然是童话，总得有点好的不是。小兔子回到了小熊身边，日子没有想象中的糟糕。一起吃饭，逛逛公园，小熊每天都采一朵最漂亮的花回来送给她，小兔子会做一手好菜，小熊总是抢着洗完。小熊以为一切都好了，他甚至点点失望，都说感情是刻骨铭心的，可小兔子似乎没留下任何伤痕。多可笑啊，那些拿刀子去花豆腐的人，永远都不知道疼。
15.
直到有一天晚上，小熊从厨房出来，随手递了一块饼干给小兔子。小兔子摇摇头，说我好久不吃饼干了。然后她抬起头看着小熊，淡淡的说，你给过别人的东西，就不要再给我了。小熊一瞬间明白，这些伤口还是血淋淋的。那年小兔子扑在妈妈怀里哭得那个下午，他就已经弄丢他的小兔子了。一起弄丢的，还有原本可以幸福的可能。
16.
可小熊舍不得小兔子，小兔子自己也没发现自己当初的喜欢，已经只剩下不甘心。日子还在继续，小兔子除了还是不吃饼干，什么都是百依百顺的。在别人眼里，他们俨然成为了恩爱的一对儿。直到有一天，他打开一只旧箱子，里面装满了小熊每天送她的花。花都枯萎了，小兔子想起这些日子，她每天接过小熊的花都是敷衍的笑笑，转身便扔进这个破箱子里。她一下子发现，原来不爱了，是早就不爱了。
17.
和小熊分手后，小兔子断断续续的又开过几个糖果店，卖的卖送的送，也所剩无几了。可她还是学不会开口，说她饿，说她想要吃个带杏仁儿的冰淇淋。她把给糖果当成了一种惯性和礼节，看起来和从前没什么差别。她还给它们报了亮晶晶的糖纸，但小兔子心里明白，它们早就没有味道了。
18.
后来小兔子结婚了，是和其貌不扬的小猪，再后来还有了两个孩子。小猪是隔壁村子来旅行的，据他后来说，是来小兔子店里买糖的时候，一眼就喜欢上了这个小机灵。小猪一连来了好几次，每次都是买完糖，付了钱，又悄悄把糖留下。兔妈妈说，这样的孩子品行好，可以嫁了。小猪果然也没让兔妈妈失望，结婚后包揽了所有家务，他家都夸小兔子好福气。小兔子也总是笑眯眯的，她常常摸着两个孩子的头说，如果你们喜欢上一个人啊，就找他要一颗糖。
19.
故事就要结束了。没人知道，当年小猪留下的糖，是小兔子准备吃下的毒药。小兔子明明知道是有毒的，却也懒得阻拦就卖给了小猪。她想，这些贪图甜腻的人啊，总该受到些惩罚。当她刚准备重新拿出毒药服下的时候，发现了小猪买走的糖，居然安安静静的放在罐子中。
20.
第天小猪又来了，第三天也是。小兔子还是给他有毒的糖，她甚至不明白自己为什么要这样残忍，他总想着只要小猪收下一次，一切就都结束了。可小猪每次都巧妙的放回了罐子里，然后趁小兔子还来不及发现就走了。小兔子在和自己较劲中，似乎又看到了春天。他幸免的不只是那些有毒的糖果，而是小兔子这些年对这个世界巨大的失望。终于他们相爱了，后面的故事也水到渠成了。
21.
可她忘记了兔妈妈说的，你拿谎言去考验爱情，就永远遇不到真心的爱人。
22.
有一次小猪喝多了，朋友们起哄问到他当时怎么想到不收下糖果。小猪被灌了太多酒，回答的稀里糊涂，颠三倒四。但当那些字组合在一起，传到小兔子耳朵里时。在场的谁也没听懂，只有她在一瞬间放声大哭。
23.
小猪说，那天啊，那天我只是路过来着，小熊硬塞的钱，小老虎说如果我能把糖放回去，冰淇淋机就是我的了。
24.
嗯，故事说完了。
别哭，这世界是守恒的。你付出的每一颗糖都去了该去的地方。
那些你爱过的人，总会在平行时空，爱着你。
小白兔有一家糖果铺，小老虎有一个冰淇淋机。兔妈妈告诉小白兔，如果你喜欢一个人呐，就给一颗糖他。小白兔喜欢上了小老虎，那么那么喜欢，忍不住就把整个店子送给了他。回家后兔妈妈问她，那小老虎喜欢你吗。小白兔直点头，妈妈说，那他为什么不给你吃个冰淇淋呢。
2.
小白兔说，他是要给我来着，我说我不爱吃。兔妈妈说，那你真的不爱吃吗，有七种口味呢，巧克力味道的里面还有你最爱吃的杏仁啊。小白兔用脚划拉着地板，喃喃的说，其实我也没吃过，只是就想着把糖给他了。
3.
小老虎有了糖果店，小白兔说不如我帮你把冰淇淋机推到公园去卖吧。夏天可真热啊，冰淇淋每天都卖得光光的，大家都夸小白兔好聪明。小白兔呢，还是一口也舍不得吃。她就想等小老虎亲手送她一个，小白兔自己也没发现，她最爱的口味已经换成了香草，想要的也不再只是冰淇淋了。
4.
时间一天天过去了，小白兔还是没有吃到冰淇淋。倒是隔壁摊子卖饼干的小熊，给了她一盒小兔子造型的曲奇。小白兔留下糖果店和冰淇淋机给了小老虎，跟小熊去了更远的小公园卖饼干。兔妈妈问她，你不是不喜欢吃饼干吗，怎么又收下了呢。小兔子揉着红红的眼睛说，我就是饿了。
5.
后来小兔子听说，小老虎把冰淇淋机送给了小企鹅，和她一起住在了糖果店里。小熊把这些告诉小兔子的时候，她耷拉着耳朵呆了很久。小熊开玩笑的问她，你是不是后悔没有吃个冰淇淋再走呀。小白兔愣愣的转过脸说，就是有点难受，没能留些糖给你。
6.
小兔子卖力的帮着小熊卖饼干，没多久就又攒了一笔积蓄，买了新的糖果铺。这次兔妈妈千叮咛万嘱咐，她说宝宝啊，这糖要慢慢的给，不然后来就不甜了。小兔子 嘴上连连答应，心里却想着小熊收到糖果店该多开心啊。她只知道小熊又加班去了，不知道他小鸭子形状的饼干马上就要烤好了。
7.
小兔子回家看到了偷偷藏起来的小鸭子饼干，什么也没有多问，只是跑回家跟妈妈大哭了一场。她呜咽着和兔妈妈说，小熊最喜欢吃糖了，我终于可以给他糖果屋了，他为什么要离开我呢。兔妈妈笑了，她摸摸小兔子的头说，当他不爱你了，你的糖就不甜了。
8.
小兔子还是想不通，只好带着糖果店搬去了更远的地方。小鸭子可不是什么善茬儿，她不知从哪里打听到了糖果店的事。一天饭后，她揶揄的告诉小熊，哎呀你可不知道吧，你心里最单纯的小白兔，背着你用卖饼干的钱给自己买了好东西呢。不久之后，小兔子就收到了小熊的来信。
9.
信里只有短短几句话，大致是说小兔子走后饼干铺子生意一直不好，钱怎么说也是卖饼干挣来的，希望小兔子能把糖果店还给他。小兔子看完信后眼睛哭成了桃子， 她想起了妈妈的话，把店给了小熊。兔妈妈说小兔子是韭菜馅的脑子勾过芡的心啊，她说妈妈，其实糖还是甜的，只是人生太苦了。
10.
后来小白兔又爱过几个人，都无疾而终了。这缺心眼的小兔子啊，喜欢上一个人，就会使劲对他好，恨不得掏心掏肺给他看。她以为只有这样，才能让爱情活得更久更久一些。可惜那时候的小兔子还不明白，其实任何东西啊只要够深，都是一把刀。
11.
有一天小兔子出门，发现小熊醉倒在她门口。他哭着碎碎念着，说他过的不开心，说糖果店已经被吃完了，小鸭子嫌他没本事拍拍屁股就走了。 他一把抱住小兔子说，如果说着世界上我还有什么值得得回忆的，大概也只有你了。 小兔子被勒的喘不过气来，他心里想着，也许爱上一个旧人，就不会再有新的问题了吧。
12.
很久很久以后，小兔子和别人讲起这段故事，总是感慨万分的说，那些值得回忆的事啊，就该永远放在回忆里。
13.
不知道你又没有玩过一种游戏机，投硬币的那种。有好多小爪子推啊推，硬币们互相推搡着，摇摇欲坠却又固若金汤。拟投入的越多就越难收手，机器里的硬币落得越厚重就越不会有收获，可越是不掉币你就越觉得大奖就要来了。这逻辑很有趣，它只在你输的时候成立。可小兔子就是这么觉得的，她在万丈悬崖边，以为跳下去是学会飞翔的捷径。她默默地想，大奖终于要来了。她被大把硬币即将掉落的景象迷红了眼，以至于忘记了，自己没有翅膀。
14.
既然是童话，总得有点好的不是。小兔子回到了小熊身边，日子没有想象中的糟糕。一起吃饭，逛逛公园，小熊每天都采一朵最漂亮的花回来送给她，小兔子会做一手好菜，小熊总是抢着洗完。小熊以为一切都好了，他甚至点点失望，都说感情是刻骨铭心的，可小兔子似乎没留下任何伤痕。多可笑啊，那些拿刀子去花豆腐的人，永远都不知道疼。
15.
直到有一天晚上，小熊从厨房出来，随手递了一块饼干给小兔子。小兔子摇摇头，说我好久不吃饼干了。然后她抬起头看着小熊，淡淡的说，你给过别人的东西，就不要再给我了。小熊一瞬间明白，这些伤口还是血淋淋的。那年小兔子扑在妈妈怀里哭得那个下午，他就已经弄丢他的小兔子了。一起弄丢的，还有原本可以幸福的可能。
16.
可小熊舍不得小兔子，小兔子自己也没发现自己当初的喜欢，已经只剩下不甘心。日子还在继续，小兔子除了还是不吃饼干，什么都是百依百顺的。在别人眼里，他们俨然成为了恩爱的一对儿。直到有一天，他打开一只旧箱子，里面装满了小熊每天送她的花。花都枯萎了，小兔子想起这些日子，她每天接过小熊的花都是敷衍的笑笑，转身便扔进这个破箱子里。她一下子发现，原来不爱了，是早就不爱了。
17.
和小熊分手后，小兔子断断续续的又开过几个糖果店，卖的卖送的送，也所剩无几了。可她还是学不会开口，说她饿，说她想要吃个带杏仁儿的冰淇淋。她把给糖果当成了一种惯性和礼节，看起来和从前没什么差别。她还给它们报了亮晶晶的糖纸，但小兔子心里明白，它们早就没有味道了。
18.
后来小兔子结婚了，是和其貌不扬的小猪，再后来还有了两个孩子。小猪是隔壁村子来旅行的，据他后来说，是来小兔子店里买糖的时候，一眼就喜欢上了这个小机灵。小猪一连来了好几次，每次都是买完糖，付了钱，又悄悄把糖留下。兔妈妈说，这样的孩子品行好，可以嫁了。小猪果然也没让兔妈妈失望，结婚后包揽了所有家务，他家都夸小兔子好福气。小兔子也总是笑眯眯的，她常常摸着两个孩子的头说，如果你们喜欢上一个人啊，就找他要一颗糖。
19.
故事就要结束了。没人知道，当年小猪留下的糖，是小兔子准备吃下的毒药。小兔子明明知道是有毒的，却也懒得阻拦就卖给了小猪。她想，这些贪图甜腻的人啊，总该受到些惩罚。当她刚准备重新拿出毒药服下的时候，发现了小猪买走的糖，居然安安静静的放在罐子中。
20.
第天小猪又来了，第三天也是。小兔子还是给他有毒的糖，她甚至不明白自己为什么要这样残忍，他总想着只要小猪收下一次，一切就都结束了。可小猪每次都巧妙的放回了罐子里，然后趁小兔子还来不及发现就走了。小兔子在和自己较劲中，似乎又看到了春天。他幸免的不只是那些有毒的糖果，而是小兔子这些年对这个世界巨大的失望。终于他们相爱了，后面的故事也水到渠成了。
21.
可她忘记了兔妈妈说的，你拿谎言去考验爱情，就永远遇不到真心的爱人。
22.
有一次小猪喝多了，朋友们起哄问到他当时怎么想到不收下糖果。小猪被灌了太多酒，回答的稀里糊涂，颠三倒四。但当那些字组合在一起，传到小兔子耳朵里时。在场的谁也没听懂，只有她在一瞬间放声大哭。
23.
小猪说，那天啊，那天我只是路过来着，小熊硬塞的钱，小老虎说如果我能把糖放回去，冰淇淋机就是我的了。
24.
嗯，故事说完了。
别哭，这世界是守恒的。你付出的每一颗糖都去了该去的地方。
那些你爱过的人，总会在平行时空，爱着你。
Thursday, March 20, 2014
10 Ways to Improve Your Web Page Performance
There are a million and one ways to boost your website’s performance. The methods vary and some are more involved than others. The three main areas that you can work on are: hardware (your web server), server-side scripting optimization (PHP, Python, Java), and front-end performance (the meat of the web page).
This article primarily focuses on front-end performance since it’s the easiest to work on and provides you the most bang for your buck.
Why focus on front-end performance?
The front-end (i.e. your HTML, CSS, JavaScript, and images) is the most accessiblepart of your website. If you’re on a shared web hosting plan, you might not have root (or root-like) access to the server and therefore can’t tweak and adjust server settings. And even if you do have the right permissions, web server and database engineering require specialized knowledge to give you any immediate benefits.
It’s also cheap. Most of the front-end optimization discussed can be done at no other cost but your time. Not only is it inexpensive, but it’s the best use of your time because front-end performance is responsible for a very large part of a website’s response time.
With this in mind, here are a few simple ways to improve the speed of your website.
1. Profile your web pages to find the culprits.
It’s helpful to profile your web page to find components that you don’t need or components that can be optimized. Profiling a web page usually involves a tool such asFirebug to determine what components (i.e. images, CSS files, HTML documents, and JavaScript files) are being requested by the user, how long the component takes to load, and how big it is. A general rule of thumb is that you should keep your page components as small as possible (under 25KB is a good target).
Firebug’s Net tab (shown above) can help you hunt down huge files that bog down your website. In the above example, you can see that it gives you a break down of all the components required to render a web page including: what it is, where it is, how big it is, and how long it took to load.
There are many tools on the web to help you profile your web page – check out this guide for a few more tools that you can use.
2. Save images in the right format to reduce their file size.
If you have a lot of images, it’s essential to learn about the optimal format for each image. There are three common web image file formats: JPEG, GIF, and PNG. In general, you should use JPEG for realistic photos with smooth gradients and color tones. You should use GIF or PNG for images that have solid colors (such as charts and logos).
GIF and PNG are similar, but PNG typically produces a lower file size. Read Coding Horror’s weigh-in on using PNG’s over GIF’s.
3. Minify your CSS and JavaScript documents to save a few bytes.
Minification is the process of removing unneeded characters (such as tabs, spaces, source code comments) from the source code to reduce its file size. For example:
This chuck of CSS:.some-class { color: #ffffff; line-height: 20px; font-size: 9px; }
can be converted to:.some-class{color:#fff;line-height:20px;font-size:9px;}
…and it’ll work just fine.
And don’t worry – you won’t have to reformat your code manually. There’s a plethora of free tools available at your disposal for minifying your CSS and JavaScript files. For CSS, you can find a bunch of easy-to-use tools from this CSS optimization tools list. For JavaScript, some popular minification options are JSMIN, YUI Compressor, andJavaScript Code Improver. A good minifying application gives you the ability to reverse the minification for when you’re in development. Alternatively, you can use an in-browser tool like Firebug to see the formatted version of your code.
4. Combine CSS and JavaScript files to reduce HTTP requests
For every component that’s needed to render a web page, an HTTP request is created to the server. So, if you have five CSS files for a web page, you would need at least five separate HTTP GET requests for that particular web page. By combining files, you reduce the HTTP request overhead required to generate a web page.
Check out Niels Leenheer’s article on how you can combine CSS and JS files using PHP(which can be adapted to other languages). SitePoint discusses a similar method ofbundling your CSS and JavaScript;they were able to shave off 1.6 seconds in response time, thereby reducing the response time by 76% of the original time.
Otherwise, you can combine your CSS and JavaScript files using good, old copy-and-paste‘ing (works like a charm).
5. Use CSS sprites to reduce HTTP requests
A CSS Sprite is a combination of smaller images into one big image. To display the correct image, you adjust the background-position CSS attribute. Combining multiple images in this way reduces HTTP requests.
For example, on Digg (shown above), you can see individual icons for user interaction. To reduce server requests, Digg combined several icons in one big image and then used CSS to position them appropriately.
You can do this manually, but there’s a web-based tool called CSS Sprite Generatorthat gives you the option of uploading images to be combined into one CSS sprite, and then outputs the CSS code (the background-position attributes) to render the images.
6. Use server-side compression to reduce file sizes
This can be tricky if you’re on a shared web host that doesn’t already server-side compression, but to fully optimize the serving of page components they should be compressed. Compressing page objects is similar to zipping up a large file that you send through email: You (web server) zip up a large family picture (the page component) and email it to your friend (the browser) – they in turn unpack your ZIP file to see the picture. Popular compression methods are Deflate and gzip.
If you run your own dedicated server or if you have a VPS – you’re in luck – if you don’t have compression enabled, installing an application to handle compression is a cinch. Check out this guide on how to install mod_gzip on Apache.
7. Avoid inline CSS and JavaScript
By default, external CSS and JavaScript files are cached by the user’s browser. When a user navigates away from the landing page, they will already have your stylesheets and JavaScript files, which in turn saves them the need to download styles and scripts again. If you use a lot of CSS and JavaScript in your HTML document, you won’t be taking advantage of the web browser’s caching features.
8. Offload site assets and features
Unloading some of your site assets and features to third-party web services greatly reduces the work of your web server. The principle of offloading site assets and features is that you share the burden of serving page components with another server.
You can use Feedburner to handle your RSS feeds, Flickr to serve your images (be aware of the implications of offloading your images though), and the Google AJAX Libraries API to serve popular JavaScript frameworks/libraries like MooTools, jQuery, and Dojo.
For example, on Six Revisions I use Amazon’s Simple Storage Service (Amazon S3 for short), to handle the images you see on this page, as well as Feedburner to handle RSS feeds. This allows my own server to handle just the serving of HTML, CSS, and CSS image backgrounds. Not only are these solutions cost-effective, but they drastically reduce the response times of web pages.
9. Use Cuzillion to plan out an optimal web page structure
Cuzillion is a web-based application created by Steve Souders (front-end engineer for Google after leaving Yahoo! as Chief of Performance) that helps you experiment with different configurations of a web page’s structure in order to see what the optimal structure is. If you already have a web page design, you can use Cuzillion to simulate your web page’s structure and then tweak it to see if you can improve performance by moving things around.
View InsideRIA’s video interview of Steve Sounders discussing how Cuzillion works and the Help guide to get you started quickly.
10. Monitor web server performance and create benchmarks regularly.
The web server is the brains of the operation – it’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts.
It’s essential that you are constantly checking your web server for performance issues. If you have root-like access and can install stuff on the server, check out ab – an Apache web server benchmarking tool or Httperf from IBM.
If you don’t have access to your web server (or have no clue what I’m talking about) you’ll want to use a remote tool like Fiddler or HTTPWatch to analyze and monitor HTTP traffic. They will both point out places that are troublesome for you to take a look at.
Benchmarking before and after making major changes will also give you some insight on the effects of your changes. If your web server can’t handle the traffic your website generates, it’s time for an upgrade or server migration.
This article primarily focuses on front-end performance since it’s the easiest to work on and provides you the most bang for your buck.
Why focus on front-end performance?
The front-end (i.e. your HTML, CSS, JavaScript, and images) is the most accessiblepart of your website. If you’re on a shared web hosting plan, you might not have root (or root-like) access to the server and therefore can’t tweak and adjust server settings. And even if you do have the right permissions, web server and database engineering require specialized knowledge to give you any immediate benefits.
It’s also cheap. Most of the front-end optimization discussed can be done at no other cost but your time. Not only is it inexpensive, but it’s the best use of your time because front-end performance is responsible for a very large part of a website’s response time.
With this in mind, here are a few simple ways to improve the speed of your website.
1. Profile your web pages to find the culprits.
It’s helpful to profile your web page to find components that you don’t need or components that can be optimized. Profiling a web page usually involves a tool such asFirebug to determine what components (i.e. images, CSS files, HTML documents, and JavaScript files) are being requested by the user, how long the component takes to load, and how big it is. A general rule of thumb is that you should keep your page components as small as possible (under 25KB is a good target).
Firebug’s Net tab (shown above) can help you hunt down huge files that bog down your website. In the above example, you can see that it gives you a break down of all the components required to render a web page including: what it is, where it is, how big it is, and how long it took to load.
There are many tools on the web to help you profile your web page – check out this guide for a few more tools that you can use.
2. Save images in the right format to reduce their file size.
If you have a lot of images, it’s essential to learn about the optimal format for each image. There are three common web image file formats: JPEG, GIF, and PNG. In general, you should use JPEG for realistic photos with smooth gradients and color tones. You should use GIF or PNG for images that have solid colors (such as charts and logos).
GIF and PNG are similar, but PNG typically produces a lower file size. Read Coding Horror’s weigh-in on using PNG’s over GIF’s.
3. Minify your CSS and JavaScript documents to save a few bytes.
Minification is the process of removing unneeded characters (such as tabs, spaces, source code comments) from the source code to reduce its file size. For example:
This chuck of CSS:.some-class { color: #ffffff; line-height: 20px; font-size: 9px; }
can be converted to:.some-class{color:#fff;line-height:20px;font-size:9px;}
…and it’ll work just fine.
And don’t worry – you won’t have to reformat your code manually. There’s a plethora of free tools available at your disposal for minifying your CSS and JavaScript files. For CSS, you can find a bunch of easy-to-use tools from this CSS optimization tools list. For JavaScript, some popular minification options are JSMIN, YUI Compressor, andJavaScript Code Improver. A good minifying application gives you the ability to reverse the minification for when you’re in development. Alternatively, you can use an in-browser tool like Firebug to see the formatted version of your code.
4. Combine CSS and JavaScript files to reduce HTTP requests
For every component that’s needed to render a web page, an HTTP request is created to the server. So, if you have five CSS files for a web page, you would need at least five separate HTTP GET requests for that particular web page. By combining files, you reduce the HTTP request overhead required to generate a web page.
Check out Niels Leenheer’s article on how you can combine CSS and JS files using PHP(which can be adapted to other languages). SitePoint discusses a similar method ofbundling your CSS and JavaScript;they were able to shave off 1.6 seconds in response time, thereby reducing the response time by 76% of the original time.
Otherwise, you can combine your CSS and JavaScript files using good, old copy-and-paste‘ing (works like a charm).
5. Use CSS sprites to reduce HTTP requests
A CSS Sprite is a combination of smaller images into one big image. To display the correct image, you adjust the background-position CSS attribute. Combining multiple images in this way reduces HTTP requests.
For example, on Digg (shown above), you can see individual icons for user interaction. To reduce server requests, Digg combined several icons in one big image and then used CSS to position them appropriately.
You can do this manually, but there’s a web-based tool called CSS Sprite Generatorthat gives you the option of uploading images to be combined into one CSS sprite, and then outputs the CSS code (the background-position attributes) to render the images.
6. Use server-side compression to reduce file sizes
This can be tricky if you’re on a shared web host that doesn’t already server-side compression, but to fully optimize the serving of page components they should be compressed. Compressing page objects is similar to zipping up a large file that you send through email: You (web server) zip up a large family picture (the page component) and email it to your friend (the browser) – they in turn unpack your ZIP file to see the picture. Popular compression methods are Deflate and gzip.
If you run your own dedicated server or if you have a VPS – you’re in luck – if you don’t have compression enabled, installing an application to handle compression is a cinch. Check out this guide on how to install mod_gzip on Apache.
7. Avoid inline CSS and JavaScript
By default, external CSS and JavaScript files are cached by the user’s browser. When a user navigates away from the landing page, they will already have your stylesheets and JavaScript files, which in turn saves them the need to download styles and scripts again. If you use a lot of CSS and JavaScript in your HTML document, you won’t be taking advantage of the web browser’s caching features.
8. Offload site assets and features
Unloading some of your site assets and features to third-party web services greatly reduces the work of your web server. The principle of offloading site assets and features is that you share the burden of serving page components with another server.
You can use Feedburner to handle your RSS feeds, Flickr to serve your images (be aware of the implications of offloading your images though), and the Google AJAX Libraries API to serve popular JavaScript frameworks/libraries like MooTools, jQuery, and Dojo.
For example, on Six Revisions I use Amazon’s Simple Storage Service (Amazon S3 for short), to handle the images you see on this page, as well as Feedburner to handle RSS feeds. This allows my own server to handle just the serving of HTML, CSS, and CSS image backgrounds. Not only are these solutions cost-effective, but they drastically reduce the response times of web pages.
9. Use Cuzillion to plan out an optimal web page structure
Cuzillion is a web-based application created by Steve Souders (front-end engineer for Google after leaving Yahoo! as Chief of Performance) that helps you experiment with different configurations of a web page’s structure in order to see what the optimal structure is. If you already have a web page design, you can use Cuzillion to simulate your web page’s structure and then tweak it to see if you can improve performance by moving things around.
View InsideRIA’s video interview of Steve Sounders discussing how Cuzillion works and the Help guide to get you started quickly.
10. Monitor web server performance and create benchmarks regularly.
The web server is the brains of the operation – it’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts.
It’s essential that you are constantly checking your web server for performance issues. If you have root-like access and can install stuff on the server, check out ab – an Apache web server benchmarking tool or Httperf from IBM.
If you don’t have access to your web server (or have no clue what I’m talking about) you’ll want to use a remote tool like Fiddler or HTTPWatch to analyze and monitor HTTP traffic. They will both point out places that are troublesome for you to take a look at.
Benchmarking before and after making major changes will also give you some insight on the effects of your changes. If your web server can’t handle the traffic your website generates, it’s time for an upgrade or server migration.
Friday, March 14, 2014
Subscribe to:
Posts (Atom)