サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ
日経電子版はなぜ”爆速化”したのか、どれだけ速いのか
日本経済新聞の「日経電子版」が2017年11月6日、7年ぶりの大リニューアルを行った。今回のリニューアルで話題になったのが「表示速度の改善」。モバイルでの読み込みスピードが飛躍的に速くなった。もちろん、同サイトはこれまでもモバイルファーストを意識しており、従来サイトが表示速度において遅かったわけではなかった。では、開発チームはなぜさらなる高速化を目指したのか。具体的にどういうアプローチで高速化を果たしたのか。そして、彼らの見つめる次のステージの戦略とは何かを尋ねてみた。 インターネットにおけるビジネス展開という視点でいえば、多くのマスメディアは後れを取った。そんな中で例外が日本経済新聞社だ。デジタル化に積極的に取り組んできた同社は2010年に「日経電子版」を創刊し、2017年12月1日現在で会員数380万人を数えるまでに成長させている。しかも、内55万人は有料会員だ。 そして、次の展開に挑
Webサイトのスピード改善はUI／UX改善以上に効果あり――ゴルフダイジェスト・オンライン担当者が断言
Webサイトのスピード改善はUI／UX改善以上に効果あり――ゴルフダイジェスト・オンライン担当者が断言：【連載】売り上げにつながるスピード改善 第1回 Webサイトの表示速度改善は離脱を減らしコンバージョンを増やすために取り組むべき重要課題。有力Webサイトの第一線でスピード改善に携わる人の声に耳を傾けてみよう。 2017年はEC事業者の間で「スピード」への関心が高まった1年だったといえるだろう。 日本の代表的なポータルサイトであるYahoo! JAPANにおいて、スマートフォン（スマホ）経由のトラフィックがPC経由のそれを上回ったのは2015年5月のことだ。多くのB2Cの事業会社ではこの頃からスマホ経由のアクセスが急増し、化粧品メーカーのWebサイトや子育てメディアでは、モバイルトラフィックが軒並み7〜9割を占めるようになっている。 一方で、スマホからのアクセスが当たり前になった今日でも
リニューアルした日経電子版が高速すぎてヤバイ件｜こんぴゅ
日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN（世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス）で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無
GIDZipTest: Web Page Compression (Deflate / Gzip) Test - GIDNetwork
A simple online web page compression / deflate / gzip test tool Introducing GIDZipTest™, a simple web page compression / gzip test tool. Add some PHP code to compress your web pages and test it out with this quick gzip / deflate encoding test tool. Also, please read the article: How do I compress my web site? This version of the tool is able to identify web pages with deflate encoded content as we
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
