こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン

こんにちは、メルカリのQA-SETチームで自動化をぶりぶりしている tadashi0713 です。 これまではモバイルアプリ・WebアプリのE2Eテストを中心に自動化をしていましたが、最近ではプロダクト部門・カスタマーサポート部門・コーポレート部門の業務自動化にも挑戦しています。 今回はSelenium WebDriver (以下 Selenium) を使って簡単にできるブラウザ作業自動化についてご紹介します。 10/25にGitHub JapanでLT発表した資料もありますので、合わせてご覧ください。 english-lt.connpass.com 意外と多い、ブラウザを使った繰り返し作業 社内の色々な職種・チームの方々とコミュニケーションをしていると、ブラウザを使った繰り返し作業が多く感じました。 例えば 社内で使用しているWebサービスのアカウントを社員に付与する Chartio(h

可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を

やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目

これらの作業によりPageSpeed Insightsのスコアが、61→77とかなり改善してきました。 毎回、一つ一つ成果を確かめながら高速化させたいので、今回は「画像最適化してブログの高速化」を行いたいと思います。 photo by Rami ™ 画像の最適化って？簡単に言うと、ブログで使っている画像の画質は保ったまま圧縮して転送サイズを減らし、ブログの表示スピードを速くすることです。 PageSpeed Insightsの提案には以下のように出ています。 画像を最適化する 画像を適切にフォーマット化して圧縮すると、データ サイズを大きく削減できます。 次の画像を最適化すると、サイズを 41.6 KB（15%）削減できます。 画像を適切に圧縮することで、41.6KB全体の画像サイズを削減できるようです。ちょうど上にあるPNG画像が22KBなので、トップページだけでその約2倍削減できること

Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers

業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー（ApacheとかNginxとか）への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

This domain may be for sale!

[対象: 上級] モバイルサイトにおいては、モバイルユーザーのユーザーエクスペリエンスを高めるためにスクロールせずに最初に見える、いわゆるAbove the foldのコンテンツを1秒未満で表示することをGoogleは推奨しています。 そこでこの記事では、feedthebotが解説しているAbove the foldのコンテンツ表示のスピードアップに役立つ3つのテクニックを紹介します。 1. Above the foldのHTMLをそれ以外と分割する サイドバーを含むAbove the foldで表示されるのコンテンツのHTMLコードを先に記述します。 ここでのポイントは、Above the foldのエリアとそれより下のエリア (Below the fold) の2つに分けるという点です。 メインコンテンツだけではなくAbove the foldで表示する部分のサイドバーのコードも残りと

まずはオブジェクトキャッシュ。 オブジェクトキャッシュとは、PHPのコンパイルが少なくなる。 これに↓↓含まれている「object-cache.php」を　wp-content/　にアップロード！ WordPress › APC Object Cache Backend « WordPress Plugins 次に↓のプラグインをインストール！ WordPress › Tribe Object Cache « WordPress Plugins 以上で爆速サイトになるお！ ※APCとは スクリプトを実行する前に中間形式にコンパイルし、それを実行します。このコンパイルは、スクリプトにアクセスがあるたびに毎回実行されます。同じファイルをコンパイルしてできる中間形式は常に同じであるため、毎回行うことは無駄です。 APCを利用することで、この無駄をなくし、Webサーバのパフォーマンスを向上させるこ

1. 設計段階から実装まで、今すぐ始める高速化 設計段階から実装まで、今すぐ始める高速化 CSS Nite LP Disk 23 , こもりまさあき 2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき 2. 設計段階から実装まで、今すぐ始める高速化 自己紹介を… こもりまさあき http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大 学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク 関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。 案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』 『WordPress 高速化＆スマート運用必携ガイド（共著・MdN刊）』、など Twitter: @ciph

MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時