dev.toがなぜinsanely fastを実現出来ているか - Qiita
INSANELY FAST Qiitaを読んでる人なら https://dev.to をほとんどの人が見たはず。見てない人は見てきてください、速すぎて驚くはず。またmizchiさんがdev.toに書いた なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - dev.to を見た人も多いと思う。個人的にHeroku, Railsを採用してここまで爆速なサイトを構築出来ていることは今までの常識を覆す衝撃な出来事だった。こんな新しい発見をもたらしてくれたdev.toには本当に感謝してる。自分もこんなサイト作ってみたいなと思ってdev.toのことを色々調べてて少し知見がたまったので共有してみます。 この記事はOkinawa.rb Advent Calendar 2017 7日目の記事です。 Twitterやってるのでよかったらフォローしてください🙋♀️ @saboyut
スタンドアロンAMPのススメ
こんにちわ、@t32kです。先日、3/18に大阪で開催されたFRONTEND CONFERENCE 2017に登壇してきました。また弊社メルカリは懇親会スポンサーでした。今回は『スタンドアロンAMPのススメ』というタイトルで講演した内容をシェアしたい思います。 私が所属しているソウゾウ社ではメルカリアッテというクラシファイドサービスを作っています。メルカリは配送システムを介して売買しますが、こちらは直接会って手渡しでモノの売り買いができます。もちろん、手数料や配送料はかかりませんので、よろしかったら使ってみてください。私はそこのWeb担当で、本サイトのAMP実装について話します。 今日のアジェンダです。 AMPのメリット 表現力について テンプレート分散について 構造化データについて まとめ といった内容でやっていきたいと思います。 AMPとは？ まずはAMPとは何か説明します。AMPとは
Ruby on Rails + Assets on Cloud をCloudFront経由で高速化 - Qiita
はじめに ファイルサイズの大きい画像などをクラウドに配置することでウェブサーバーへのリクエストを減らし、ネットワークリソースの節約と海外からのアクセスもあるため、CloudFrontでアクセスポイントからもっとエッジサーバーへ誘導させる設定を行う S3のバケット作成 CloudFrontのDistributions作成 IAMの作成 Gemのインストールと設定 (asset_sync/asset_host) デプロイ 手順 S3バケット作成 バケットの作成 ホスティングの有効化 (エンドポイントは後ほど、CloudFrontのオリジンサーバーに利用) CloudFrontのDistributions作成 Distributionの設定
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編）
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編） 増井 雄一郎（FrogApps, Inc.） 前回の記事では、 wri.peの紹介と、HTML5のApplication Cacheを使ったHTMLや画像などの読み込み高速化の話をしました。今回は、Web StorageのlocalStorage/sessionStorageを使い、Ajax通信部分と表示の高速化を行う手法を説明しましょう。 localStorageを用いた通信と表示の高速化 前回のApplication Cacheで、HTMLの読み込みが高速化されました。これでも十分速くはなったのですが、画面に全ての情報が表示されるまでには、ちょっと時間がかかります。 wri.peではメモの一覧や、メモ本体の読み込み・保存はXHR(XMLHttpRequestの略。Ajax通信で使うモジュール名)を
Facebookの数千台規模のmemcached運用について - ゆううきブログ
Linuxのブロックデバイスレベルで実現するrsyncより高速な差分バックアップについて - ゆううきブログの続きとして、Facebook の memcached 運用に関する論文を読んだ。 タイトルなどは以下の通り。 NSDI はネットワークシステムに関するトップレベルのカンファレンス。 Scaling Memcache at Facebook Rajesh Nishtala, Hans Fugal, Steven Grimm, Marc Kwiatkowski, Herman Lee, Harry C. Li, Ryan McElroy, Mike Paleczny, Daniel Peek, Paul Saab, David Stafford, Tony Tung, Venkateshwaran Venkataramani NSDI'13 In Proceedings of the
画像最適化ツールImageOptim.app（Mac）の使い方
ImageOptim.md ダウンロードしよう！ ImageOptim — make websites and apps load faster (Mac app) まずはサイトから、ImageOptim.appをダウンロードしましょう。 使ってみよう！ ImageOptim.appを起動させてみましょう。起動させると、そっけないウィンドウが表示されます。 このウィンドウに最適化させたい画像をドラッグ＆ドロップさせます。 ウィンドウ左下の+ボタンからでもファイルを選択できます。 ドロップさせると自動的に最適化が実行されます。MacBookのファンが唸りだすかもしれませんが問題ありません。頑張っているのです。 ファイル名横の緑色のチェックマークがついたら最適化完了です。 まれに再実行すると、さらにファイルサイズ削減できるので試してみましょう。 何をしているの？ ImageOptim.appは
【Mac】たった10秒でできるMac高速化！Google Public DNSを 設定してみた。 - @kitano_ow 's blog
人様によっては、12秒、13秒かかるかもしれません。 dolipoを試してみたかったんですが、Lion対応とまでしかわからなかったので、 諦めて、Google Public DNSを設定してみた所、体感でかなり早くなったので、 ご紹介を。 なんだかんだでネットワーク周りの改善になるので、基本ブラウジングが快適になったのですが iTunesStoreとかのツールでも体感でかなり改善されたような気がしましたので。 Google Public DNSって？ Google Public DNS Googleが提供する無料のパブリック DNSサービスだそうで、 Google先生曰く、速度向上及びセキュリティ改善が望めるとかなんとか。 このあたりについてはこちらの記事にて詳しい解説がのっておりましたm(_ _)m Google Public DNS を使う理由を学びました。ちゃんちゃん。の巻 では、ま
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
漢(オトコ)のコンピュータ道: MySQLを高速化する10の方法
ちょっとキャッチ−なタイトルをつけてしまったが、今日は独断と偏見でMySQLを高速化する方法を10個紹介しよう。MySQLサーバをチューニングするときや初期導入する場合などに参考にしてもらいたい。 1. バッファを増やす、または減らす チューニングの基本中の基本であるが、適切なバッファサイズを設定することはパフォーマンスチューニングの要である。主なバッファは次の通り。 innodb_buffer_pool_size・・・InnoDBだけを利用する場合は空きメモリの7〜8割程度を割り当てる最も重要なバッファである。余談だが、実際にはここで割り当てた値の5〜10%ぐらいを多めにメモリを使うので注意が必要だ。 key_buffer_size・・・MyISAMだけを利用する場合は、空きメモリの3割程度を割り当てるといい。残りはファイルシステムのキャッシュ用に残しておこう。 sort_buffer_
gzip圧縮でWebコンテンツを高速化｜Webクリエイターネット
Category Server コンテンツの表示スピードを早くするには、｢ファイルを最適化して容量を軽くする｣｢キャッシュを使う｣｢非同期通信を行う｣等、方法はいろいろとあります。 HTML･CSS･JavaScript等のファイルを圧縮して、データの転送量を減らすことでコンテンツの表示スピードを早くするのもその方法の一つです。 今回は、Apacheのモジュールである"mod_deflate"と"mod_filter"を使ってファイルを圧縮し、転送量を減らすことでWebコンテンツを高速化する方法について書こうと思います。 Keyword：gzip圧縮,高速化,転送量削減 Apacheのモジュールmod_deflateとmod_filter Apacheのモジュールである”mod_deflate”と”mod_filter”について少し説明します。 mod_deflateモジュール 簡単に説明
Web表示の高速化を実現するSPDYとHTTP/2.0の標準化 | IIJの技術 | インターネットイニシアティブ（IIJ）
はじめに SPDY(スピーディと読みます)は、GoogleがWebの表示を高速化するために開発した、新しいプロトコルです。新しいと言っても、今後普及が見込まれるような新技術ではなく、既に実用化され多くの方が日常的に利用しています。 現在ChromeやFirefox、Operaのブラウザを使われている方は、Googleのサービスやtwitterにアクセスしていると、実は全く気付かないうちに、このプロトコルを利用しています。 SPDYは2010年6月にリリースされたChromeのバージョン6安定版からデフォルトで有効になっており、Chrome利用者はこの新技術を3年以上も利用していることになります。 一般のユーザはSPDYを使っているかどうか、どうしたらわかるのでしょうか？ Chromeでは、"SPDY Indicator"という便利な拡張機能を提供しています。また同種のツールは、Firefo
Webページのパフォーマンス測定サイト「WebPagetest」で計測してみた | Check!Site
記事投稿者：山下 晴規 記事公開日：2013/06/23 最終更新日： （この記事は約1年以上経過しています。） Webサイトへのアクセスパフォーマンスを測定できるサイト「WebPagetest」を使ってみました。Webサイトの問題点を可視化でき、技術的な課題と必要な対策が明確になるので、とても良いと思います。簡単なご紹介と、測定結果を記録しておきます。 機能 「WebPagetest」は、以下の機能があります。 アクセスするロケーションは世界中で複数用意されています。（日本の場合は東京にするケースが多いと思います。） アクセスするブラウザを指定できます。（IE、Chrome、Firefox） 試験結果は、分かりやすい全体的な指標データや数値データとして表示されます。また、詳細なデータも表示する事が可能です。 試験結果として表示されるトップページ画面は以下のような感じです。 こういった結果
Webアニメーションを高速化するために知っておくべき10のこと（後編）
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
dresscording.com
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
DOM操作の最適化によるJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの
Firefox の Firebug や Chrome のデベロッパーツールの Network の結果を HAR にエクスポートしたり PDF に印刷する方法
Firefox の Firebug や Chrome のデベロッパーツールの Network をご存知ですか。以下の画像のように Web ページの表示の際に読み込まれる画像やサイズ、読み込むまでの時間などを表示してくれます。 この結果実は HAR ファイルというのにエクスポートすることができるようです。そして HAR ファイルは HAR ビューワなどで見ることができるようです。この記事ではその辺についてまとめていきます。 Network の結果をエクスポートする Chrome でエクスポートする方法 Network の結果のところで右クリックをするとメニューが出てきます。その中の Save Entry as HAR をクリックすると HAR ファイルに結果をエクスポートすることができます。 Firefox でエクスポートする方法 Firefox の場合は、拡張の NetExport という
Profiling long paint times with DevTools' continuous painting mode | Blog | Chrome for Developers
Continuous painting mode for paint profiling is now available in Chrome Canary. This article explains how you identify a problem in page painting time and how you can use this new tool to detect bottlenecks in painting performance. Investigating painting time on your page So you noticed that your page doesn't scroll smoothly. This is how you would start tackling the problem. For our example, we'll
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Charming Python: Functional programming in Python, Part 3
190 | 年齢が上がっても挑戦できる！