Webサイトの表示速度改善方法10選【測定方法も解説】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
なお、圧縮すると画質が落ちるため、ビジュアルをキレイに見せたい場合は無理に圧縮しないようにしましょう（サイトTOPのメインビジュアルがぼやぼやの画質だと「このサイト大丈夫か……？」と思いますよね）。 画像のファイル形式を変更する 画像のファイル形式はPNG＜JPG＜WebP＜AVIFの順でデータサイズが軽くなります。 ※2024年1月現在、AVIFはGoogleChrome、Firefox、Operaのみ対応。 現在の主流はWebPです。GIFのようにアニメーションにでき、PNGのように背景を透過でき、JPG以上に圧縮率が高いという良いとこどりのファイルといえるからです。 WordPressならプラグインで、Movable Typeなら標準で自動的に画像をWebPに変換する機能もあるため、ぜひ有効に活用することをおすすめします。 ②動画の埋め込み形式の見直し 動画は画像よりもはるかに大きな
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ capo.jsの使い方 capo.jsを実際に使ってみた capo.jsの使い方 capo.jsを使用するには、2通りの方法があります。 デベロッパーツールのスニペットで実行する ブックマークレットで実行する 手順は簡単です。 capo.jsのJavaScriptをコピーします。 コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。 ※ブックマークレットは
サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse · Unlighthouse https://unlighthouse.dev/ Unlighthouseを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https://nodejs.org/ja/download/package-manager 今回は
検索順位が上がらないときの6つの確認ポイント【SEO担当者へ】 | 株式会社LIG
こんにちは！ うどん県出身のメディアコンサルタント、太田ジョーです。オウンドメディア運用について様々な施策を模索し、効果最大化に向けたお手伝いをさせていただいています。 オウンドメディアを運用するときに意識したいのがSEO対策です。特に「検索順位が上がらない……」という状況が続くと、記事の効果検証も難しく、何より運用のモチベーションが下がってしまいますね。 そこでこの記事では「記事を更新しているのに検索順位が上がらない」「いつまでたっても広告頼りになってしまう」といった担当者のみなさまへ向けて、私が運用支援を担当させていただく際に確認するポイントを6つご紹介します。 「オウンドメディアを運用しても成果がなかなかでない」「施策の立て方が難しい」などとお困りではありませんか？ ・SEO対策で自然流入が14倍。うち10位以内は0％→7％に ・認知拡大を目的とするオウンドメディアで、コンテンツ企画
重たい処理を裏に回してサイトの読み込みを爆速にするライブラリ「Partytown」使ってみたレビュー
デロイトとGoogleの調査(PDF)によって、ウェブサイトへのアクセス数や滞在時間はページの読み込み速度に大きな影響を受けることが判明しています。できるだけ読み込み時間を短く抑えたいものですが、長年ウェブサイトを運営しているとさまざまなしがらみによってアナリティクスなどのサードパーティスクリプトが増加し、どんどん読み込み速度が遅くなってしまうことも。そうしたサードパーティースクリプトの処理をサービスワーカーに任せることで読み込み速度を爆速にしてくれるのが「Partytown」です。 Welcome To Partytown https://partytown.builder.io/ ウェブの世界では基本的にJavaScriptでしかプログラミングを行えませんが、このJavaScriptはシングルスレッドで実行されており、つまり同時に一つの処理しか行えないようになっています。多数のスクリプ
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
爆速コーディングを実現！Emmetの使い方とVSCodeのおすすめ設定まとめ | Web Design Trends
Emmetを使うと、HTMLやCSSを省略記法でコーディングできるようになり、作業効率が大幅に向上します。 VSCodeであれば、デフォルトの状態でEmmetが有効になっていて、特別な設定無しに利用することができるので、Emmetだと気付かずに使っている方も多いのではないでしょうか。 今回は、Emmetの基本的な使い方と、VSCodeでEmmetを利用する時のおすすめ設定をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends Emmetとは Emmetとは、HTMLやCSSを省略記法で入力することができるプラグイン、
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
ウェブページの読み込みが遅いときはLighthouseで改善案を見て速度改善する（ひとり DevTools Advent Calendar 2020 – 15日目） | Ginpen.com
15 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ウェブクライアント側のパフォーマンスは主に読み込み時と実行時のふたつに分けることができます。今回はそのうち読み込み時のパフォーマンス改善について。 Lighthouse パネルのボタン一発で改善案が出てきます。その指示に従うと良いでしょう。 先にまとめ DevTools Lighthouse パネルを使う ボタン押すだけ 速度以外にもアクセシビリティとか SEO とか計測できるツール 改善案を提示 改善前に計測して、改善後と比較する ファイルサイズを減らすのが基本方針 Lighthouse を使った計測 さて計測なんですが、Lighthouse が初手として一番簡単かつ最後まで効果的です。なんてったってボタンを押すだけ。 DevTools 内にあり、ボタンを押すだけで手軽 結果が
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」
Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く機能を削いだ分、軽量化されている、みたいな感じでしょうか。国際化も進んでおり、翻訳者も募集されています。 ざっくり使い方です。今回は用意されているCDNを使います。unpkgの他、cdnjsやjsDelivrにも用意されているみたいです。 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>まずスクリプトを読み込みます。 <script>dayjs().format()</scr
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
Googleフォントをサブセット化してページの読み込みをスムーズに
2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。
Homebrew-caskで爆速PCセットアップ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのともぞうです。 今回はPCを素早くセットアップをする方法を紹介します。 最近、使っていたPCの調子が悪くなったので新しいPCに交換しました。いままで使っていたPCから新PCへ移行するにあたって、やはりセッティングにはそれなりの時間がかかります。 アプリのインストールや、各種設定……そんな面倒なセットアップをできるだけ短時間でおこなえる方法を紹介します。 また、本稿でアプリという言葉が意味するものは、Google ChromeやVisual Studio Codeなどです。 アプリのインストールを効率的におこなう方法 今回アプリのインストールをおこなうにあたってHomebrew-caskというものが必要になります。Homebrew-caskはHomebrewの拡張機能で、これを用いてアプリをインストールできます。 HomebrewはmacOS用のパッケージ管理
zoxide - これまでにない高速なディレクトリ移動コマンド MOONGIFT
cdコマンドはLinuxやmacOSで最もよく使うコマンドの一つではないでしょうか。 $_ や - を覚えておくとディレクトリ移動が捗るようになりますが、それでも頻繁なディレクトリ移動は面倒なものです。 よくいくディレクトリがある場合はzoxideを使ってみるといいでしょう。ディレクトリをブックマーク的に登録できるソフトウェアです。 zoxideの使い方 まずディレクトリを登録します。 $ cd ~/Documents/ $ za DevRel そして別なディレクトリで z コマンドを使います。 $ z DevRel $ pwd ~/Documents/DevRel コマンド名が短いのもいいです。zコマンドとディレクトリの名前で、どこからでも素早く移動できます。zaで登録、zrで削除できます。ziでインタラクティブに移動先を絞り込めます。頻繁なディレクトリ移動がある人ほど便利なソフトウェア
サイトを高速化したらロード時間は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: 画像の最適化 ボ
lite-youtube - YouTube動画の軽量埋め込み表示
YouTubeの動画埋め込み表示機能は便利で使っている人も多いかと思います。しかし、あの埋め込み表示は動作が重たく、あまり大量に埋め込むとWebブラウザの負荷が高くなります。 そこで使いたいのがlite-youtubeです。標準のツールに比べて圧倒的に軽快に動作します。 lite-youtubeの使い方 lite-youtubeで動作を表示した例。 デフォルトのiframeの場合。 lite-youtubeを使う場合のタグです。 <!-- 簡易版 --> <lite -youtube data-videoid="ogfYd705cRs"></lite> <!-- 詳細版 --> <lite -youtube data-videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/
uPlot - 大量のデータを高速に描画するグラフライブラリ MOONGIFT
チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。 今回紹介するuPlotはとにかく大量のデータを即座に表示したいというニーズにマッチしています。 uPlotの使い方 デモです。16.6万ものポイントをプロットしています。 最初の表示時のみ、データをオンラインで取得してきますが、二回目以降のアクセスではキャッシュが有効になるようです。データさえ取得されれば、実際の表示は瞬時に行われます。表示はもちろん、その後のスクロールもスムーズです。 uPlotはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 leeoniya/uPlot: An exceptio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvas 2Dベースの高速で軽量、さまざまなタイプのチャートに対応できるオープンソースのチャートライブラリ・「μPlot」
