サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
GoogleAdSenseの遅延読込みでページ表示速度を改善
GoogleAdSenseの読込みの遅さを改善する。 問題点と目標問題点GoogleAdSenseは、JavaScript/画像/フォント/設定ファイルなどの複数データを読込むため、非常に低速です。そのため、広告を導入したページは、広告のないページに比べてページ表示速度が低速です。 ※ページ表示速度は、PageSpeed InsightsやGTmetrixの数値を使用しています 目標GoogleAdSenseを読込みつつ、ページ表示速度をできる限り早くすることです。 結果ほぼ満点の結果です。予想以上の効果に正直驚いてます。（あとは、表示速度向上によってGoogle検索で上位表示されれば言うことなしです。まあ、Google先生なら既に加味してるんだろうな…） 改善前改善後やったこと初回のユーザイベントまで読込みを遅延する。これにより、ユーザ操作がなければ、いつまでたってもGoogleAdSe
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
teyuに届いたPullRequestで使われているRubyの高速化手法 - takanamitoのブログ
この記事は ZOZOテクノロジーズ #1 Advent Calendar 2019 21日目の記事です。 昨日の記事は @awsmgsさんによる「Classic ASPによるRESTful APIのルーティング実装例」でした。 この記事では、会社の開発合宿でつくったgem teyu に届いたPullRequestで使われていた高速化手法の紹介と、なぜ速くなるのか？の考察をします。 techblog.zozo.com 届いたPullRequest 高速化その1 each → while 高速化その2 define_method → class_eval 最後に 届いたPullRequest sonots さんから2件の高速化PullRequestが届きました。 Improve performance and readability #2 Fastest version #3 前者では eac
「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。 2016年にオープンしたdev.toは、プログラマーが情報を交換したり、議論したりできるコミュニティーサイト。トップページにはユーザーが投稿したブログ記事のタイトルやコメントが、SNSのタイムラインのように並んでいる。このトップページの表示にかかる時間、各記事をクリックしたときのページ遷移が“一瞬”なのだ。 なぜ速いのか。ハルパーンさんが17年2月に投稿したブログ記事によれば、米Fastlyが提供するCDN（Content Delivery Network）を活用している。CDNは世界中にキャッシュサーバを分散配置し、ユーザーごとに最も（ネットワーク的に）近いサーバにキャッ
JavaScriptがページの読み込み時間を遅くする理由トップ10 | ゆっくりと…
CSS Sprites 化や画像サイズの最適化、Data URI 化、CSS/JavaScript ファイルの圧縮・結合・読み込み順番の整理やキャッシュ制御など、本サイトでは主に HTTP リクエストの数、データ量およびそれらの順番に関して色々なテクニックを試してきましたが、さらに深く掘り下げるには JavaScript の実行がページの読み込み時間に与える影響を知っておく必要があると思います。 「ウェッブサイトの表示速度を測定するフリーツール集」 でも紹介しましたが、dynaTrace AJAX Edition という優れたツールをフリーで公開している dynaTrace software のブログでこの問題を扱った記事がありましたので共有します。JavaScript 高速化 Tips は （例えば 「JavaScriptを高速化する6つのテクニック」 など） 多々あるかと思いますが、ペ
CPUかGPUか専用回路か - Qiita
以下の記事は,OpenVinoの登場などによって状況が変わりつつあるようです。最新の技術動向を自力で調査して、判断を行なってください。 NVIDIAのボードも、TensorRTを使う前提での評価を加えて比較して見てください。 特に、機械学習の入力をMIPIのCSIを使う前提で、CPUを介さずに検出結果を受け取る場合についての可能性も検討してみてください。 入力画像の処理からCPUが解放されることの意義は大きかったりします。 さらに、Ultra96ボードの登場によっても、FPGAボードでの開発がさらに加速されるでしょう。 FPGA実装について言えば、NNgenの可能性も選択肢に加わってきました。 NNgen の概要がわかる記事（高前田さんによる） NNgen と FPGA で作るニューラルネットワーク・アクセラレータ (1) NNgen と FPGA で作るニューラルネットワーク・アクセラレ
Railsアプリを66％スピードアップ ― Railsキャッシュの完全ガイド | POSTD
(訳注：2016/3/2、頂いた翻訳フィードバックをもとに記事を修正いたしました。) Railsアプリでのキャッシングは、「たまに夕食を一緒にするけれど、本当はもっと頻繁に一緒にいるべき友達」に少し似ています。パフォーマンスをまじめに考えるRailsアプリのほぼ全てで、もっとキャッシングを使えるはずですが、ほとんどのRailsアプリでは、完全にキャッシングを避けています。それでも普通は、Railsで高速なサーバ応答を達成するための唯一の道は、キャッシングの知的な利用なのです。約250msの応答時間を、簡単に50～100msに高速化できます。 定義についての注意 ― この記事は、アプリケーション層のキャッシングのみを対象としています。HTTPキャッシング（これは全く別の難物で、あなたのアプリケーションに実装する必要はありません）は、別の機会で扱いましょう。 するべきキャッシングをしない理由
HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
マネージドWebホスティングからVPSへブログを移行する際に最低限の努力で最大限の高速化を行う
人間とウェブの未来（旧） 「ウェブの歴史は人類の歴史の繰り返し」という観点から色々勉強しています。2014年までの人間とウェブの未来の旧ブログです。 このブログやもう一つのブログは、これまで所謂マネージドWebホスティング（利用者はコンテンツを上げるだけでWebサーバ運用はホスティング会社が受け持つ）を利用していました。 しかしよく考えると、自分自身レンサバ屋をやってきて、さらには自分でWebサービスの高度化に関する研究をやっているのに、自分でWebサーバを管理していないのはこれいかに、と思い始めて急遽VPSを借りました。 これで、Apacheをコンパイルしてmod_mrubyやその他もろもろの自作モジュールを組み込んで、最強のWebホスティング環境を構築するぜ！と思っているわけですが、せっかくVPS上でroot権限で自由にサーバカスタマイズができるわけですから、とりあえずブログのパフォー
W3 Total Cacheって実はヤバイのかも知れない - 俺のメモ
Quick Cacheについて、さらに詳しくこちらで書いています。 Quick Cache新旧版の選び方とその設定 またもや最近WordPressの速度低下に悩んでいるlatexcatsuitです。 サーバを引っ越すまで散々高速化を計っていたものの大きな効果なく引越しを決断したのが昨年5月初め。 そして半年くらいは快適な速度で運用できていたにも拘わらず、 昨年12月くらいからまたもや目に見えて速度低下が激しくなり、 サーバのロードアベレージが目に見えて高い状態に陥ることが多くなりました。 記事数が1000を超え、一日のPVが1800〜2100PV、転送量が700〜800MBをうろちょろしている状態で これは明らかにおかしいぞと検証を始めることとしました。 使用しているのはさくらのレンタルサーバスタンダードプラン。 そして高速化の為に導入していたプラグインは以下のとおり。 DB Cache
WordPressを100倍速くする！ MySQLの調整やnginx proxy cache | KRAY Inc
[追記１] 最後で説明しているproxy cacheの設定を修正しました。 [追記２] nginx proxy cacheでキャッシュしない場合の処理を変更しました。 [追記３] スマートフォンや携帯で閲覧した時にキャッシュしない設定を追加しました。 はじめに 大げさな題名ですが、今回はWordPress単体を速くするのではなく、データベースやWebサーバなどの調整、またnginxのproxy cache機能を使って速くする話になります。 サイトの構成によっては、proxy cacheは使えないかもしれませんが、使わなくても5倍程度速くすることはできましたので、参考にしていただければと思います。 今回行うチューニング一覧 DBを最適化するプラグインを導入する APCを導入してPHPを速くする MySQLを速くする 重いWordPressプラグインを外す nginx+FastCGIにする W
Guy Podjarny「SPDYはみんな思ってるものと違う」 - 以下斜め読んだ内容
Guy's POD 2012.6.12のエントリ Guy's Pod » Blog Archive » Not as SPDY as You Thought AkamaiでChief Product Architectという肩書きを持つエンジニアによるspdy検証エントリ spdyを実戦投入してもたちまち速くなるわけじゃないことを検証してる トラフィック数ランキング上位500サイトで検証 なんでgoogleが宣伝してる通りに速くならないのかも分析してる コメント欄も盛り上がってる Steve SoudersやSPDYテストしてるgoogleの人（Matt Welsh）とか Guyがspdy rantじゃないことがよくわかる 「spdyいいよね」「高速化tipsの賞味期限」「spdyはここ変えたら凄くなる」等々議論してて楽しい Guyのポイントはまとめると spdyに手を出す前にサイト高速化
サイトパフォーマンス計測ツールYSlowの評価項目まとめ
YSlowを導入して見ました。各項目の意味を理解するのにかなり時間がかかったので、）自分用ですが）まとめページを作りました。
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
plistファイルをバイナリ化して読み込みを高速化する - Qiita
Objective-cと相性の良いplistですが、大きなサイズのplist（たとえばバイナリデータが入っている） 等の場合、バイナリ化を行うと読み込み速度・ファイルサイズに劇的な向上が見られる場合があります。 私のケースの場合はファイルサイズは半分・速度は３倍くらいになりました。 変換はターミナルから plutil -convert binary1 [ファイル名] 一気にやるには、 find . -regex ".*.plist$" -exec plutil -convert binary1 {} \; ※plistの拡張子を持つファイルをすべてバイナリ化 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redisの調査についてとrmlp
10GbE時代のネットワークI/O高速化
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
