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はシングルスレッドで実行されており、つまり同時に一つの処理しか行えないようになっています。多数のスクリプ
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
サイトを高速化したらロード時間は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: 画像の最適化 ボ
psi-local - ローカルサイトにPageSpeed Insightsを適用する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの表示速度が遅くて良い理由はありません。ユーザ体験はもちろん、Eコマースサイトなどでは売り上げに直結するほどです。Googleも表示速度を検索順位の指標に組み込んでおり、その指摘を行ってくれるサービスとしてPageSpeed Insightsを提供しています。 しかしこのPageSpeed Insightsは外部に公開した後でしか使えません。そこで開発中でも使えるようにするのがpsi-localです。 psi-localの使い方 psi-localを使ったテストスクリプトです。JSONオブジェクトが次のように返ってきます。 $ node test.js { kind: 'pagespeedonline#result', id: 'https://a335d185.ngr
ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで
WordPress高速化～Google PageSpeed Insights 90点達成対策まとめ｜ウェブシュフ
@web_shufuです。素人ですが、色々やってみたら、Google PageSpeed Insights で普通に90点を超えられるようになったので、これまでやった高速化対策をまとめました。 上の結果は当ページで計測しました。 表示速度はなぜ速くないといけないのか 表示速度が遅いと、 トラフィック 売上 顧客満足度 顧客そのもの 検索順位 などを失います。 さらにこれらはお互いに影響し合い負のスパイラルを形成します。 …と小難しいことを言う前に、サイトが遅くて閲覧者をイライラさせたらろくなことはないですよね。高速化は必要です。特に遅くなりがちなWordPressサイトでは。 高速化の第一歩は現在のページスピードの把握 高速化の第一歩は現在の表示スピードの計測です。 速度を計測するツールはいっぱいあるのですが、中でも重視すべきはGoogle PageSpeed Insights です。 ペ
WordPressで作成したサイトやブログを静的HTMLに変換するプラグイン -StaticPress
去年あたりから、静的サイトジェネレーターの需要が増しています。 WordPressでは通常、ページを表示する際にデータベースに接続して、動的にページを生成して表示します。更新度の高いコンテンツでは便利ですが、更新度の低い、一度公開したらほとんど更新する必要のないようなコンテンツであれば、静的ページにしてしまう方がよいかもしれません。 日本語環境にも対応、WordPressで作成したサイトやブログを静的HTMLに変換する無料プラグインを紹介します。 StaticPress StaticPress -GitHub StaticPressの特徴 StaticPressのダウンロードとインストール StaticPressの活用方法 StaticPressの特徴 WordPressで作成したコンテンツを完全に静的なHTMLファイルに変換します。表示する際のデータベースへの接続も必要ありません。 注意
Google Drive
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
最新版！WordPressのブログやサイトの運営に役立つプラグインのまとめ
WordPressのデザイン、記事の投稿、コンテンツ配信、検索エンジン最適化、メンテナンス、バックアップ、セキュリティ、パフォーマンス、アンケート、ショッピング機能など、ブログやサイトの運営に役立つWordPressのプラグインを紹介します。 WordPress Plugins We Use プラグインは、海外のWeb制作系ブログ「CSS-Tricks」で実際に利用されている厳選プラグインで、それをなぜどのように使用しているのか非常に参考になりました。 CAPTCHAはコメントではなく、管理画面のログインに使用しているとか、なるほどと思いました。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 コンテンツ配信 検索エンジン最適化 メンテナンスとセキュリティ パフォーマンス デザインと記事の編集 パーミッションとモデレーション 販売 使
競合サイトを丸裸に！SEO対策や検索順位などがわかるWeb分析ツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Pooleリーダーの鮫島です。 競合、丸裸にしてますか？（ライバル視しているサイトの、アクセス数やどこからトラフィックがあるのか、どういったキーワードを選定しどのくらいの検索数があるのかなど、SEO周りの対策を分析していますか？） 私は、主に提案資料を作成するときや、サイト設計をするときなどにします。 そういうときは、競合分析ツールを使うと効率的に情報を取得することができます。 というわけで、今回は私が普段使用している競合分析ツールを厳選して7ツールご紹介します。 無料で使える！ 競合サイトを分析できる7つのツール 1. Dockpit（ドックピット） https://www.valuesccg.com/dockpit/ 最近、認知度が高まりつつある競合分析ツールです。 機能の一部が無料で使えるのがかなり助かりますね。 無料登録で取得できる指標はざっと下記の通り。 自社サイトと競合サイトの
WordPressのデバッグプラグイン「Query Monitor」をサイト制作・カスタマイズに役立てよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアの段田です。 WordPressでテーマ作成やカスタマイズする際に便利なプラグインの紹介です。 元々WordPressでは、見ているページで使用されているテンプレートファイルや条件分岐タグの種類、実行されたSQLなどを確認できません。 ですが、この「Query Monitor」プラグインを導入すると確認することができます！ Query Monitorの導入方法 さっそく導入方法から見ていきましょう！ ダウンロード まずは「Query Monitor」をダウンロードしましょう。 https://wordpress.org/plugins/query-monitor/ もしくは管理画面のプラグイン新規追加画面にいきましょう。 インストール つぎに、インストールしましょう。 ファイルをダウンロードした方 ダウンロードしたらファイルを解凍し、pluginフォルダに設置する 管
WordPressでブログを開設して3ヶ月目の人にオススメしたい便利なプラグイン12選 | 株式会社LIG
こんにちは、メディア事業部のエリーです。 3年目の浮気、石の上にも3年と言いますが、ブログで言うと“3ヶ月”がターニングポイントになるんじゃないかと、わたしは思っています。 ブログを書くのにも慣れ、だんだんアクセスが増えてきたころ、「意外に読まれてるなあ」と思うと同時に、「そんなに一気には読まれないんだなあ」と現実にショックを受けるのではないでしょうか。 ということで、今回は、WordPress専用超高速サーバー「Z.com byGMO」さんに、3ヶ月目を迎えたブロガーが抱えるありがちな悩みと、それを解決するプラグインをお聞きしました。 3ヶ月目には入れておきたいプラグイン12選 WordPressでブログを始めたものの、プラグインをそこまで使いこなせてないし、「どれが良いのか分からない！」という人におすすめな12選です。 目次 スパムコメントやトラックバックを防ぐ「Akismet」 セキ
「ブログが重い！」WordPressを高速化させるための8つの方法とおすすめプラグイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディア事業部のエリーです。 前回の記事では、「SEOに強いブログを作りたいなら、WordPressが超いいよ！」ということをお伝えしました。 今回は、実際にWordPressでブログを運営している人にとって大きな悩みの1つであろう「ブログが重い！」問題を解決したいと思います。 「なんだか最近、ページの表示が遅いなあ」と感じたことはありませんか？ わたしもそう感じてたんですが「死ぬわけじゃないし別にいいや」と思って放置してました。でも、それがいけなかったんです・・・。 ということで、WordPressに最適化された超高速サーバー「Z.com for WordPress」を展開する「Z.com byGMO」さんに、サイトの重さを改善するための方法と、それによって得られるメリットをお聞きしました。 目次 本当に「重い」のか確かめてみましょう スコアが60以下なら要注意！ ブログは早
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと こんにちは、ライターのモリイです。 Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。 たかがページの読み込み時間、と侮ることはできません。 読み込み時間が短くなることで、 Googleに評価される。 ユーザーにストレスをあたえない。 というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。 ページの読み込みスピードを分析してみる 画面中央のフォームにサイトのURLを入力し、「分析」をクリック
専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！ これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gandul - 簡単に画像の遅延読み込みを実現
初心者ブロガー指南：Naifix-起業バカ
