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％に ・認知拡大を目的とするオウンドメディアで、コンテンツ企画
VSCodeでChatGPTにプログラムのバグや、レビューをしてもらおう！
こんにちは、プロクラスの阪口です！ 昨今、ChatGPTやBingなどの人工知能チャットボットが人気ですよね〜 なので今日は、プログラミングやコーディングに欠かせないツール「VSCode」で、ChatGPTを使えるようにするプラグイン「ChatGPT Reborn」を導入し、ソースコードのバグを発見してもらったり、ソースレビューをしてもらいたいと思います！ ChatGPT Rebornとは？ ChatGPT Rebornは、OpenAIが開発した人工知能モデル「ChatGPT」を、VSCode上で手軽に使えるようにするプラグインです。 このプラグインを使えば、アルゴリズムのヒントなどを簡単に教えてもらうことができます！ それでは、そのインストール方法と基本的な使い方について解説していきます。 ChatGPT Rebornのインストール方法 まずは、VSCodeを開いて、以下の手順でインスト
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
【SEO対策】画像形式WebPでデータを軽減し、検索順位を上げよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そのなかでもみなさんが気になっているのはWebP（JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えた静止画像フォーマット）対応だと思います。実装にはいくつか方法があるのですが、まずどうやってWebP形式の圧縮画像を作ればいいのか。 一つひとつの画像を圧縮・WebP変換するにはGoogle謹製の画像処理サービス Squoosh がおすすめです、という話を前回させていただきました。しかし、このサービスの難点は、複数画像の一括処理がブラウザ上ではできないこと。 そう、「ブラウザ上では」。 コマンドライン版Squoosh 実はSquooshはコマンドライン版というものが存在します。というかむしろこっちが本命だと思われます。ちなみに今回の内容も非エンジニア向けなので、CLI（コマンドラインインターフェイス）と呼ばれるあの黒い画面にアレルギーが発症しない方はぜひトライしていただきたいです。 利用
画像ファイルのサイズ圧縮＆JPEG/PNG/WEBP/AVIF/JXLにフォーマットを変換＆オフラインでも利用可能な「Compress Images」
プライバシーを保護しながら画像ファイルを圧縮できるウェブツールがWebUtilsの「Compress Images」です。画像ファイルをJPEG/PNG/WebP/AVIF/JPEG XLといった画像ファイルフォーマットに変換しながらファイルサイズを圧縮可能で、ウェブツールながらブラウザ上から画像がサーバーへ送信されることがないためオフラインでも利用可能で、画像データを傍受されたり盗まれたりする心配もありません。 Compress Images - An Online tool to compress/convert images https://www.webutils.app/image-compress Compress Imagesの使い方は簡単で、上記のURLにアクセスして画面中央にある「Drag n drop images here, or click to select」と書
非エンジニアでも簡単にできる画像圧縮の方法。PNGとJPGの違いも解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
画像最適化に必要なサービスとツール まずは、Webブラウザ上で画像圧縮ができるサイトが色々あるなかで、コレ！ というサービス2つと、Macで使えるフリーソフトを紹介します。 Squoosh（Google） Squoosh JPG, PNG, WebPに変換が可能で、一枚一枚の画質を確認、調整しながら丁寧に変換できます。さらに画質やフィルタを設定する Edit という小窓の右上、[ >_ ] こんな感じのアイコンをクリックすると、設定した内容のCLIコマンドをコピーできます。 そのため、設定が決まったらコードをコピーしてコマンドラインで一気に変換なんてことも可能になります。素晴らしい。 「Commandとかは無理、だけど数十枚〜一括で変換したい」という方にとっては、一枚ずつしか変換できないというのは厳しいですよね。その場合はもう一つのサービスが使えます 以上、コマンドを叩くか、上記2サービス
Webサイトリリース前に確認すべきSEO内部施策10項目をご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作事業部WebディレクターのZIMAです。 みなさん、SEO内部施策やってますか？ やっていないわけないですよね。しかし「どこまでやってますか」と聞かれると……困っちゃう人多いのではないでしょうか。 実は自分もどこまでやればいいんだろう？ と思って、我らがづやさんに聞いてみたところ「ふむふむ、それなら、 ちょうどいいの作ってるから、勉強がてらZIMAがつくってみてよ」と、ひょんな流れから私がLIGのSEO内部施策チェックリストを作成することになりました。 せっかくなのでブログにして自分の学びをみなさまに共有したいと思います！ そもそもSEO内部施策ってなんだ？ Webサイトの中身をGoogleなどの検索エンジンに正しく伝えたり、ユーザーがストレスなく利用できるようユーザビリティを向上させるための施策のことです。 世界中のWebサイトをクローリングしているのは簡単に言えばロボッ
【作業効率up】すぐにできるリファクタリング5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
朝の人も夜の人もおはようございます。ザワです。自然の雄大さを感じる年頃のフロントエンドエンジニアです。 さて、私は仕事柄、ソースコードのレビューをします。その最中、気づいたんです。比較的簡単にできるリファクタリングってあるよねって。今回はそんなお得なリファクタリング項目を五つに絞って紹介いたします。 普段vueを触ることが多いので、一部vueでソースコードを紹介いたします。 関数名変更 変更前 <button @click="onClick">トップへ</button> const onClick = () => { router.push('/') } 変更後 <button @click="goToRoot">トップへ</button> const goToRoot = () => { router.push('/') } 変更前のonClickでも別におかしくはありませんが、vueの
Googleデベロッパーが解説、Webページに画像の遅延読み込みを使いすぎるとパフォーマンスに悪影響を与える
loading="lazy"によるネイティブ画像の遅延読み込みのリスクとリターン、注意点とパフォーマンスを向上させる実装方法を紹介します。 Webの新機能は便利で魅力的なものが多いですが、効果的な使い方を知らないと、パフォーマンスに悪影響を与えてしまうかもしまうかもしれません。Web制作者は知っておきたい遅延読み込みの実装方法をチェックしておきましょう。 The performance effects of too much lazy-loading by Rick Viscomi, Felix Arntz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みを採用しているサイトは増加している 相関性の高いパフォーマンス 因果関係を調べる 修正して再テスト ロールアウト おわりに はじめに 遅延読み込み（laz
CSSの実装方法を少し改善するだけで、Webページの読み込み・表示を最適化するテクニックのまとめ
CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブバイタルに大きな影響を与えます。 ウェブバイタル（Web Vitals）を最適化するためのCSSのテクニックを紹介します。 CSS for Web Vitals by Katie Hempenius, Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レイアウトのCSSを改善 画像のCSSを改善 画像によるレイアウトシフトのCSSを改善 WebフォントのCSSを改善 アニメーションのCSSを改善 クリティカルCSS 終わりに はじめに CSSの記述方法やレイアウトの構築方法で、コアウェブバイタル（Core
JavaScript初学者が現場で活躍するフロントエンドエンジニアにレビューしていただいた内容【もりけん塾】 - Qiita
前置き 私が所属している「もりけん塾」で受けたコードレビューについてまとめていきます。 「もりけん塾」では、先生がマークアップエンジニアからフロントエンドエンジニアになるための課題を作成してくださっており、塾生はその課題を通してJavaScriptの基礎を学んでいきます。 本当に1段1段階段を登っていくように作られており、課題を終える頃にはある程度自走しながらコードが書けるようになります。 私もこの課題に挑戦し、先日課題を終えることができました。だいたい2~3ヶ月くらいかかったと思います。JavaScriptが全然わからない状態から、ここまで書けるようになるとは思っていなかったです。 JS課題はこちら 成果物 👈 README.mdに置いてます。 先を見越したコードを書く編 仕様が増えたときを想定する バリデーションを実装する課題でのレビューです。 名前のバリデーションでは、変数名を n
Webフォントの表示を最適化するテクニック
Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ
Optimus - 画像をまとめて変換してサイズ縮小
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像の解像度が上がっており、その結果として画像のファイルサイズが巨大化しています。画像はWebサイトやアプリでふんだんに使われるので、サイズが大きくなると、それだけでパフォーマンスが悪化します。 そこで使ってみたいのがOptimusです。画像をまとめて変換、最適化します。 Optimusの使い方 画像を登録します。複数画像をまとめて登録できます。 変換しました。1.46MB削減できました。 設定です。 OptimusがサポートしているのはJPEG/PNG/WebPになります。最適化と相互変換が可能です。画像の大きさもバッチ処理で変換可能です。見た目が派手で、使っていて面白いソフトウェアです。 OptimusはVue製、Windows/macOS/Linux製のオープンソース・ソフト
SVGの編集や最適化、変換、管理や検索が可能なSVG管理デスクトップアプリ・「SVGX」
SVGXはSVGの編集や最適化、変換、管理や検索が可能なSVG管理デスクトップアプリです。Win、Macの両OSに対応しています。Electron + Svelteで作られているようです。 端末内の任意のSVGのプレビューや拡大/縮小、コードのライブ編集、URLエンコード、CSS用コード変換、検索が可能な他、ブックマークや履歴なども利用できる様になります。 実際使ってみた感想ですが、個人的にはかなり便利に感じました。特に検索機能と変換、最適化機能など欲しかった機能を1つのアプリで使えるのは嬉しいです。自分自身、ファイルの整理整頓がやや苦手なので助かりました。今のところ、そのまま使い続けるつもりです。 本題とはあまり関係ないのですが、このSVGXが少し変わった配布手法を取っていたのでメモ代わりに。 SVGXはオープンソースでもなく有償ライセンスでもない、Gitwareという配布スタイルを取っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PDFTool：安全でシームレスなオンラインPDF修正
SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
