ã€ã“ã‚Œã¯ä¾¿åˆ©ã€‘ã‚ãªãŸã®Webサイト表示ã®ã©ã“ãŒé…ã„ã‹ã‚’一発ã§èª¿ã¹ã‚‹ãƒ–ックマークレット | åˆä»£ç·¨é›†é•·ãƒ–ãƒã‚°â€•å®‰ç”°è‹±ä¹…
最低2秒ã€ç›®æŒ‡ã™ã¯1秒以内。ウェブサイトを高速化ã™ã‚‹ãŸã‚ã®TIPS at #SMX Advanced Seattle 2012
[対象: 上級] ページã®è¡¨ç¤ºé€Ÿåº¦ãŒã€Googleã®ãƒ©ãƒ³ã‚ングを決ã‚る指標ã¨ã—ã¦æ—¥æœ¬ã‚’å«ã‚€ã‚¤ãƒ³ã‚¿ãƒ¼ãƒŠã‚·ãƒ§ãƒŠãƒ«ã§å°Žå…¥ã•ã‚Œã¦ã„ã‚‹ã“ã¨ãŒSMX Advanced Seattle 2012ã§åˆ¤æ˜Žã—ã¾ã—ãŸã€‚ ãã“ã§ä»Šæ—¥ã¯ã€ã‚¦ã‚§ãƒ–ページã®é«˜é€ŸåŒ–ã‚’å–り扱ã£ãŸã‚»ãƒƒã‚·ãƒ§ãƒ³ã‚’レãƒãƒ¼ãƒˆã—ã¾ã™ã€‚ スピーカーã¯ã€ECサイトã®REIã§SEOã«æºã‚ã‚‹Jonathon Colman（ジョナサン・コールマン）æ°ã§ã™ã€‚ ウェブサイトã®ãƒ‘フォーマンス最é©åŒ– サイトを高速化ã™ã‚‹ç†ç”± コンãƒãƒ¼ã‚¸ãƒ§ãƒ³çŽ‡ã®æœ€é©åŒ– カスタマーエクスペリエンスã¨ã‚«ã‚¹ã‚¿ãƒžãƒ¼æº€è¶³åº¦ã®å‘上 直帰率を下ã’る。 競争率ãŒéžå¸¸ã«æ¿€ã—ã„ã‚ーワードã§ã‚ªãƒ¼ã‚¬ãƒ‹ãƒƒã‚¯ã‹ã‚‰ã®ãƒˆãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚’増やã™ã€‚ 全体的ãªç«¶äº‰åŠ›ã‚’高ã‚る。 é‹ç”¨è²»ã‚’節約ã™ã‚‹ã€‚ æ•°å—ã§è¦‹ã‚‹ãƒšãƒ¼ã‚¸ã‚¹ãƒ”ード Googleã§ã¯ãƒšãƒ¼ã‚¸ã‚¹ãƒ”ードãŒæ¤œç´¢ã®1%ã«å½±éŸ¿ã—ã¦ã„る。 ユーザーãŒãƒšãƒ¼ã‚¸è¡¨ç¤ºã«å¾…ã¦ã‚‹ã®ã¯2秒ã¾ã§ã€‚ 3秒以
WordPress高速化ã«ä½¿ãˆãã†ãªãƒ—ラグインを色々試ã—ã¦ã¿ãŸçµæžœã€ã‘ã£ã“ã†æ—©ããªã£ãŸã®ã§ã”紹介。 / Maka-Veli .com
相変ã‚らãšWPã«ã‚¦ãƒˆã„僕ã§ã™ãŒã€ 案件ã§æ€¥é½ã€é«˜é€ŸåŒ–ãŒå¿…è¦ã«ãªã‚Šã€ã•ãã£ã¨ã§ãるプラグインã§å¯¾å¿œã—ãŸã‹ã£ãŸã®ã§èª¿ã¹ã¦ãŸã‚“ã§ã™ãŒã€ã›ã£ã‹ããªã®ã§Maka-Veliã«ã‚‚入れã¦ã€è‰²ã€…試ã—ã¦ã¿ã¾ã—ãŸã€‚ ã¨ã„ã£ã¦ã‚‚ã€å®Ÿéš›ã«å…¨ã¦æ¤œè¨¼ã—切れã¦ã‚‹ã‚ã‘ã§ã¯ç„¡ã„ã§ã™ã—ã€ã©ã‚“ãªç‰©ã§ã©ã‚“ãªåŠ¹æžœãŒã‚ã‚‹ã®ã‹ã‚’検証ã—ãれる能力も無ã„ã®ã§ã”注æ„ãã ã•ã„。ã‚ãã¾ã§ã‚‚「高速化ã«ä½¿ãˆãã†ã€ã¨æ€ã£ãŸç‰©ã ã‘ãªã®ã§ã€å®Ÿéš›ã®åŠ¹æžœã¯ä¸æ˜Žã§ã™ã€‚（ã‚ã‹ã‚‰ãšã«ä½¿ã†ã¨ãƒˆãƒ©ãƒ–ル起ãã¾ã™ã—ã）※ã‚ã¨ã§è‡ªåˆ†ãŒã¿ãŸã„ã ã‘ã®ã¾ã¨ã‚兼用ã¨ã„ã†è¨˜äº‹ã§ã™ã€‚ 詳ã—ãã¯ãã‚Œãžã‚Œã®ãƒªãƒ³ã‚¯å…ˆã¨ã€ãƒ—ラグインをã”紹介ã•ã‚Œã¦ã„る記事ç‰ã§ã”確èªé ‚ã‘ã‚Œã°ã¨æ€ã„ã¾ã™ã€‚ ãªãŠã€æ¤œè¨¼ã«ã‚ãŸã‚Šæ•°å€¤ã‚’å–å¾—ã—ã¦ã‚‹ã‚ã‘ã§ã¯ã‚ã‚Šã¾ã›ã‚“ã®ã§ã”了承ãã ã•ã„。 WordPressã®æ›´æ–° ã¨ã‚Šã‚ãˆãšWPを最新版（ç¾æ™‚点ã®Â WordPress 3.3.2 ）ã«å…¥ã‚ŒãªãŠã—ã¾ã—ãŸã€‚ ã¾ã‚ベタã§ã™
CSSセレクタã«ã‚ˆã‚‹é«˜é€ŸåŒ–ã€å®Ÿéš›ã®ã¨ã“゠« NAVER Engineers' Blog
çªç„¶ã®ã‚¸ãƒ§ãƒ–ズæ°é€åŽ»ã®ãƒ‹ãƒ¥ãƒ¼ã‚¹ã«é©šãã¾ã—ãŸã€‚ windowsã‹ã‚‰macã«ç§»ã£ã¦ä¸€å¹´ã«æº€ãŸãªã„ã«ã‚ã‹ãƒžã‚«ãƒ¼ã§ã™ãŒã€ã”冥ç¦ã‚’ãŠç¥ˆã‚Šã„ãŸã—ã¾ã™ã€‚ ãƒã‚¤ãƒãƒ¼ã‚¸ãƒ£ãƒ‘ンã§ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—を担当ã—ã¦ã„る富田ã§ã™ã€‚ ã•ã¦ã€ä»Šå›žã¯ã‚µã‚¤ãƒˆã®é«˜é€ŸåŒ–ã«ã¤ã„ã¦ã€ã¨ãã«ã€MEã²ã¨ã‚Šã§ã‚‚実施å¯èƒ½ãªCSSã¨HTMLã®ã¿ã§ã®é«˜é€ŸåŒ–ã®æ‰‹æ³•ã¨ãれを実施ã™ã‚‹ä¸Šã§æ³¨æ„ã™ã¹ããƒã‚¤ãƒ³ãƒˆã«ã¤ã„ã¦è¦‹ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ 高速化ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã¨ã€ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°æ™‚ã®ã‚³ã‚¹ãƒˆ CSSã®ã‚»ãƒ¬ã‚¯ã‚¿ã¯ã€body .contents .header span　aã¨ã„ã†ã‚ˆã†ã«ã€å·¦ã‹ã‚‰å³ã«ã‚ˆã‚Šè©³ç´°ã«ãªã£ã¦ã„ãよã†ã«æŒ‡å®šã™ã‚‹ã‹ãŸã¡ãŒä¸€èˆ¬çš„ã§ã™ã€‚ ã—ã‹ã—ブラウザã¯ã“ã‚Œã¨ã¯é€†ã«ã€å³ã‹ã‚‰å·¦ã«ã‚»ãƒ¬ã‚¯ã‚¿ã‚’解釈ã—ãªãŒã‚‰æç”»ã—ã¦ã„ãã¾ã™ã€‚ ãã®ãŸã‚ã€ã‚ˆã‚Šè² è·ã®ã™ããªã„CSSを書ããŸã‚ã«ã€ スタイルを当ã¦ã‚‹è¦ç´ ã«ã¯ã§ãã‚‹ã ã‘classåˆã¯IDを指定ã™ã‚‹ åå«ã‚»ãƒ¬ã‚¯ã‚¿ã¯é‡ã„ã®ã§ã€
CSSセレクタã®é«˜é€ŸåŒ–ã®è©±ã— - Webtech Walker
続・ãƒã‚¤ãƒ‘フォーマンスWebサイトをèªã‚“ã§CSSセレクタã®é«˜é€ŸåŒ–ã®è©±ã—ãŒé¢ç™½ã‹ã£ãŸï¼ˆã¨ã„ã†ã‹å…¨ç„¶çŸ¥ã‚‰ãªãã¦ã¡ã‚‡ã£ã¨ã³ã³ã£ãŸï¼‰ã®ã§ç´¹ä»‹ã—ã¾ã™ã€‚ セレクタã¯å³ã‹ã‚‰å·¦ã«è§£é‡ˆã•ã‚Œã‚‹ ã“ã‚Œã¯æ£ç›´çŸ¥ã‚‰ãªãã¦ã€çµæ§‹è¡æ’ƒã§ã—ãŸã€‚ #foo .bar {} ã“ã‚Œã¯ãªã‚“ã¨ãªã#fooを探ã—ã¦ã€ãã®ä¸ã®.barを探ã—ã¦ã„ã‚‹æ°—ãŒã—ã¦ãŸã‚“ã§ã™ã‘ã©ã€å®Ÿã¯.barを探ã—ã¦ã€ãã®è¦ªè¦ç´ ã«#fooãŒã‚ã‚‹ã‹ã‚’探ã™ãã†ã§ã™ã€‚ãªã®ã§ç‰¹ã«#fooãŒå¿…è¦ãªã‘れ㰠.bar {} ã¨æ›¸ã„ãŸã»ã†ãŒé«˜é€Ÿã ã¨ã„ã†ã“ã¨ã€‚ ã¾ãŸã€ä»¥ä¸‹ã®æ§˜ã«è¦ç´ åã§æŒ‡å®šã™ã‚‹ã¨ã€ãã®è¦ç´ ã‚’å…¨ã¦æŽ¢ã—ã¾ã™ã€‚ #foo a {} ã“ã‚Œã¯ä¸€åº¦aè¦ç´ ã‚’å…¨ã¦æŽ¢ã™ã®ã§ã€ã§ãã‚Œã°aã«classã‚’ãµã£ã¦ #foo .anchor {} ã¨ã™ã‚‹ã»ã†ãŒé«˜é€Ÿã®ã‚ˆã†ã§ã™ã€‚（#fooã‚’ã¨ã‚‹ã¨ã‚ˆã‚Šé«˜é€Ÿï¼‰ 特ã«ãƒ¦ãƒ‹ãƒãƒ¼ã‚µãƒ«ã‚»ãƒ¬ã‚¯ã‚¿ãªã©ã¯ã€ #foo * {} ã¨ã™ã‚‹ã¨ã€å…¨ã¦ã®è¦ç´ ã®è¦ªè¦ç´ ã«å¯¾ã—ã¦
HDDã‚’SSDã«ã—ãŸã‚‰ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã¯ã©ã‚Œã ã‘速ããªã‚‹ã‹ï¼Ÿ オラクルã¨å¯Œå£«é€šãŒå®Ÿé¨“
リレーショナルデータベースを利用ã™ã‚‹éš›ã«ã¯ã€é«˜ã„性能を引ã出ã™ãŸã‚ã«ç‰©ç†è¨è¨ˆã‚’ã—ã€ã‚¹ã‚ーマを工夫ã—ã€ãƒ‘ラメータã®ãƒãƒ¥ãƒ¼ãƒ‹ãƒ³ã‚°ã‚’è¡Œã†ã“ã¨ãŒã¤ãã«è¡Œã‚ã‚Œã¦ãã¾ã—ãŸã€‚ 性能ã®ãƒœãƒˆãƒ«ãƒãƒƒã‚¯ã¯ãŸã„ãŒã„HDDã«ã‚ã‚Šã€ã„ã‹ã«ãã®ãƒœãƒˆãƒ«ãƒãƒƒã‚¯ã‚’回é¿ã™ã‚‹ã‹ãŒãƒãƒ¥ãƒ¼ãƒ‹ãƒ³ã‚°ã®ãƒã‚¤ãƒ³ãƒˆã§ã™ãŒã€æœ€è¿‘ã§ã¯æ€§èƒ½å‘上ã®ãŸã‚ã®æ¦å™¨ã¨ã—ã¦ã€HDDよりもãšã£ã¨ã‚¢ã‚¯ã‚»ã‚¹æ€§èƒ½ã®é«˜ã„SSDãŒæ³¨ç›®ã•ã‚Œã¦ã„ã¾ã™ã€‚SSDã¯HDDã¨ç½®ãæ›ãˆã‚‹ã ã‘ã§ã€ã‚¢ãƒ—リケーションã«ã¾ã£ãŸãæ‰‹ã‚’åŠ ãˆãšã«æ€§èƒ½å‘上をå¯èƒ½ã«ã™ã‚‹æ‰‹æ®µã¨ã—ã¦éžå¸¸ã«é…力的ã§ã™ã€‚ HDDã®ä»£ã‚ã‚Šã«SSDを利用ã—ãŸã‚‰ã€ãƒªãƒ¬ãƒ¼ã‚·ãƒ§ãƒŠãƒ«ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã®æ€§èƒ½ã¯ã©ã‚Œã ã‘å‘上ã™ã‚‹ã®ã§ã—ょã†ã‹ï¼Ÿ オラクルã¨å¯Œå£«é€šãŒå…±åŒæ¤œè¨¼ã‚’è¡Œã„ã€ãã®çµæžœã‚’ホワイトペーパーã¨ã—ã¦å…ˆé€±ç™ºè¡¨ã—ã¾ã—ãŸï¼ˆå‚考「日本オラクルã¨å¯Œå£«é€š フラッシュ技術活用ã«ã‚ˆã‚‹ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹é«˜é€ŸåŒ–ã‚’å…±åŒæ¤œè¨¼ã€ï¼‰ã€‚ ホワイトペーパーã§ã¯ã€HDDã®ä»£ã‚ã‚Š
Gmailãƒãƒ¼ãƒ ãŒæ˜Žã‹ã™HTMLアプリケーション起動ã®é«˜é€ŸåŒ–テクニック　TechTalkManiacs
ãªã©ã¨ã„ã†ç…½ã‚Šæ°—味ãªã‚¿ã‚¤ãƒˆãƒ«ã‚’ã¤ã„ã¤ã‘ã¦ã—ã¾ã„ãŸããªã‚‹è¨˜äº‹ãŒGoogleCodeBlogã«æŽ²è¼‰ã•ã‚Œã¦ã„ã¾ã—ãŸã€‚ 最åˆã®ã»ã†ã¯ã”ã普通ã«JavaScriptを使ã£ãŸRIAアプリケーションã¯ã©ã†ã—ã¦ã‚‚èµ·å‹•ãŒé…ããªã‚‹ãŸã‚ã€ãれをã©ã†æ¸›ã‚‰ã™ã‹ã€ã¨ã„ã†ãƒ†ãƒ¼ãƒžã«ãã£ã¦æ›¸ã‹ã‚Œã¦ã„ã¾ã™ã€‚ 方法ã¨ã—ã¦æŒ™ã’られã¦ã„ã‚‹ã®ã¯ã€æœ€åˆã«ã™ã¹ã¦ã‚’èªã¿è¾¼ã¾ãšã€ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«å˜ä½ã§åˆ†å‰²ã—ã¦é…延ãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã™ã‚‹ã“ã¨ã€‚ãŸã ã—ã€ãã‚Œã ã‘ã ã¨å›žç·šé€Ÿåº¦ãŒé…ãä¸å®‰å®šãªãƒ¢ãƒã‚¤ãƒ«ç’°å¢ƒã§ã¯å•é¡ŒãŒç”Ÿã˜ã‚‹ãŸã‚HTML5ã®ã‚ャッシュ機能を利用ã™ã‚‹ã¨ã„ã„ã¨ã®ã“ã¨ã€‚ é…延ãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã®ãŸã‚ã®ã•ã¾ã–ã¾ãªæ‰‹æ³•ã®å¾—失やã€ä¾‹ãˆã°ãƒ¦ãƒ¼ã‚¶ãƒ¼ãƒ‡ãƒ¼ã‚¿ã‚’èªã¿è¾¼ã‚€ã¨ãã«ã¯å‹•çš„ãƒãƒ¼ãƒ‰ã—ãªã„ã€ã¨ã„ã†ã‚ˆã†ã«ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®æ“作を妨害ã—ãªã„よã†ç•™æ„ã™ã‚‹ã“ã¨ãªã©ã«ã¤ã„ã¦ã‚‚è¿°ã¹ã‚‰ã‚Œã¦ã„ã¦ãã‚Œã ã‘ã§ã‚‚ノウãƒã‚¦ã¨ã—ã¦å分ã«æœ‰æ„義ãªã®ã§ã™ãŒã€æ±ºã‚手ã¨ã—ã¦æœ€å¾Œã«å‡ºã¦ãる方法ãŒã™ã”ã„ã§ã™ã€‚ ãã®æ–¹æ³•ã¨
High Performance Web Design ~デザインã‹ã‚‰è€ƒãˆã‚‹ãƒã‚¤ãƒ‘フォーマンスWebサイト~ | warikiru
2009-11-24 High Performance Web Design ~デザインã‹ã‚‰è€ƒãˆã‚‹ãƒã‚¤ãƒ‘フォーマンスWebサイト~ ラベル: performance CSS Nite in ISHIKAWAã§è©±ã‚’ã—ã¦ã‹ã‚‰1ヶ月経ã£ãŸã®ã§ã€è–„れゆã記憶ã®å¾©ç¿’ã‚‚å…¼ãã¦æ€ã„ã®ä¸ˆã‚’綴ã£ã¦ã¿ãŸï½— High Performance Web Design 1. What's High Performance?ã“ã“ã§ã„ã†ãƒ‘フォーマンスã¨ã„ã†ã®ã¯Webサイトã®è¡¨ç¤ºé«˜é€ŸåŒ–ã«ã¤ã„ã¦ã§ã™ã€‚ã¤ã¾ã‚Šã€ãƒšãƒ¼ã‚¸ã‚’ã„ã‹ã«æ—©ã表示ã•ã›ã‚‹ã‹ã¨ã„ã†èª²é¡Œã§ã™ã€‚ã§ã‚‚ã€ãã†ã‚†ã†ã®ã£ã¦ã‚µãƒ¼ãƒãƒ¼å´ã®å•é¡Œã§ã—ょ？システムエンジニアã®ç®¡è½„ã˜ã‚ƒãªã„ã®ï¼Ÿã¨æ€ã‚ã‚ŒãŒã¡ã§ã™ãŒã€Œãƒã‚¤ãƒ‘フォーマンスWebサイトã€ã®è‘—者ã§ã‚ã‚‹Steve Soudersã®èª¿æŸ»ã«ã‚ˆã‚‹ã¨ã€80:20。一般的ã«ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®å¾…ã¡æ™‚é–“ã®å®Ÿã«80%ãŒãƒ–ラウザå´ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã§è²»ã‚„ã•ã‚Œã¦
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}