<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>画像最適化 | Webサイトに必要なことと道具</title>
	<atom:link href="https://xn--ecka7j.biz/tag/image_optimization/feed/" rel="self" type="application/rss+xml" />
	<link>https://xn--ecka7j.biz</link>
	<description>セキュリティ対策、最適化、ツール、工作</description>
	<lastBuildDate>Wed, 13 Aug 2025 08:20:27 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://xn--ecka7j.biz/wp-content/uploads/2020/02/cropped-ogt-512-512-024-068-32x32.png</url>
	<title>画像最適化 | Webサイトに必要なことと道具</title>
	<link>https://xn--ecka7j.biz</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>WordPressあなたにオススメ厳選プラグイン14</title>
		<link>https://xn--ecka7j.biz/security/908/</link>
		
		<dc:creator><![CDATA[Jun-N]]></dc:creator>
		<pubDate>Fri, 31 Jul 2020 10:54:04 +0000</pubDate>
				<category><![CDATA[ウェブサイトの軽量化]]></category>
		<category><![CDATA[サイト運営]]></category>
		<category><![CDATA[セキュリティ]]></category>
		<category><![CDATA[プラグイン]]></category>
		<category><![CDATA[reCaptcha]]></category>
		<category><![CDATA[REST API]]></category>
		<category><![CDATA[REST API脆弱性]]></category>
		<category><![CDATA[SEO内部対策]]></category>
		<category><![CDATA[セキュリティ対策]]></category>
		<category><![CDATA[フィルタリング]]></category>
		<category><![CDATA[プラグインで対応]]></category>
		<category><![CDATA[ログイン保護]]></category>
		<category><![CDATA[ログイン画面]]></category>
		<category><![CDATA[大事なこと]]></category>
		<category><![CDATA[次世代フォーマット]]></category>
		<category><![CDATA[画像圧縮]]></category>
		<category><![CDATA[画像最適化]]></category>
		<guid isPermaLink="false">https://xn--ecka7j.biz/?p=908</guid>

					<description><![CDATA[ワードプレスのウェブサイトにセキュリティ対策と運用・運営支援のためのプラグインを厳選! 必要なことは、セキュリティを保つこと、そしてサイトの軽量化です。 Update:2023/１２/25 機能・守備範囲と選ばれた理由の [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>ワードプレスのウェブサイトにセキュリティ対策と運用・運営支援のためのプラグインを厳選!</p>



<p>必要なことは、セキュリティを保つこと、そしてサイトの軽量化です。</p>



<p class="has-text-align-right"><strong><span class="marker-under-blue">Update:2023/１２/25</span></strong></p>



<!-- Block.01 -->
<a href="#plugin"><span style="color: #A7F1FF;">機能・守備範囲と選ばれた理由</span></a>の表にあるプラグインは、いずれも最新WordPress <b>6.4.2</b>で正常に動作しています。




  <div id="toc" class="toc tnt-none toc-center tnt-none border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ul class="toc-list open"><li><a href="#toc1" tabindex="0">お薦めプラグイン</a><ul><li><a href="#toc2" tabindex="0">選考対象</a></li><li><a href="#toc3" tabindex="0">選考範囲</a><ul><li><a href="#toc4" tabindex="0">セキュリティ対策</a></li><li><a href="#toc5" tabindex="0">運用・運営支援</a></li></ul></li></ul></li><li><a href="#toc6" tabindex="0">選ばれたプラグイン</a><ul><li><a href="#toc7" tabindex="0">機能・守備範囲と選ばれた理由</a><ul><li><a href="#toc8" tabindex="0">プラグイン一覧</a></li></ul></li><li><a href="#toc9" tabindex="0">選外とその理由</a><ul><li><a href="#toc10" tabindex="0">以下のプラグインは一例</a></li></ul></li></ul></li><li><a href="#toc11" tabindex="0">まとめ</a></li><li><a href="#toc12" tabindex="0">使っちゃいけないプラグイン</a><ul><ul><li><a href="#toc13" tabindex="0">使っちゃいけないプラグイン（更新）2023</a></li></ul></li></ul></li></ul>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">お薦めプラグイン</span></h2>



<!-- Block.02 -->
<div class="box_j1">今すぐ確認　<i class="bi bi-arrow-down-square"></i>　
<form>
<p class="cb">
 <a href="#next_x" class="c_b_x btn_j1"><span></span><span></span><span></span><span></span>Next <i class="bi bi-arrow-down-square"></i>
 </a>
</p>
</form>
</div>



<h3 class="wp-block-heading"><span id="toc2">選考対象</span></h3>



<p>選考対象は、WordPressの機能を補完する、セキュリティ対策と運用・運営支援</p>



<p>さらに、<span class="marker-under-blue">テーマにて補完されうる機能</span>、<span class="marker-under">レンタルサーバーで提供される機能</span>は、除外して</p>



<p>出来るだけ導入プラグインの数を減らしサイトの負荷の軽減と管理のしやすさを追求</p>



<h3 class="wp-block-heading"><span id="toc3">選考範囲</span></h3>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="800" height="450" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-800x450.png" alt="plugin" class="wp-image-906" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-800x450.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-500x281.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-300x169.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-768x432.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-160x90.png 160w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01-1280-720-180-684.png 1280w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">選考対象プラグイン</figcaption></figure>



<h4 class="wp-block-heading"><span id="toc4">セキュリティ対策</span></h4>



<ol style="list-style-type:upper-alpha" class="wp-block-list">
<li>ログイン保護</li>



<li>REST API によるユーザ情報保護(隠す)</li>



<li>アンチスパム</li>



<li>サイトへの悪意のある要求をフィルタリングする</li>
</ol>



<h4 class="wp-block-heading"><span id="toc5">運用・運営支援</span></h4>



<ul class="wp-block-list">
<li>画像圧縮(次世代フォーマット：サイト軽量化)対応</li>



<li>画像最適化</li>



<li>キャッシュ処理（スピードアップ）</li>



<li>アクセス状況把握（ヒートマップなど）</li>



<li>コンタクトフォーム（問い合わせ）</li>



<li>画像遅延読み込み（Lazy Load）<strong><sup><span class="bold-red">※01</span>.　</sup></strong></li>



<li><strong>XML</strong>サイトマップ作成<strong><sup><span class="bold-red">※01.</span></sup>　</strong></li>



<li><strong>HTML</strong>/<strong>CSS</strong>/<strong>JavaScript</strong>等の縮小化<strong><sup><span class="bold-red">※02</span>.</sup>&nbsp; </strong></li>



<li><strong>SEO</strong>内部対策<strong><sup><span class="bold-red">※02</span>.</sup>&nbsp;</strong></li>



<li>エディタ拡張<strong><sup><span class="bold-red">※02.</span></sup></strong></li>



<li>記事投稿支援</li>
</ul>



<p><a><strong><span class="bold-red">※01</span>. </strong></a><a href="https://イイネ.biz/security/99/">WordPress <strong>5.5の</strong>ネイティブサポート機能で除外</a>できるもの</p>



<p class="is-style-information-box"><strong><span class="bold-red">※02</span></strong><a><strong><span class="bold-red">.</span> </strong></a>機能を持つ<strong>テーマを採用</strong>することで除外できるもの<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; テーマ<span class="bold-blue"> Cocoon</span>には、これらの機能が基本的に備わっている。</p>



<h2 class="wp-block-heading"><span id="toc6">選ばれたプラグイン</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" width="800" height="450" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-800x450.png" alt="plugin" class="wp-image-905" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-800x450.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-500x281.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-300x169.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-768x432.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-160x90.png 160w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ok-1280-720-192-724.png 1280w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">選択</figcaption></figure>



<!-- Block.03 --><p id="plugin">機能・守備範囲と選ばれた理由</p>



<h3 class="wp-block-heading"><span id="toc7">機能・守備範囲と選ばれた理由</span></h3>



<!-- Block.04 --><p id="next_x"><i class="bi bi-arrow-clockwise fa fa-spin fa-3x c_lime"></i>　プラグイン導入の<strong>目的</strong>は、サイトの<strong>セキュリティ</strong>対策と<strong>軽量化</strong></p>



<p></p>



<h4 class="wp-block-heading"><span id="toc8">プラグイン一覧</span></h4>



<!-- Block.05 -->
<figure class="wp-block-table">
<div class="scrollable-table stfc-sticky"><table style="border-collapse:collapse;border-color: aqua"> 
<caption class="tal"><i class="fas fa-edit fa-2x c_lime"></i>最終更新日：23/12 </caption>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col" class="bc_lime">プラグイン</th>
<th scope="col">用途/<br>選考理由</th>
<th scope="col" class="bc_lime tal">具体例：補足</th>
</tr>
</thead>
<tbody>
<tr><td style="color: blue;">01</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/akismet/" target="_blank">Akismet <br>Anti-Spam
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/Akismet.jpg" alt="" width="140"></a>
</td>
<td><b>セキュリティ</b>:
<br>スパム<b>対策</b></td>
<td>スパムコメントを
<br><b>フィルタリング</b>
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/akismet/" target="_blank">Akismet Anti-Spam</a>
<br>但しPersonal（無償）版は、<br><b>商用利用禁止</b><span style="color:#e74c3c;">※</span>
<br><span style="color:#e74c3c;">※</span>、ビジネスサイト、<br>  アドセンス、アフリエイトなど
</td>
</tr>
<tr><td style="color: blue;">02</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/wordfence/" target="_blank">Wordfence <br>Security
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/Wordfence.jpg" alt="" width="140"></a>
</td>
<td><b>セキュリティ</b>:
<br>悪意の要求を
<br><b>フィルタリング</b></td>
<td>無料版でもAkismetの補完になる
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/wordfence/" target="_blank">Wordfence Security</a>
<br>効果が判明した記事.1<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/security/2316/#xss" target="_blank">Xss攻撃の実態</a>
<br>効果が判明した記事.2<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/security/186/#security" target="_blank">セキュリティ対策でわかること</a>
</td>
</tr>
<tr><td style="color: blue;">03</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/siteguard/" target="_blank">SiteGuard <br>WP Plugin
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/SiteGuard.jpg" alt="" width="140"></a>
</td>
<td><b>セキュリティ</b>:
<br>ログイン<b>保護</b></td>
<td><a rel="noopener" href="https://イイネ.biz/security/s-setup/s-plugin/318/" target="_blank">管理ページアクセス制限</a>。
<br>ログインしていない接続元から
<br>/wp-admin/を守る
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/siteguard/" target="_blank">SiteGuard WP Plugin</a>
<br><span style="color:#e74c3c;"><b>※</b></span><b>　XO Security</b>と、<br>　共に使用する場合は、
<br><b>重複</b>する機能を<b>off</b>にする
<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/plugin/318/#toc11" target="_blank">SiteGuard WP Pluginのご紹介</a>
</td>
</tr>
<tr><td style="color: blue;">04</td>
<td><a href="https://ja.wordpress.org/plugins/xo-security/">XO <br>Security
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/XO.jpg" alt="" width="140"></a>
</td>
<td><b>セキュリティ</b>:
<br><a rel="noopener" href="https://イイネ.biz/security/s-setup/s-plugin/290/" target="_blank">REST API
<br> による
<br><b>ユーザ情報</b>を<br>隠す</a>
</td>
<td>wp-jsonのプレフィックス変更
<br>(/wp-json/など)<span style="color:#e74c3c;">※03</span>
<br><a href="https://ja.wordpress.org/plugins/xo-security/">XO Security</a>
<br><span style="color:#e74c3c;"><b>※</b></span>　<b>SiteGuard WP Plugin</b>と、<br>　共に使用する場合は、
<br><b>重複</b>する機能を<b>off</b>にする
<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/plugin/290/#toc7" target="_blank">XO Securityセットアップ</a>
</td>
</tr>
<tr><td style="color: blue;">05</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/ewww-image-optimizer/" target="_blank">EWWW <br>Image <br>Optimizer
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/EWWW.jpg" alt="" width="140"></a>
</td>
<td>サイト
<span style="color:#4c6cb3;"><b>軽量化</b></span>
<br>画像劣化
<br><b>させることなく</b>
<br><b>自動</b>サイズ圧縮</td>
<td>すでにアップしている画像も一括で圧縮。
<br><a rel="noopener" href="https://イイネ.biz/site-operation/o-plugin/614/" target="_blank">次世代フォーマットWebP対応</a><span style="color:#e74c3c;">※04</span>
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/ewww-image-optimizer/" target="_blank">EWWW Image Optimizer</a>
<br>
<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/redirect/614/" target="_blank">次世代フォーマット変換＆<br>　　　スピードアップ</a>
<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/site-operation/883/" target="_blank">目的はサイトの利便性向上</a>
</td>
</tr>
<tr><td style="color: blue;">06</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/regenerate-thumbnails/" target="_blank">Regenerate <br>Thumbnails
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/Regenerate.jpg" alt="" width="140"></a>
</td>
<td>画像
<span style="color:#465daa;"><b>最適化</b></span>
<br><b>登録済の</b>
<br>サムネイル
<br>画像を一括で
<br>再生成:
<br><b>リサイズ</b>
</td>
<td>既に運用しているウェブサイトにおいて、
<br>プラグインやデザインスキン、
<br>ウィジェットを利用した場合
<br>アップロード済みの画像では
<br>最適なサイズが存在しない為、
<br>レイアウトが崩れてしまう事を防ぐ
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/regenerate-thumbnails/" target="_blank">Regenerate Thumbnails</a>
</td>
</tr>
<tr><td style="color: blue;">07</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/wp-fastest-cache/" target="_blank">WP <br>Fastest <br>Cache
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/WP_Fastest_Cache.jpg" alt="" width="140"></a>
</td>
<td>キャッシュ
<br>サイトスピード<br><b>改善</b></td>
<td>シンプルで速い
<br>WPキャッシュシステム<span style="color:#e74c3c;">※05</span>
<br>※　<b>Apacheサーバを利用している場合</b>に有効
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/wp-fastest-cache/" target="_blank">WP	Fastest	Cache</a>
</td>
</tr>
<tr><td style="color: blue;">08</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/aurora-heatmap/" target="_blank">Aurora <br>Heatmap
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/Aurora.jpg" alt="" width="140"></a>
</td>
<td>ヒートマップ
<br>アクセス
<br><b>状況把握</b></td>
<td>プラグインだけで完結する
<br>シンプルなオーロラのように美しい<br>ヒートマップ<span style="color:#e74c3c;">※06</span>
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/aurora-heatmap/" target="_blank">Aurora Heatmap</a>
</td>
</tr>
<tr><td style="color: blue;">09</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/plugin-load-filter/" target="_blank">Plugin <br>Load <br>Filter
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/12/Plugin.jpg" alt="" width="140"></a>
</td>
<td><a href="https://xn--ecka7j.biz/category/site-operation/weight-saving/" target="_blank">サイト<span style="color:#465daa;"><b>軽量化</b></span></a>
<br>プラグインを
<br><b>ページ毎</b><span style="color:#e74c3c;"><b>ON</b></span>/
<br><span style="color:#465daa;"><b>OFF</b></span>設定</td>
<td>プラグインの有効化/停止を
<br>ページごとに制御できるプラグイン<span style="color:#e74c3c;">※07</span>
<br>
<a rel="noopener" href="https://ja.wordpress.org/plugins/plugin-load-filter/" target="_blank">Plugin Load Filter</a>
<br><br>
<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/site-operation/933/" target="_blank">サイト・ページ<br>パフォーマンス向上に寄与</a>
</td>
</tr>
<tr><td style="color: blue;">10</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/wp-multibyte-patch/" target="_blank">WP <br>Multibyte <br>Patch
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/WP-Multibyte.jpg" alt="" width="140"></a>
</td>
<td><b>日本語版
<br>サイト<span style="color:#4c6cb3;">補助</span></b>
<br>ダブルバイト
<br>文字を<span style="color:#4c6cb3;"><b>補助</b></span>
<br>　DBCS <span style="color:#e74c3c;">※08</span></td>
<td>英語圏で作られた<b>WordPress</b>を
<br>日本語環境で<b>正しく動作させるために
	<br>必要となる機能</b>を網羅
<br>※　日本語版パッケージに
<br>プラグインとして<b>付属</b>してたものが、
<br>WordPress<b>5.0</b>からは、<span style="color:#e74c3c;"><b>含まれなく</b></span>
<br>なっていますので、任意で要Install。
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/wp-multibyte-patch/" target="_blank">WP Multibyte Patch</a>
</td>
</tr>

<tr><td style="color: blue;">11</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/advanced-nocaptcha-recaptcha/" target="_blank">CAPTCHA 4WP<br> – Antispam<br> CAPTCHA<br> solution<br> for<br> WordPress<br>
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/05/icon3-CAPTCHA4WP.jpg" alt="" width="140"></a>
</td>
<td><b>セキュリティ</b>:
<br>不正アクセスを
<br>AIによって
<br>見抜く
</td>
<td>GoogleのAPI（reCAPTCHA）を使用
<br>問い合わせフォームや
<br>コメント入力欄に設置することで、
<br>悪質なアクセスを防ぎ不正な
<br>ログインからあなたのサイトを守る
<br>設置にはGoogleアカウントが必要です。
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/advanced-nocaptcha-recaptcha/" target="_blank">Advanced noCaptcha &amp;
	<br> invisible Captchaより改名 </a>
<br>※.同等機能で、
<br><span style="color:#e74c3c;"><b>※.#11と#15を
<br>共にインストールしてはいけません</b></span>
<br>こらから導入する場合は、
<br>(#11)又は、#15の一方のみです。
<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/toolboox/chatgpt/7362/#reCAPTCHA_Plugin" target="_blank">GPTでも高評価</a>
</td>
</tr>

<tr><td style="color: blue;">12</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/super-progressive-web-apps/" target="_blank">Super <br>Progressive<br> Web Apps
<br><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/Super.jpg" alt="" width="140"></a>
</td>
<td><b>U</b>ser E<b>x</b>perience
<br>ユーザビリティ
<br><b>改善</b>
<br>ユーザ
<br>エンゲージメント
<br><b>向上</b>
</td>
<td>
Googleが推進している<b>PWA</b>
<br>（<b>P</b>rogressive <b>W</b>eb <b>A</b>pps）
<br><b>ごく簡単</b>に説明すると、
<br><b>Webサイト</b>を<b>アプリ化する</b>仕組みです。
<br>スマホ画面に<b>サイト</b>のアイコンを設置できます
<br>（アイコンのタップで直ぐに<b>Webサイト</b>に）
<br>モバイル向け<b>サイト</b>を<b>
	<br>スマートフォンアプリ</b>のように使えるようにする。
<br>この<b>PWA</b>を簡単にWordPressに実装するplugin
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/super-progressive-web-apps/" target="_blank">Super Progressive Web Apps</a>
</td>
</tr>

<tr><td style="color: blue;">14</td>
<td><a rel="noopener" href="https://ja.wordpress.org/plugins/google-site-kit/" target="_blank">Site kit<br>by Google</a>
<br><a rel="noopener" href="https://ja.wordpress.org/plugins/google-site-kit/" target="_blank"><img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/09/Site-kit.jpg" alt="" width="140"></a>
</td>
<td>ツール連携
<br>Googleが
<br>公式で提供
</td>
<td>
Google公式ツールと
<br>WordPressを簡単に連携できる
<br>WordPress上でアクセス解析等の閲覧
<br>1. サーチコンソールとSite Kitの連携
<br>2. アナリティクスとSite Kitの連携
<br>3. ページスピードインサイトとの連携
<br>4. アドセンスとの連携
<br>など、･･･他にも、
</td>
</tr>

<tr><td style="color: blue;">15</td>
<td>「Google Captcha
<br> (reCAPTCHA)
<br>	by BestWebSoft」
<br>	別名
<br>	「<a rel="noopener" href="https://ja.wordpress.org/plugins/google-captcha/" target="_blank"> reCaptcha
<br> by BestWebSoft</a>」
<br>	<img decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2023/05/icon2-ReallySimpleCAPTCHA.gif" alt="" width="140">
</td>
<td><b>セキュリティ</b>:
<br>不正アクセスを
<br>AIによって
<br>見抜く
</td>
<td>– Google reCAPTCHA v2とv3に対応
<br>– ログイン、登録、コメント、
<br>　お問い合わせフォームなどに適用できます。
<br>– 無料版と有料版があります。
<br>	（php8にも対応しています。）
<br>	-reCAPTCHA v2やv3だけでなく、
<br>	　noCaptchaも利用できる
<br>	※.他のセキュリティプラグインと競合する
<br>	　可能性、互換性にも注意が必要です。
<br>	　多くのテーマやプラグインとの互換性が高い。 　
<br>※.#11.同等機能で、
<br><span style="color:#e74c3c;"><b>※.#11と#15を
<br>共にインストールしてはいけません</b></span>
<br>　<i class="fas fa-space-shuttle faa-passing animated c_lime"></i>　<a href="https://xn--ecka7j.biz/toolboox/chatgpt/7362/#reCAPTCHA_Plugin" target="_blank">GPTでも高評価</a>
</td>
</tr>
</tbody>
</table></div>
</figure>




<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a href="https://xn--ecka7j.biz/toolboox/chatgpt/7362/" title="生成AI：Copilot(GPT-4)にInvisible reCAPTCHA for WordPressの代替を問う．しかも無料で" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-500x281.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-800x450.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-300x169.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-768x432.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051-160x90.png 160w, https://xn--ecka7j.biz/wp-content/uploads/2023/05/Copilot_GPT-4_ASk051.png 1200w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">生成AI：Copilot(GPT-4)にInvisible reCAPTCHA for WordPressの代替を問う．しかも無料で</div><div class="blogcard-snippet internal-blogcard-snippet">あなたは調べ物をする場合、どの様な手段で行いますか？Google検索などで様々なサイトに訪れて探すのが一般的であったかも知れません。ところが今はChatGPTに代表される便利なツールがあります。私は、改良※GPT-4の「Copilot」を使...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.07.30</div></div></div></div></a>
</div>



<p><strong><span class="bold-red">※03</span>. </strong>ログインページの変更などの機能は「<a href="https://イイネ.biz/security/s-setup/s-plugin/318/">Site Guard WP Plugin</a>」で行うため有効化しない</p>



<p><strong><span class="bold-red">※04</span>. </strong>次世代フォーマットWebPに未対応ブラウザに対しては別途<a href="https://イイネ.biz/site-operation/o-plugin/614/">.htaccessでの対応</a>が必要（php7.4からは標準でWebPを扱えるが、これも未対応ブラウザへの対応が必要）</p>



<p><strong><span class="bold-red">※05</span>.</strong> 使用テーマで実装（SNS、ウィジェット、ブログカード、AMP、各種APIのキャッシュクリア）していない部分のみ採用</p>



<p><strong><span class="bold-red">※06</span>.</strong> 無料版でもアクセス状況の把握にかなり有用</p>



<p><strong><span class="bold-red">※07</span>.</strong> 管理画面でしか使わないプラグインや問合せページでしか使わないプラグインを他のページではプラグインの読み込みを停止できる</p>



<p><strong><span class="bold-red">※08</span>.</strong> <strong>DBCS</strong> : <strong>D</strong>ouble-<strong>B</strong>yte <strong>C</strong>haracter <strong>S</strong>et － 各種（日本語以外にも有）の<strong>2 バイト文字</strong>と<br>&nbsp; &nbsp; &nbsp; &nbsp; <strong>1バイト文字</strong>（半角：<strong>SBCS</strong>：<strong>S</strong>はシングル：<strong>S</strong>ingle)の混在がある場合に対処が必要。</p>



<p class="is-style-question-box">日本語（<strong>DBCS</strong>)とアルファベット・数字・カナが<strong>半角</strong>（<strong>SBCS</strong>）混在表記で、<br>&nbsp; &nbsp; &nbsp; &nbsp;文字が<span class="bold-red">重なって表示された</span>サイトを、複数見かけています。</p>



<p><span class="badge-green">関連記事</span>　：　<strong><a href="https://xn--ecka7j.biz/site-operation/933/">特定のページでしか使わないプラグインは、特定ページ動作に限定する</strong><img decoding="async" src="/wp-content/uploads/2023/12/Plugin.jpg" alt="plugin" width="50px"></a></p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a href="https://xn--ecka7j.biz/site-operation/933/" title="軽量化：特定のページでしか使わない機能は、プラグイン読み込みを限定することで、サイト・ページパフォーマンス向上に寄与" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-500x281.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-800x450.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-300x169.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-768x432.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480-160x90.png 160w, https://xn--ecka7j.biz/wp-content/uploads/2020/08/weight-saving01-1280-720-256-480.png 1280w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">軽量化：特定のページでしか使わない機能は、プラグイン読み込みを限定することで、サイト・ページパフォーマンス向上に寄与</div><div class="blogcard-snippet internal-blogcard-snippet">たとえば、コンタクトフォーム用プラグインは問い合わせページでのみ有効化する。あなた(管理者)しか使わない管理画面用のプラグインは、Admin Pageのみで有効化する。無頓着でいると、貴重な数秒を浪費してしまう。全てのページで有効化しているのは大きな浪費✅ 塵も積もれば山となる。サイトの表示速度と利用者の離脱率には高い相関関係があります。利用者が検索などでサイトを見つけて閲覧を開始したとしても、サイトの表示速度が遅いとサイト離脱を促してしまうこともあります。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2021.04.12</div></div></div></div></a>

</div>



<p></p>



<p><span class="badge-blue">　関連記事　</span>：　<a href="https://xn--ecka7j.biz/security/s-setup/s-plugin/318/">危険！あなたのログイン画面が素で公開されています</a></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-web wp-block-embed-web"><div class="wp-block-embed__wrapper">

<a href="https://xn--ecka7j.biz/security/s-setup/s-plugin/318" title="セキュリティ：危険！あなたのログイン画面が素で公開されています" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-security-01-600-400-35-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-security-01-600-400-35-320x180.jpg 320w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-security-01-600-400-35-120x68.jpg 120w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-security-01-600-400-35-160x90.jpg 160w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">セキュリティ：危険！あなたのログイン画面が素で公開されています</div><div class="blogcard-snippet internal-blogcard-snippet">wordpress セキュリティ プラグインあなたのログイン管理画面素で公開されていませんか？いきなり管理画面が現れるのは無いと思いますが、ログイン画面が出てきませんか？セキュリティプラグインSiteGuard WP Pluginのご紹介目的は管理画面への直接アクセス防止セキュリティ対策ほか</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.09.07</div></div></div></div></a>
</div></figure>



<p>　<span class="badge-blue">関連記事</span>　：　<a href="https://xn--ecka7j.biz/security/s-setup/s-plugin/290/">あなたのホームページ危険です管理者情報が丸見えです</a>。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-web wp-block-embed-web"><div class="wp-block-embed__wrapper">

<a href="https://xn--ecka7j.biz/security/s-setup/s-plugin/290" title="セキュリティ：あなたのホームページ危険です。管理者情報が丸見えです。" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2020/03/security04-600-400-084-288-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/03/security04-600-400-084-288-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2020/03/security04-600-400-084-288-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2020/03/security04-600-400-084-288-160x90.png 160w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">セキュリティ：あなたのホームページ危険です。管理者情報が丸見えです。</div><div class="blogcard-snippet internal-blogcard-snippet">wordpress セキュリティ プラグイン管理者ユーザ情報が丸見え管理者ユーザ情報を隠す手段をお伝えします肝腎のセキュリティ対策の多くが未適用ですあなたのホームページ制作会社はこの事実を知らない事実。何も対策をしていない。これを対策する無料のプラグインXO Security簡単インストール ＆ セットアップ</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2023.10.12</div></div></div></div></a>
</div></figure>



<p><span class="badge-blue">　関連記事</span>　：<a href="https://xn--ecka7j.biz/site-operation/o-plugin/614/">画像を次世代フォーマットに変換してサイトの表示スピードアップ</a></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-web wp-block-embed-web"><div class="wp-block-embed__wrapper">

<a href="https://xn--ecka7j.biz/site-operation/o-plugin/614" title="軽量化：画像を次世代フォーマットに変換してサイトの表示スピードアップ" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-320x180.jpg 320w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-120x68.jpg 120w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-160x90.jpg 160w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">軽量化：画像を次世代フォーマットに変換してサイトの表示スピードアップ</div><div class="blogcard-snippet internal-blogcard-snippet">次世代フォーマットでの画像配信：アップロードした画像を最適なフォーマットに自動変換するプラグイン目的はユーザビリティの向上。方法はサイトの応答時間を短縮させるに必要な画像の軽量化（最適化）すること手段は次世代フォーマットでの画像の配信が出来る（PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができる）プラグインを使うこと</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.04.04</div></div></div></div></a>
</div></figure>



<p><span class="badge-pink">関連記事</span>　：　<a href="https://xn--ecka7j.biz/security/452/">実験で分かった事、テーマを隠すxxxプラグイン使ってはいけない</a></p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a href="https://xn--ecka7j.biz/security/452/" title="実験で分かった事xxxプラグインは使ってはいけない" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2020/03/plugin1-600-400-096-404-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/03/plugin1-600-400-096-404-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2020/03/plugin1-600-400-096-404-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2020/03/plugin1-600-400-096-404-160x90.png 160w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">実験で分かった事xxxプラグインは使ってはいけない</div><div class="blogcard-snippet internal-blogcard-snippet">WordPress単体では実現が困難なこと（例えば、セキュリティの確保など）、WordPress用に有用な多くのプラグインが存在します。しかし一方では導入する為に気を付けなければならないことも多くあります。一番肝心なことは、目的だけを注力してプラグインを採用してはいけないことです。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2023.08.31</div></div></div></div></a>

</div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none is-style-text">

<a href="https://xn--ecka7j.biz/security/s-setup/s-plugin/1334/" title="セキュリティ：WordPressプラグイン#13アンチスパム" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-320x180.jpg 320w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-500x281.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-800x450.jpg 800w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-300x169.jpg 300w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-768x432.jpg 768w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-120x68.jpg 120w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57-160x90.jpg 160w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-reCaptcha-1024-576-57.jpg 1024w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">セキュリティ：WordPressプラグイン#13アンチスパム</div><div class="blogcard-snippet internal-blogcard-snippet">プラグインをPHP8.1.22環境で使用すると、以下の2つの不具合が発生します。設定画面の不具合設定画面のメニューがすべて「設定」と表示され、reCaptchaの設定画面が表示されないフォーム送信時に「An error has occurred. Please try again later.」などのエラーが表示される　これらの不具合は、プラグインがPHP8.1で導入された新しい構文に対応していないことが原因です。本プラグインは2020年12月に最終更新されており、PHP8.0以降のバージョンでは動作保証されていません。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.09.07</div></div></div></div></a>

</div>



<h3 class="wp-block-heading"><span id="toc9">選外とその理由</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="450" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-800x450.png" alt="plugin" class="wp-image-907" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-800x450.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-500x281.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-300x169.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-768x432.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-160x90.png 160w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/select01ng-1280-720-192-724.png 1280w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">除外された</figcaption></figure>



<p>※除外の１番の理由は、<span class="bold-red">長期に渡ってメンテナンスされていない</span>プラグイン</p>



<p class="is-style-ng-box">開発チームが既に解散している等で、セキュリティ面での脆弱性を抱えているかも知れない。また、最新のWordPressに対応できない(古いバージョンのphpなどで開発されているかも知れない)<span class="red">最終更新日が１年以上前</span>のもの</p>



<h4 class="wp-block-heading"><span id="toc10">以下のプラグインは一例</span></h4>



<ul class="wp-block-list">
<li><strong>コンタクトフォーム</strong>（問い合わせ）</li>
</ul>



<p><strong><span class="bold-red">Contact Form 7</span></strong>:問合せフォーム作成のための、日本発の有用な定番プラグイン　</p>



<p>　有効インストール数: 5百万以上ではあるが、</p>



<p class="is-style-memo-box">　筆者のサイトは別の<a href="https://a-itc.info/contact">CMS(<span class="bold-blue">concrete5</span>)で制作した問合せフォーム</a>を利用するため不採用</p>



<hr>



<ul class="wp-block-list">
<li><strong>画像遅延読み込み</strong>（Lazy Load）<strong><sup><span class="bold-red">※01.</span></sup></strong></li>
</ul>



<p><strong><span class="bold-red">SG Optimizer</span></strong>:有効インストール数: 90万以上</p>



<p>　<span class="bold-blue">WordPress 5.5で<strong>Lazy Load</strong>は、ネイティブサポートされる。</span></p>



<p class="is-style-good-box">筆者のサイトでは既にテーマ（<strong><span class="marker-under-blue">Cocoon</span></strong>）でサポートされているため不採用。</p>



<hr>



<ul class="wp-block-list">
<li><strong>XML サイトマップ</strong>作成<strong><sup><span class="bold-red">※01.</span></sup></strong></li>
</ul>



<p><strong><span class="bold-red">Google XML Sitemaps</span></strong>:有効インストール数: 2百万以上</p>



<p>　<span class="bold-blue">WordPress<strong> 5.5</strong>でXML Sitemapは、ネイティブサポートされる。</span></p>



<p class="is-style-question-box">　但し、最終更新日は出力されない</p>



<p class="is-style-memo-box">筆者のサイトではプラグインに頼らない運用のため不採用。</p>



<hr>



<ul class="wp-block-list">
<li><strong>Html </strong><strong>サイトマップ</strong>作成</li>
</ul>



<p><strong><span class="bold-red">PS Auto Sitemap</span></strong>:有効インストール数: 20万以上であるが、</p>



<p>　　<strong><span class="bold-red">最終更新が5年前</span></strong>であり、開発チームが解散している可能性もある。<br>　　<span class="bold-red">脆弱性</span>の懸念も！（更に、<strong>WordPress 4.2.28</strong>までしか対応していない。）<br><br>　　（にもかかわらず、20/10/31時点でも<span class="marker-under">このプラグインを使用しているサイトが以外にも多い</span><br>　　　(Cocoonフォーラムに寄せられた質問での<strong>使用プラグイン状況から</strong>判明)！<br>　　　<strong>セキュリティに無関心</strong>か？<br>　　　多くのサイトが<strong>プラグイン導入時のまま放置</strong>(更新の重要性を意識していない)）</p>



<p class="is-style-ok-box">　必要であれば。テーマ<span class="bold-blue">Cocoon</span>の機能で<strong>出力</strong>ができる。</p>



<a href="https://xn--ecka7j.biz/sitemap/">Cocoonで出力されたhtmlサイトマップ</a>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none is-style-text">

<a href="https://xn--ecka7j.biz/sitemap/" title="サイトマップ" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/2022/01/website1280-720-280-160x90.jpg" alt="" class=" internal-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">サイトマップ</div><div class="blogcard-snippet internal-blogcard-snippet"></div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.08.14</div></div></div></div></a>

</div>



<hr>



<ul class="wp-block-list">
<li><strong>HTML</strong>/<strong>CSS</strong>/<strong>JavaScrip</strong>t等の<strong>縮小化<sup><span class="bold-red">※02</span>.</sup></strong></li>
</ul>



<p><strong><span class="bold-red">Autoptimize</span></strong>:有効インストール数: 2百万以上ではあるが、</p>



<p class="is-style-good-box">筆者のサイトでは既にテーマ（<span class="marker-under-blue"><strong>Cocoon</strong></span>）でサポートされているため不採用。</p>



<hr>



<ul class="wp-block-list">
<li><strong>SEO内部対策<sup><span class="bold-red">※02</span>.</sup></strong></li>
</ul>



<p><strong><span class="bold-red">All In One SEO Pack</span></strong>:有効インストール数: 2百万以上で定番とも呼ばれているが、</p>



<p>テーマ(<strong><a href="https://wp-cocoon.com/">Coconn</a></strong>,<strong>STINGER</strong>や<strong>BBSシリーズ</strong>)により実装（<strong>title,description</strong>）されている場合もあり、導入するプラグインを減少させるためには不向き。</p>



<p class="is-style-good-box">さらに<strong><span class="marker-under-blue">Cocoon</span></strong>では、<strong><span class="bold-blue">ページ</span></strong>のみならず、<strong><span class="bold-blue">コンテンツ</span></strong>(各記事)や<strong><span class="bold-blue">カテゴリ</span></strong>、<strong><span class="bold-blue">タグ</span></strong>、<strong>画像</strong>にまで<strong>title</strong>や<strong>description</strong>を記載できる。</p>



<hr>



<ul class="wp-block-list">
<li><strong>エディタ拡張<sup><span class="bold-red">※02.</span></sup></strong></li>
</ul>



<p><strong><span class="bold-red">TinyMCE Advanced</span></strong>:有効インストール数: 2百万以上でビジュアルエディタの機能を拡張することができるプラグイン（表の挿入、または編集、YouTube 動画コードの挿入、画像の回りに余白を挿入など）がある。（<span class="bold-red">Advanced Editor Tools</span> (previously <strong>TinyMCE Advanced</strong>)）</p>



<p class="is-style-good-box"><strong><a href="https://wp-cocoon.com/">Cocoon</a></strong>で<strong>拡張されたブロックエディタ</strong>が充分な機能を持つため不採用。</p>



<hr>



<p class="is-style-bad-box">　<strong>番外編</strong>（不採用）</p>



<ul class="wp-block-list">
<li><strong>記事投稿支援</strong></li>
</ul>



<p><strong><span class="bold-red">WordPress Ping Optimizer</span></strong> :有効インストール数: 10万以上</p>



<p>Ping送信の<strong>有用性</strong>を感じないため<br></p>



<hr>



<p><strong><span class="bold-red">Tablepress</span></strong> : 有効インストール数: 80万以上</p>



<p>コードを書く必要なしに、美しく機能豊富な<strong>テーブル</strong>を作成するプラグイン<br>（これもCocoonの機能で補完できるし、多少のcssの理解があればより十分なレイアウトができる。この記事で記載しているテーブルも！）<br></p>



<hr>



<p><strong><span class="bold-red">WebSub/PubSubHubbub</span></strong>　：　有効インストール数: 10万以上</p>



<p>検索エンジンに更新したページを認識させる<br>（これもXMLサイトマップと、サーチコンソールを有効に使用することで不要）<br></p>



<hr>



<p><strong><span class="bold-red">Jetpack by WordPress.com</span></strong>　：　有効インストール数: 5百万以上</p>



<p>サイトセキュリティプラグインであるが、過去に<strong>何度も<span class="bold-red">脆弱性</span>を指摘</strong>された</p>



<p>　無償版でも、ダウンタイムのモニター。総当たり攻撃からの保護。基本アクティビティログ。無制限の画像 CDN（コンテンツデリバリーネットワーク：単にファイル（画像やZIPファイル等）をダウンロード配信するための技術）。画像の遅延読み込み。サイト統計情報。自動ソーシャルメディア投稿、があるがセキュリティは限界か？</p>



<hr>



<ul class="wp-block-list">
<li><strong>開発後の運用引き渡し用</strong></li>
</ul>



<p>サイトをクライアントに<strong>納品する際</strong>に、ダッシュボード内の不必要なメニューを非表示にする。</p>



<p>表示順を変更する。などを「functions.php」を編集することなく、管理画面の整理・調整が可能。<strong>管理画面のカスタマイズ</strong>プラグイン</p>



<p><strong><span class="bold-red">Admin</span> <span class="bold-red">Menu Editor</span></strong>　：　有効インストール数: 30万以上</p>



<p><strong><span class="bold-red">Adminimize</span></strong>　：　有効インストール数: 20万以上</p>



<h2 class="wp-block-heading"><span id="toc11">まとめ</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="450" src="https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-800x450.png" alt="Plugin" class="wp-image-1402" srcset="https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-800x450.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-500x281.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-300x169.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-768x432.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-160x90.png 160w, https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2021/03/plugin-1280-720-100-420-0371.png 1280w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">WordPress プラグイン</figcaption></figure>



<p>　WordPressのために開発されたプラグインは多種多様・玉石混交を極めるが、目的をもって必要最低限の採用（導入）をお薦めします。</p>



<p>必要としなくなった、または使用していないプラグインは無効化するだけでなく、削除をお薦めします。</p>



<p>長い間メンテナンスされていないプラグインがあった場合、無効化しているだけではセキュリティ的に不十分だからです。</p>



<p>また、定期的に導入しているプラグインを見直すことも必要です。</p>



<p>&#x2705; メンテナンスされなくなったものは無いか？</p>



<p>&#x2705; WordPressのバージョンアップと共に、対応していないプラグインは無いか？</p>



<p>など、</p>



<p>ウェブサイトはメンテナンスが必要不可欠です。</p>



<h2 class="wp-block-heading"><span id="toc12">使っちゃいけないプラグイン</span></h2>



<div class="wp-block-group is-style-bad-box is-layout-flow wp-block-group-is-layout-flow">
<p>反対に、使ってはいけない（潜在脅威を含む）プラグインはこちら</p>
</div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a href="https://xn--ecka7j.biz/version-upgrade/vup-plugin/1242/" title="使っちゃいけないプラグイン 191本 [発見次第更新]使ってはいけないWordPress Plugin &#x27a1;&#xfe0f;解除も！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-320x180.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-320x180.png 320w, https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-500x281.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-800x450.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-300x169.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-768x432.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-120x68.png 120w, https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin-160x90.png 160w, https://xn--ecka7j.biz/wp-content/uploads/2025/08/WordPress-Plugin.png 900w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">使っちゃいけないプラグイン 191本 [発見次第更新]使ってはいけないWordPress Plugin &#x27a1;&#xfe0f;解除も！</div><div class="blogcard-snippet internal-blogcard-snippet">サイト攻撃の約６割がプラグイン起因。セキュリティ問題で停止されたもの。３年以上メンテナンスされず導入注意なもの。フォーラムや他サイトで見かけた➡その数なんと191本を「使ってはいけないプラグイン」として上げます。 理由は、開発チームが解散し新たに脆弱性が見つかっても対応が困難と思われるから。wordpress.orgのサイトでも&quot;このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.02.05</div></div></div></div></a>
</div>



<h4 class="wp-block-heading"><span id="toc13">使っちゃいけないプラグイン（更新）2023</span></h4>



<!-- Block.06 -->
<div class="ogpCard_root">
<article class="ogpCard_wrap" style="display:inline-block;max-width:100%" contenteditable="false">
<a class="ogpCard_link" data-ogp-card-log="" href="https://xn--ecka7j.biz/version-upgrade/vup-plugin/1242/" style="display:flex;justify-content:space-between;overflow:hidden;box-sizing:border-box;width:780px;max-width:100%;height:260px;border:1px solid #e2e2e2;border-radius:4px;background-color:#fff;text-decoration:none" target="_blank">
<span class="ogpCard_imageWrap" style="position:relative;width:240px;height:120px;flex-shrink:0">
<img decoding="async" alt="" class="ogpCard_image" data-ogp-card-image="" loading="lazy" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/woordpress-1024-576-136.jpg" style="position:absolute;top:50%;left:50%;object-fit:cover;min-height:100%;min-width:100%;transform:translate(-50%,-50%)" width="240" height="135">
</span>		
<span class="ogpCard_content" style="display:flex;flex-direction:column;overflow:hidden;width:100%;padding:16px">
<span class="ogpCard_title" style="-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;max-height:48px;line-height:1.4;font-size:16px;color:#333;text-align:left;font-weight:bold;overflow:hidden">WordPressで使っちゃいけないプラグイン</span>
<span class="ogpCard_description" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6;margin-top:4px;color:#757575;text-align:left;font-size:14px">ワードプレスで使ってはいけないプラグイン：<br>３年以上メンテナンスされていないプラグインで<br>導入に注意が必要なもの、<br>他のサイトや、フォーラムで見かけた、いくつかのプラグインを<br>「<b>	使っちゃいけないプラグイン</b>」として上げてみます。 <br>理由は、<br>メンテナンスされていないものは、開発チームが解散して<br>新たに脆弱性が見つかっても対応が困難と思われるから。</span>
<span class="ogpCard_urlText" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#757575;font-size:12px;text-align:left">xn--ecka7j.biz</span>
</span></a>
<blockquote>”このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。<br>もうメンテナンスやサポートがされていないかもしれず、<br>最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。”</blockquote>
<p>　　　<cite><a rel="noopener" href="https://ja.wordpress.org/plugins/" target="_blank">WordPress.org</a></cite>でも上記の様に説明されてます。</p>
</article>
</div>



<!-- Block.07 -->
<div class="background_custom9 pt_x">
<div class="Background_Text7"><p class="ta_c fs_j045">WordPress<br>あなたにオススメ プラグイン</p></div>
<div class="main_wrapper_sj">
<div class="sphere_wrapper_sjl-"><!-- _sjl- -3d回転無効化 -->
<i class="bi bi-wordpress fa fa-10x"></i>
</div>
<div>　</div>
<div class="sphere_wrapper_sjr-"><!-- _sjr- -3d回転無効化 -->
<p class="fc_x"><i class="bi bi-plugin fa fa-10x fa-spin"></i></p>
</div>
</div>
<div class="Background_Text17"><p class="ta_c fs_j036">WordPress Plugin</p></div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>軽量化：次世代フォーマットでの画像配信:目的はウェブサイトの利便性向上</title>
		<link>https://xn--ecka7j.biz/site-operation/883/</link>
		
		<dc:creator><![CDATA[Jun-N]]></dc:creator>
		<pubDate>Fri, 24 Jul 2020 01:13:25 +0000</pubDate>
				<category><![CDATA[ウェブサイトの軽量化]]></category>
		<category><![CDATA[サイト運営]]></category>
		<category><![CDATA[次世代フォーマット]]></category>
		<category><![CDATA[画像最適化]]></category>
		<category><![CDATA[表示スピードアップ]]></category>
		<guid isPermaLink="false">https://xn--ecka7j.biz/?p=883</guid>

					<description><![CDATA[次世代フォーマット!? ウェブサイトの表示が、遅いと感じたときは、無償のグーグルのスピードテスト※01を試してみるのは如何でしょうか？ ウェブサイトの表示遅延は、「致命的と言っていい程の問題です。」 目的は、ウェブサイト [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><strong>次世代フォーマット!?</strong></p>



<p>ウェブサイトの表示が、遅いと感じたときは、無償の<strong>グーグルのスピードテスト<sup><span class="bold-red">※01</span></sup></strong>を試してみるのは如何でしょうか？</p>



<p>ウェブサイトの表示遅延は、「致命的と言っていい程の問題です。」</p>



<p><strong>目的は、ウェブサイトの利便性の向上「画像を次世代フォーマットに変換してサイトの表示スピードアップ」</strong></p>




  <div id="toc" class="toc tnt-none toc-center tnt-none border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ul class="toc-list open"><li><a href="#toc1" tabindex="0">ウェブページの問題</a><ul><li><a href="#toc2" tabindex="0">画像（写真）の重要性について</a></li><li><a href="#toc3" tabindex="0">ウェブサイトの目的</a></li><li><a href="#toc4" tabindex="0">目的を達成するために</a><ul><li><a href="#toc5" tabindex="0">コンテンツの条件</a></li><li><a href="#toc6" tabindex="0">「ドリルが欲しいのではない」</a></li><li><a href="#toc7" tabindex="0">ユーザビリティの提供</a></li><li><a href="#toc8" tabindex="0">訪問者の目的に適うもの</a></li></ul></li><li><a href="#toc9" tabindex="0">「注釈」※01. Page Speed Insights</a></li><li><a href="#toc10" tabindex="0">次世代フォーマット</a><ul><li><a href="#toc11" tabindex="0">php7.4でWebP※02をサポートを開始</a></li><li><a href="#toc12" tabindex="0">主要ブラウザのWebP※02対応状況&nbsp;</a></li><li><a href="#toc13" tabindex="0">主要ブラウザのバージョンとWebP※02対応状況まとめ</a></li><li><a href="#toc14" tabindex="0">日本で使用される主要ウェブ・ブラウザ</a></li><li><a href="#toc15" tabindex="0">日本のスマホシェア</a></li><li><a href="#toc16" tabindex="0">スマホ対応が必要（スマホ対応は必須）</a></li><li><a href="#toc17" tabindex="0">WebP※02に対応していないブラウザへの対応</a></li></ul></li></ul></li></ul>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">ウェブページの問題</span></h2>



<p>ウェブページ（ウェブサイト）の切り替えやページの表示の問題</p>



<p>「<strong>ウェブサイトの閲覧に3秒以上かかる場合、<span class="bold-red">モバイルユーザの53%はサイトから離脱</span>する</strong>」</p>



<p>と<strong>Googleが発表</strong>しています。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="533" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/gen2format-960-640-224-1160-800x533.png" alt="The next generation format" class="wp-image-881" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/gen2format-960-640-224-1160-800x533.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/gen2format-960-640-224-1160-500x333.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/gen2format-960-640-224-1160-300x200.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/gen2format-960-640-224-1160-768x512.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/gen2format-960-640-224-1160.png 960w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">次世代フォーマット</figcaption></figure>



<p>モバイルユーザ（スマホでのインターネット利用者）を無視できないのは、もはやネットの主役がパソコンではなくスマホだからです。</p>



<p>（パソコン用に作られたサイトでは、パソコンに比べ非力な<strong>スマホでは遅くなったり</strong>します）</p>



<p>　　関連記事&#x27a1;「目的を達成するためには、ホームページが利用されること」</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" href="https://a-itc.info/blog/website20191208" title="役に立つホームページに必要なこと。検索で注目をされること" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/55f50f7b64ec211db8961cce79fb3aba.gif" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">役に立つホームページに必要なこと。検索で注目をされること</div><div class="blogcard-snippet external-blogcard-snippet">役に立つホームページに必要なことは検索で注目をされること。これは、ホームページが利用され・目的を達成するために必要なことと同義ですが、まず最初に検索で目立つこと、その為に必要なことはマーケティング視点であなたのお客様になってくれるかも知れな...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://a-itc.info/blog/website20191208" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a>







</div>



<p>表示速度を遅くする大きな原因としてページで使われている<strong>画像容量が大きい</strong>・枚数が多すぎることで読込が遅くなってしまうことは容易に想像ができると思います。</p>



<p>それなら、画像の枚数を減らすのも一つの手段ではあります。</p>



<p>&#x2705; 文字を画像で表示</p>



<p>&#x2705; 背景の装飾に大きな画像を使用</p>



<p>&#x2705; 過剰な装飾のある画像は避ける</p>



<p>など、時間がかかりそうなコンテンツは画像以外の手段で表現できないか？を検討する。</p>



<p>しかし、文字よりも<strong>画像の方が</strong>伝えやすい。</p>



<p>ECサイト（物販サイト）の様に画像が有ってこそのサイトもあります。</p>



<p>物販サイトでなくても、<strong>画像は情報を伝える最も有効な手段の一つ</strong>です。</p>



<h3 class="wp-block-heading"><span id="toc2">画像（写真）の重要性について</span></h3>



<p>その、画像を少なくすることは得策とは言えません。</p>



<p>「現在人間が注意力を持続できる時間は<strong>８秒</strong>しかない」</p>



<p>「ウェブサイトの目的を達成させるために大事になってくる<strong>視覚効果</strong>の一つとして、<strong>適切な画像</strong>選定があります」</p>



<p>「ウェブサイトにおいて<strong>写真など</strong>の視覚的要素は<strong>必要不可欠</strong>です。」</p>



<p>「欲しいコンテンツにきちんと<strong>誘導できるかのカギを握る</strong>と言ってもいいほど、画像はかなり影響力のあるものに値する」</p>



<p>例えば、Googleの検索エンジンから調べ物をしようとした時、その<strong>目的がテキスト情報だったとしても</strong>、結果として画像が出てきた時にはTOPの項目ではなくその<strong>画像情報に目が行き</strong>ます！</p>



<p>「ウェブサイトには、当たり前のように画像や動画が使われていますが、それらの<strong>重要性</strong>を気にかけたことはありますか？」</p>



<p>「画像や動画なんて、あってもなくても同じじゃないの？」と思っているのなら、本来獲得できていた訪問者をこれからも<strong>失い続ける</strong>かもしれません。</p>



<h3 class="wp-block-heading"><span id="toc3">ウェブサイトの目的</span></h3>



<p>あらゆるウェブサイトの<strong>目的は集客</strong>です。</p>



<h3 class="wp-block-heading"><span id="toc4">目的を達成するために</span></h3>



<p>目的を達成するために必要なこと</p>



<p><strong>探しやすく</strong>・<strong>使い易く</strong>・<strong>分かりやすく</strong>・<strong>見つけやすく</strong>するための、コンテンツの提供</p>



<p>　　関連記事&#x27a1;「あなたのホームページGoogleに見つけてもらう・見つけてもらってる？」</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" href="https://a-itc.info/blog/google-190612" title="Googleに見つけてもらう？あなたのホームページ" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/0a50c1d01ca27242382e8a696daff070.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Googleに見つけてもらう？あなたのホームページ</div><div class="blogcard-snippet external-blogcard-snippet">あなたのホームページは、Webの世界で有効か？　あなたのコンテンツページは、Googleで認識されて（見つけてもらって）いるか？　あなたのホームページが、Webの中に存在しているだけなら、ウェブの利用者（検索者）にとっては「存在していないの...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://a-itc.info/blog/google-190612" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a>







</div>



<p>　　関連記事&#x27a1;「ウェブサイトの姿」</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" href="https://a-itc.info/portfolio/project-title" title="ホームページのあるべき姿スマホ対応は必須です。横浜スマホ最適　" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/99c2a0b0fc3356fdbe750e774083a51a.jpeg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">ホームページのあるべき姿スマホ対応は必須です。横浜スマホ最適　</div><div class="blogcard-snippet external-blogcard-snippet">あなた以上にあなたのサービスを知る人はいません。あなたのビジネスホームページのご支援を横浜からどの様に実現できるかを記載しています。ウェブサイトはお客様のために見やすく使いやすくお客様の目的が探しやすいものでなければなりません。その為に店舗...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://a-itc.info/portfolio/project-title" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a>







</div>



<p><strong>ウェブサイトの利便性の向上が必要となります。</strong></p>



<h4 class="wp-block-heading"><span id="toc5">コンテンツの条件</span></h4>



<p>コンテンツの内容は商品やサービスを紹介することですが、</p>



<p>商品やサービスを<span class="red">説明すること</span>が<strong>主ではありません</strong>。</p>



<p>商品やサービス使うことで、得られる<strong>メリット</strong>や<strong>ベネフィット</strong>を<strong>伝える</strong>のです。</p>



<h4 class="wp-block-heading"><span id="toc6">「ドリルが欲しいのではない」</span></h4>



<p>　　関連記事&#x27a1;「検索が絶大あなたのホームページにもたらす影響」</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" href="https://a-itc.info/blog/natural_language_search" title="検索が絶大ホームページにもたらす影響ｰ横浜スマホ最適サイト" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/63770fd3f0a4e065e65a4a0127950b07.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">検索が絶大ホームページにもたらす影響ｰ横浜スマホ最適サイト</div><div class="blogcard-snippet external-blogcard-snippet">検索はすでに自然言語に近い形で行われています。地域での検索はスマホのＧＰＳが自動的に選びます。必要なのはあなたのホームページに検索にマッチした内容があることです。スマホ最適化ホームページ制作であなたのビジネスのキーワードをセールスライティン...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://a-itc.info/blog/natural_language_search" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a>







</div>



<p>　　関連記事&#x27a1;「HP持っている人こっちコッチできるマーケティング」</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" href="https://a-itc.info/blog/web-20180922" title="HP自分でできるマーケティングCMS横浜スマホ最適サイト" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/2fa93fcfa98967c6c545ffb4a808f759.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">HP自分でできるマーケティングCMS横浜スマホ最適サイト</div><div class="blogcard-snippet external-blogcard-snippet">あなたがビジネスオーナーなら、10分時間をください。あなたのホームページはあなたのビジネスの役に立っているでしょうか？「ホームページは名刺代わり」「ホームページを作ったときは期待したが今はあるだけの存在で放置」とは、よくお聞きすることです。...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://a-itc.info/blog/web-20180922" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a>







</div>



<p><strong>あなたの商品やサービスを使うことによって得られる良い未来を想像してもらうのです。</strong></p>



<p>文書だけでは伝わらない、伝えにくいイメージを<strong>画像で伝える</strong>のです。</p>



<h4 class="wp-block-heading"><span id="toc7">ユーザビリティの提供</span></h4>



<p>コンテンツを伝える上で重要なのが画像です。</p>



<p>華美で重厚な画像が必要な訳ではありません</p>



<p>（綺麗な画像や重厚な画像はそれだけで<strong>サイトの表示が重くなり利便性を損ない</strong>ます）</p>



<p>適度な、利用者にとって使い勝手が良く・分かりやすい画像が必要です。</p>



<p>（綺麗な画像を見たくてウェブサイトに訪問している訳ではないのです）</p>



<p>綺麗な画像を表示するために処理が<strong>重くなってしまっては本末転倒</strong>です。</p>



<h4 class="wp-block-heading"><span id="toc8">訪問者の目的に適うもの</span></h4>



<p>訪問者の目的に適うもの表示速度を落とすことなく快適にウェブサイト内が閲覧できること</p>



<p>&#x2705; 探しやすく</p>



<p>&#x2705; 使い易く</p>



<p>&#x2705; 分かりやすく</p>



<p>&#x2705; 目的のものが見つけやすいサイト</p>



<p>「<strong>ユーザビリティ</strong>」の提供が必要です。</p>



<h3 class="wp-block-heading"><span id="toc9">「注釈」※01. Page Speed Insights</span></h3>



<p><strong>&nbsp;Google Search Consol</strong>eから <strong>Page Speed Insights</strong>で<strong>ウェブサイトのスピードを計測</strong></p>




<a rel="noopener" href="https://developers.google.com/speed/pagespeed/insights/" title="PageSpeed Insights" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fdevelopers.google.com%2Fspeed%2Fpagespeed%2Finsights%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">PageSpeed Insights</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://developers.google.com/speed/pagespeed/insights/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">developers.google.com</div></div></div></div></a>



<p>した際「<strong>改善できる項目</strong>」に「<strong>次世代フォーマットでの画像の配信</strong>」と表示されることがあります。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="768" height="622" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/GooglePageSpeedInsights-768-622-056-116.png" alt="PageSpeed Insights" class="wp-image-872" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/GooglePageSpeedInsights-768-622-056-116.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/GooglePageSpeedInsights-768-622-056-116-500x405.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/GooglePageSpeedInsights-768-622-056-116-300x243.png 300w" sizes="(max-width: 768px) 100vw, 768px" /><figcaption class="wp-element-caption">次世代画像フォーマット</figcaption></figure>



<p>ここから、<strong>改善要</strong>素を把握できます。</p>



<p><strong><span class="bold-blue">Page Speed Insights</span></strong>では表示速度を改善するために「<strong>次世代フォーマットでの画像配信</strong>」を推奨しています。</p>



<h3 class="wp-block-heading"><span id="toc10">次世代フォーマット</span></h3>



<p><a>次世代の画像フォーマット</a>の１つ<strong>WebP<sup><span class="bold-red">※02</span></sup></strong>でサイト表示速度の改善</p>



<h4 class="wp-block-heading"><span id="toc11">php7.4でWebP※02をサポートを開始</span></h4>



<p>しかし、ウェブサイトの情報を処理する言語(<a href="https://ja.wikipedia.org/wiki/PHP_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)">php</a>)をただ、バージョンアップして<strong>7.4</strong>にするだけでは意味がありません。</p>



<p>それまでに、アップしていた画像は、元のままの重たい画像です。</p>



<p>しかも<strong>WebP<sup><span class="bold-red">※02</span></sup></strong>に対応していない<strong>ウェブ・ブラウザ</strong>もありますからその為の対応も必要です。</p>



<p>対応の詳細は、別の記事に譲ります　&#x27a1;</p>



<p>　「WebP<strong><sup><span class="bold-red">※02</span></sup></strong>化の目的は<strong>ユーザビリティの向上</strong>」</p>



<p>　関連記事&#x27a1;「<a>画像を次世代フォーマットに変換してサイトの表示スピードアップ</a> <strong>※Lazy Loadの扱いについても注意が必要です。（以下の記事に注意書きがあります。）</strong>」</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-web wp-block-embed-web"><div class="wp-block-embed__wrapper">

<a href="https://xn--ecka7j.biz/site-operation/o-plugin/614" title="軽量化：画像を次世代フォーマットに変換してサイトの表示スピードアップ" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-320x180.jpg 320w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-120x68.jpg 120w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-160x90.jpg 160w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">軽量化：画像を次世代フォーマットに変換してサイトの表示スピードアップ</div><div class="blogcard-snippet internal-blogcard-snippet">次世代フォーマットでの画像配信：アップロードした画像を最適なフォーマットに自動変換するプラグイン目的はユーザビリティの向上。方法はサイトの応答時間を短縮させるに必要な画像の軽量化（最適化）すること手段は次世代フォーマットでの画像の配信が出来る（PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができる）プラグインを使うこと</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.04.04</div></div></div></div></a>
</div></figure>



<p>PHP <strong>7.4</strong> は現在公式にサポートされているPHPの最新バージョンです。<br>PHP <strong>7.3</strong> 以前よりも高速な処理を実現するとともに、<br>安定した動作が可能となるよう、機能追加や最適化が施されています。<br>また、PHPの<strong>GD<sup><span class="bold-red">※03</span></sup></strong>モジュールにおいて、<a><strong>WebP</strong></a><strong><sup><span class="bold-red">※02</span></sup></strong>形式の画像に対応しました。<br>今後はWordPressなどのPHPプログラムから<strong>WebP<sup><span class="bold-red">※02</span></sup>形式</strong>の画像を直接扱うことが<strong>可能<sup>※0<span class="bold-red">4</span></sup></strong>です。<br><br></p>



<p>「注釈」<strong><sup><span class="bold-red">※02</span></sup></strong>　<strong>WebP</strong>（ウェッピー）とは、<strong>Google</strong>が開発した、静止画の<strong>画像形式</strong>です。</p>



<p>　<strong>PNG(<span class="bold-blue">.png</span>)</strong>や<strong>JPEG(<span class="bold-blue">.jpg</span>)、GIF(<span class="bold-blue">.gif</span>)</strong>などの従来の<strong>画像形式</strong>と比較し、画質はそのまま、ファイルサイズをより軽量化（データ容量の圧縮率が高いというメリットがあるため、高速化に寄与）できる特徴があります。</p>



<p>　<strong>WebP</strong><strong><sup>※02</sup></strong><strong>形式</strong>の画像を使用することで、より高速なウェブサイトの運営が可能です。</p>



<p>オープンな画像フォーマット。ファイル拡張子(<strong>.webp)</strong>Googleが使用を推奨。</p>



<p>可逆圧縮ならPNG画像と比べてサイズが<strong>26％</strong>小さくなり、非可逆圧縮ならJPG画像より<strong>25〜34％</strong>小さくなり、<a>JPG / PNG / GIF</a> (アニメーション含む)に対しての代替となります。</p>



<p>「注釈」<strong><sup><span class="bold-red">※03&nbsp; </span></sup>GD</strong>（画像処理・画像変換）<strong><span class="bold-blue">G</span></strong>raphics <strong><span class="bold-blue">D</span></strong>raw：グラフィックを描く<br><br></p>



<h4 class="wp-block-heading"><span id="toc12">主要ブラウザのWebP※02対応状況&nbsp;</span></h4>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="478" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/webp-999-597-068-240-800x478.png" alt="WebP" class="wp-image-869" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/webp-999-597-068-240-800x478.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/webp-999-597-068-240-500x299.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/webp-999-597-068-240-300x179.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/webp-999-597-068-240-768x459.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/webp-999-597-068-240.png 999w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">WebP対応状況と今後</figcaption></figure>



<p>（出典：<a href="https://caniuse.com/#search=WebP">https://caniuse.com/#search=WebP</a>）</p>



<p>iOSは、2020/07/23現在<span class="bold-red">13.6</span>です。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="271" height="137" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/webp-271-137-004-008.png" alt="IOS対応" class="wp-image-868"/><figcaption class="wp-element-caption">WebP対応IOS<strong> 14.0</strong>で？</figcaption></figure>



<p>SafariとChromeのiOS<strong>14.0</strong>版で、</p>



<p>WebP<strong><sup><span class="bold-red">※02</span></sup></strong>対応(出典：<a href="https://caniuse.com/#search=WebP">https://caniuse.com/#search=WebP</a>)とされていますが時期は未定です。</p>



<h4 class="wp-block-heading"><span id="toc13">主要ブラウザのバージョンとWebP※02対応状況まとめ</span></h4>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="768" height="317" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-768-317-036-120.png" alt="WebP非対応ブラウザ" class="wp-image-870" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-768-317-036-120.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-768-317-036-120-500x206.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-768-317-036-120-300x124.png 300w" sizes="(max-width: 768px) 100vw, 768px" /><figcaption class="wp-element-caption">WebP非対応ブラウザへの対応必須</figcaption></figure>



<h4 class="wp-block-heading"><span id="toc14">日本で使用される主要ウェブ・ブラウザ</span></h4>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="493" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-japan-999-616-048-140-800x493.png" alt="ブラウザ" class="wp-image-866" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-japan-999-616-048-140-800x493.png 800w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-japan-999-616-048-140-500x308.png 500w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-japan-999-616-048-140-300x185.png 300w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-japan-999-616-048-140-768x474.png 768w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-japan-999-616-048-140.png 999w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">ブラウザごと非対応WebPへの</figcaption></figure>



<p>上記棒グラフを表形式に変換してまとめてみました。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="415" height="395" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-j-415-395-032-124.png" alt="browser" class="wp-image-865" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-j-415-395-032-124.png 415w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/browser-j-415-395-032-124-300x286.png 300w" sizes="(max-width: 415px) 100vw, 415px" /><figcaption class="wp-element-caption">ブラウザシェア</figcaption></figure>



<h4 class="wp-block-heading"><span id="toc15">日本のスマホシェア</span></h4>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="415" height="389" src="https://xn--ecka7j.biz/wp-content/uploads/2020/07/smartphone-j-415-389-032-136.png" alt="smartphone" class="wp-image-867" srcset="https://xn--ecka7j.biz/wp-content/uploads/2020/07/smartphone-j-415-389-032-136.png 415w, https://xn--ecka7j.biz/wp-content/uploads/2020/07/smartphone-j-415-389-032-136-300x281.png 300w" sizes="(max-width: 415px) 100vw, 415px" /><figcaption class="wp-element-caption">スマホブラウザでのWebP非対応への必要性</figcaption></figure>



<h4 class="wp-block-heading"><span id="toc16">スマホ対応が必要（スマホ対応は必須）</span></h4>



<p>　　関連記事&#x27a1;「スマホがつなぐネットに縁がなかった人たちをWebに」</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" href="https://a-itc.info/blog/web-marketing1801" title="スマホがつなぐネットに縁がなかった人たちをWebに横浜スマホ最適サイト" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/b8c311616066e71d0874a91c76d782b4.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">スマホがつなぐネットに縁がなかった人たちをWebに横浜スマホ最適サイト</div><div class="blogcard-snippet external-blogcard-snippet">ウェブマーケテイング視点であなたのホームぺージを提案する横浜のＩＴコーデネータです。スマホの普及が今までパソコンに縁がなかった人たちをインターネットにつなぐ。あなたのビジネスのホームページは、その様なスマホ利用者に優しい・見やすく・操作しや...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://a-itc.info/blog/web-marketing1801" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a>







</div>



<p>　　関連記事&#x27a1;「統計から知るスマホ対応サイトの必要性」</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" href="https://a-itc.info/blog/web20181224" title="統計から知るスマホ対応サイトの必要性 横浜スマホ最適" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://xn--ecka7j.biz/wp-content/uploads/cocoon-resources/blog-card-cache/4048ec24151ad19922a5e0501c37f979.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">統計から知るスマホ対応サイトの必要性 横浜スマホ最適</div><div class="blogcard-snippet external-blogcard-snippet">統計から多くのスマホ未対応ホームページにお知らせ。あなたのホームページをスマホ最適化を、単なるスマホ対応よりスマホ最適化があなたのホームページに必要です。ページのどこにいても、どのページにいてもタップでスグに電話できます。スマホからGoog...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://a-itc.info/blog/web20181224" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">a-itc.info</div></div></div></div></a>







</div>



<h4 class="wp-block-heading"><span id="toc17">WebP※02に対応していないブラウザへの対応</span></h4>



<p><a>「注釈」</a><strong><sup>※04</sup></strong> WebPに対応していないブラウザ（iPhoneなど）からのアクセスには、従来の画像形式（JPG / PNG / GIF）での表示切替サポートが必要となります。</p>



<p>　　関連記事&#x27a1;「画像を次世代フォーマットに変換してサイトの表示スピードアップ」にどうぞ</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-web wp-block-embed-web"><div class="wp-block-embed__wrapper">

<a href="https://xn--ecka7j.biz/site-operation/o-plugin/614" title="軽量化：画像を次世代フォーマットに変換してサイトの表示スピードアップ" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="320" height="180" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-320x180.jpg 320w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-120x68.jpg 120w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-usability-700-400-25-160x90.jpg 160w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">軽量化：画像を次世代フォーマットに変換してサイトの表示スピードアップ</div><div class="blogcard-snippet internal-blogcard-snippet">次世代フォーマットでの画像配信：アップロードした画像を最適なフォーマットに自動変換するプラグイン目的はユーザビリティの向上。方法はサイトの応答時間を短縮させるに必要な画像の軽量化（最適化）すること手段は次世代フォーマットでの画像の配信が出来る（PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができる）プラグインを使うこと</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://xn--ecka7j.biz" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">イイネ.biz</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2022.04.04</div></div></div></div></a>
</div></figure>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p>付け加えておきます。<br>それは、<span class="bold-red"><span class="marker-under">外部リソースに起因する点数ダウン※</span></span>は、どうしようもない。ということです。</p>



<p><span class="bold-red">※</span>.<strong>アドセンス</strong>、<strong>Analytics</strong>、<strong>Facebook</strong>、<strong>Twitter</strong><span class="bold-red">など※※</span>の外部が読み込まれている場合。<br><span class="bold-red">※※</span>.自サイトの情報以外、広告やSNSなどの情報も含みます。<br>（理由は、自身でコントロールできないからです。）</p>
</div>



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>軽量化：画像を次世代フォーマットに変換してサイトの表示スピードアップ</title>
		<link>https://xn--ecka7j.biz/redirect/614/</link>
					<comments>https://xn--ecka7j.biz/redirect/614/#comments</comments>
		
		<dc:creator><![CDATA[Jun-N]]></dc:creator>
		<pubDate>Sun, 05 Apr 2020 00:34:59 +0000</pubDate>
				<category><![CDATA[.htaccess]]></category>
		<category><![CDATA[ウェブサイトの軽量化]]></category>
		<category><![CDATA[プラグイン]]></category>
		<category><![CDATA[.htaccessファイル]]></category>
		<category><![CDATA[次世代フォーマット]]></category>
		<category><![CDATA[画像最適化]]></category>
		<category><![CDATA[表示スピードアップ]]></category>
		<guid isPermaLink="false">https://xn--ecka7j.biz/?p=614</guid>

					<description><![CDATA[目次 目的はユーザビリティの向上方法は画像の軽量化手段は適切なプラグインの導入次世代フォーマット変換前ではサイトの応答時間を遅くさせる理由（原因）はこれ！次世代フォーマットでの画像の配信WordPressサイトにはプラグ [&#8230;]]]></description>
										<content:encoded><![CDATA[

  <div id="toc" class="toc tnt-none toc-center tnt-none border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ul class="toc-list open"><li><a href="#toc1" tabindex="0">目的はユーザビリティの向上</a><ul><li><a href="#toc2" tabindex="0">方法は画像の軽量化</a></li><li><a href="#toc3" tabindex="0">手段は適切なプラグインの導入</a></li></ul></li><li><a href="#toc4" tabindex="0">次世代フォーマット変換前では</a><ul><li><a href="#toc5" tabindex="0">サイトの応答時間を遅くさせる理由（原因）はこれ！</a><ul><li><a href="#toc6" tabindex="0">次世代フォーマットでの画像の配信</a></li><li><a href="#toc7" tabindex="0">WordPressサイトにはプラグインが有効</a></li></ul></li><li><a href="#toc8" tabindex="0">使うプラグインはこれ</a><ul><li><a href="#toc9" tabindex="0">EWWW Image Optimizer</a></li></ul></li><li><a href="#toc10" tabindex="0">選択基準は、可用性、信頼性、保守性</a><ul><li><a href="#toc11" tabindex="0">インストール・有効化</a></li><li><a href="#toc12" tabindex="0">設定</a></li></ul></li><li><a href="#toc13" tabindex="0">.htaccessを編集</a><ul><li><a href="#toc14" tabindex="0">既にアップしている画像のWebP化</a></li><li><a href="#toc15" tabindex="0">Web Pに変換されているか確認する</a></li></ul></li></ul></li><li><a href="#toc16" tabindex="0">Search Consoleで確認</a></li><li><a href="#toc17" tabindex="0">まとめ</a></li><li><a href="#toc18" tabindex="0">考慮事項</a></li><li><a href="#toc19" tabindex="0">設定注意事項</a></li></ul>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">目的はユーザビリティの向上</span></h2>



<p>今回の<strong>目的</strong>は、<br>ユーザビリティ（<strong>有効さ、効率、ユーザの満足度の度合い</strong>）の向上の為の、<br>ひとつを実現すること。</p>



<h3 class="wp-block-heading"><span id="toc2">方法は画像の軽量化</span></h3>



<p><strong>方法</strong>は、<br><a>サイトの応答時間を</a>短縮させるに必要な画像の軽量化（最適化）すること</p>



<h3 class="wp-block-heading"><span id="toc3">手段は適切なプラグインの導入</span></h3>



<p>画像の最適化前に、どの程度表示速度に影響があるのかを把握しておき、</p>



<p>影響を最小限に抑えるための適切なプラグインの導入と、</p>



<p>プラグインの導入で実現する画像の最適化により削減された応答時間を確認します。</p>



<h2 class="wp-block-heading"><span id="toc4">次世代フォーマット変換前では</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="305" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/01-w01-700-305-20.jpg" alt="PageSpeed Insights" class="wp-image-4117" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/01-w01-700-305-20.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/01-w01-700-305-20-500x218.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/01-w01-700-305-20-300x131.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">PageSpeed Insights　次世代フォーマット変換前</figcaption></figure>



<p>測定タイミングによっては、上記以上のことも承知しています。</p>



<p><strong>この値は計測したタイミングでの瞬間値ということは理解・承知していることです。</strong></p>



<h3 class="wp-block-heading"><span id="toc5">サイトの応答時間を遅くさせる理由（原因）はこれ！</span></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="451" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/02-w02-700-451-32.jpg" alt="特にモバイルでサイトの応答時間を遅くさせる理由（原因）" class="wp-image-4118" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/02-w02-700-451-32.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/02-w02-700-451-32-500x322.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/02-w02-700-451-32-300x193.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">特にモバイルでサイトの応答時間を遅くさせる理由（原因）</figcaption></figure>



<p>モバイルでは、「<a>次世代フォーマットでの画像の配信</a>」で、3.9秒<strong><sup><span class="bold-red">※</span></sup></strong>の短縮が見込める様です。</p>



<p><span class="bold-red">※</span>.<span class="marker-under">3.9秒を侮ることなかれ。「<a>３秒の壁</a>」を乗り越える重要性･･･</span></p>



<p>最初の「３秒の壁」は、「ファーストビュー」が表れるまでです。ここが３秒以上かかってしまうとキャンセルされてしまう。つまり、あなたのホームページは訪問されない可能性が大きくなってくるのです。いまやネットに訪れる主役はパソコンではなく、スマホ（モバイル端末）です。</p>



<p>スマホの登場以来スマホの性能は飛躍して進歩してきましたが、まだパソコンの能力には及びません。</p>



<p>ネットを閲覧する際の端末の6割超がスマホからです。ですからスマホの性能を意識したサイト作りが大事になってくるのです。</p>



<p>パソコンでもつまり、</p>



<p>パソコンでは0.48秒（ここからもまだ、モバイル端末の非力がお分かり戴けると思います）</p>



<h4 class="wp-block-heading"><span id="toc6">次世代フォーマットでの画像の配信</span></h4>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="262" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/03-w03-700-262-40.jpg" alt="次世代フォーマットでの画像の配信" class="wp-image-4119" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/03-w03-700-262-40.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/03-w03-700-262-40-500x187.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/03-w03-700-262-40-300x112.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">次世代フォーマットでの画像の配信</figcaption></figure>



<p>JPEG 2000、JPEG XR、WebP などの画像フォーマットは、<a>PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができ</a>ます。</p>



<h4 class="wp-block-heading"><span id="toc7">WordPressサイトにはプラグインが有効</span></h4>



<p class="is-style-memo-box">アップロードした画像を最適なフォーマットに自動変換する<strong>プラグイン</strong>またはサービスの使用をご検討ください。</p>



<p>G<span class="marker-under">oogle Search Consoleの<strong>Page Speed Insightsの結果</strong>のLINKから</span><strong>WordPressサイトでの表示でのプラグインは以下の様なもの</strong>がありますが、</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="600" height="701" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/04-w04-600-701-34.jpg" alt="Google Search ConsoleのPage Speed Insightsの結果のLINKからWordPressサイトでの表示でのプラグイン" class="wp-image-4120" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/04-w04-600-701-34.jpg 600w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/04-w04-600-701-34-500x584.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/04-w04-600-701-34-300x351.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /><figcaption class="wp-element-caption">Google Search ConsoleのPage Speed Insightsの結果のLINKからWordPressサイトでの表示でのプラグイン</figcaption></figure>



<h3 class="wp-block-heading"><span id="toc8">使うプラグインはこれ</span></h3>



<h4 class="wp-block-heading"><span id="toc9">EWWW Image Optimizer</span></h4>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="470" height="331" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/05-w05-470-331-25.jpg" alt="EWWW Image Optimizer" class="wp-image-4121" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/05-w05-470-331-25.jpg 470w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/05-w05-470-331-25-300x211.jpg 300w" sizes="(max-width: 470px) 100vw, 470px" /><figcaption class="wp-element-caption">EWWW Image Optimizer</figcaption></figure>



<h3 class="wp-block-heading"><span id="toc10">選択基準は、可用性、信頼性、保守性</span></h3>



<ul class="wp-block-list">
<li>WordPressの<strong>最新バージョンでテストされていること</strong>（信頼性）</li>



<li>使用中のWordPressと<strong>互換性があること</strong>（有効性）</li>



<li><strong>更新頻度</strong>がある程度あること（保守性）</li>



<li><strong>有効インストール数</strong>がある程度あること（信頼性）</li>
</ul>



<p class="is-style-memo-box"><strong>このプラグインは、インストール、有効化の他に、プラグイン外でのサーバー設定が必要となります。</strong></p>



<h4 class="wp-block-heading"><span id="toc11">インストール・有効化</span></h4>



<p>管理画面（ダッシュボード）サイドバーの「プラグイン」&#x27a1;</p>



<p>プラグイン「新規追加」</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="400" height="785" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/06-w06-400-785-24.jpg" alt="管理画面（ダッシュボード）サイドバーの「プラグイン」&#x27a1;プラグイン「新規追加」" class="wp-image-4122" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/06-w06-400-785-24.jpg 400w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/06-w06-400-785-24-300x589.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /><figcaption class="wp-element-caption">管理画面（ダッシュボード）サイドバーの「プラグイン」&#x27a1;プラグイン「新規追加」</figcaption></figure>



<p>&#x27a1;　キーワードに「<strong>web P</strong>」を入れてプラグインの検索</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="470" height="136" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/07-w07-470-136-12.jpg" alt="キーワードに「web P」を入れてプラグインの検索" class="wp-image-4123" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/07-w07-470-136-12.jpg 470w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/07-w07-470-136-12-300x87.jpg 300w" sizes="(max-width: 470px) 100vw, 470px" /><figcaption class="wp-element-caption">キーワードに「web P」を入れてプラグインの検索</figcaption></figure>



<p>　「インストール」&#x27a1;「有効化」</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="227" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/08-w08-700-227-21.jpg" alt="「インストール」&#x27a1;「有効化」" class="wp-image-4124" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/08-w08-700-227-21.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/08-w08-700-227-21-500x162.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/08-w08-700-227-21-300x97.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">「インストール」&#x27a1;「有効化」</figcaption></figure>



<h4 class="wp-block-heading"><span id="toc12">設定</span></h4>



<p><strong>プラグインの設定画面からWebPをオンにする</strong></p>



<p class="is-style-ok-box">管理画面（ダッシュボード）サイドバーの設定　＞　EWWW Image Optimizerを開き、「<strong>設定</strong>」クリック</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="400" height="384" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/09-w09-400-384-16.jpg" alt="EWWW Image Optimizerの設定" class="wp-image-4125" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/09-w09-400-384-16.jpg 400w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/09-w09-400-384-16-300x288.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /><figcaption class="wp-element-caption">EWWW Image Optimizerの設定</figcaption></figure>



<p><strong>Web Pタブを開きます。</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="422" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w10-700-422-20.jpg" alt="Web Pタブ" class="wp-image-4126" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w10-700-422-20.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w10-700-422-20-500x301.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w10-700-422-20-300x181.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">Web Pタブ</figcaption></figure>



<p>「 &nbsp;」&nbsp;JPG から WebP への変換は非可逆ですが、品質の損失は最小です。 PNG からWebP への変換はロスレスです。のチェックボックスをON&#x2705;し、「変更を保存」します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="591" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w-11-700-591-068-36.jpg" alt="チェックボックスをON&#x2705;し「変更を保存」" class="wp-image-4148" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w-11-700-591-068-36.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w-11-700-591-068-36-500x422.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/10-w-11-700-591-068-36-300x253.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">チェックボックスをON&#x2705;し「変更を保存」</figcaption></figure>



<p>「変更を保存」した後に、下部にでてくる「コード」を.htaccessに貼り付ける。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="403" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/11-w12-700-403-20.jpg" alt="「変更を保存」した後に、下部にでてくる「コード」" class="wp-image-4127" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/11-w12-700-403-20.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/11-w12-700-403-20-500x288.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/11-w12-700-403-20-300x173.jpg 300w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/11-w12-700-403-20-120x68.jpg 120w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">「変更を保存」した後に、下部にでてくる「コード」</figcaption></figure>



<p>「コード」をコピーし、一度テキストエディタなどに貼り付けます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="273" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/12-w13-700-273-28.jpg" alt="SublineText3" class="wp-image-4128" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/12-w13-700-273-28.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/12-w13-700-273-28-500x195.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/12-w13-700-273-28-300x117.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">SublineText3で編集</figcaption></figure>



<h3 class="wp-block-heading"><span id="toc13">.htaccessを編集</span></h3>



<p class="is-style-alert-box">.htaccessによる<strong>自動振り分</strong>け<br><strong>jpg</strong>と<strong>png</strong>画像ファイルに対して、同名の<strong>WebP</strong>ファイルが同じ階層にある場合、<br><strong>WebP</strong>をサポートしているブラウザでは<strong>WebP</strong>ファイルを、<br>そうでないブラウザは<strong>jpg</strong>または<strong>png</strong>を自動で読み込む。</p>



<p class="is-style-memo-box">「EWWW Image Optimizer」がWebP設定時に吐き出すコードを利用します。</p>



<p>「<strong>.htaccess</strong>」を<strong>編集</strong>します。以下の例は<strong>エックスサーバー</strong>の例です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="540" height="389" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/13-w14-540-389-21.jpg" alt="エックスサーバーの例" class="wp-image-4129" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/13-w14-540-389-21.jpg 540w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/13-w14-540-389-21-500x360.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/13-w14-540-389-21-300x216.jpg 300w" sizes="(max-width: 540px) 100vw, 540px" /><figcaption class="wp-element-caption">エックスサーバーの例</figcaption></figure>



<p><strong>XSERVERの例</strong>では、Web FTPから編集できます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="720" height="1024" src="https://xn--ecka7j.biz/wp-content/uploads/2023/04/14-htaccess.jpg" alt="" class="wp-image-6855" srcset="https://xn--ecka7j.biz/wp-content/uploads/2023/04/14-htaccess.jpg 720w, https://xn--ecka7j.biz/wp-content/uploads/2023/04/14-htaccess-500x711.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2023/04/14-htaccess-300x427.jpg 300w" sizes="(max-width: 720px) 100vw, 720px" /><figcaption class="wp-element-caption">#BEGIN WordPressの前に、挿入※貼り付けます。</figcaption></figure>



<p><span class="marker-under-red"><strong>#BEGIN WordPressの前に</strong>、挿入<strong><sup>※</sup></strong>貼り付けます。</span></p>



<p class="is-style-alert-box"><strong><span class="bold-red">※</span></strong>．<span class="marker-under">前後のステートメントを削除したり、更新・上書きしない様、<span class="marker-under-red"><span class="bold-red">細心の注意を</span>払って</span>行ってください。</span>（.htaccessファイルはとても重要なものです）</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="785" height="1031" src="https://xn--ecka7j.biz/wp-content/uploads/2023/04/15-htaccess.jpg" alt="" class="wp-image-6856" srcset="https://xn--ecka7j.biz/wp-content/uploads/2023/04/15-htaccess.jpg 785w, https://xn--ecka7j.biz/wp-content/uploads/2023/04/15-htaccess-500x657.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2023/04/15-htaccess-300x394.jpg 300w, https://xn--ecka7j.biz/wp-content/uploads/2023/04/15-htaccess-768x1009.jpg 768w" sizes="(max-width: 785px) 100vw, 785px" /><figcaption class="wp-element-caption">「.htaccess」を編集</figcaption></figure>



<p>「<strong>保存する</strong>」で更新されます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="540" height="99" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/16-w17-540-099-6.jpg" alt="更新" class="wp-image-4132" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/16-w17-540-099-6.jpg 540w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/16-w17-540-099-6-500x92.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/16-w17-540-099-6-300x55.jpg 300w" sizes="(max-width: 540px) 100vw, 540px" /><figcaption class="wp-element-caption">更新</figcaption></figure>



<p class="is-style-memo-box">先ほどのEWWW Image Optimizerの画面を見ると<strong><span class="badge-green">グリーン</span></strong>に変わっています。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="208" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/17-w18-700-208-16.jpg" alt="グリーンに変わっています" class="wp-image-4133" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/17-w18-700-208-16.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/17-w18-700-208-16-500x149.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/17-w18-700-208-16-300x89.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">グリーンに変わっています</figcaption></figure>



<p>これで設定は完了です。</p>



<p><strong>.htaccess</strong>を設定する以前は、<strong>レッド（<span class="badge-red">未適用で.png</span>）</strong>でした。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="123" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/18-w19-700-123-11.jpg" alt=".htaccessを設定する以前" class="wp-image-4134" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/18-w19-700-123-11.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/18-w19-700-123-11-500x88.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/18-w19-700-123-11-300x53.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">.htaccessを設定する以前</figcaption></figure>



<p class="is-style-ok-box">※. キャッシュプラグイン「WP Fastest Cache」を利用している場合は、WebP用のコードが入っているため、グリーンになっています。</p>



<h4 class="wp-block-heading"><span id="toc14">既にアップしている画像のWebP化</span></h4>



<p>管理画面（ダッシュボード）サイドバーのメディアから<strong>一括最適化</strong>を選び、</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="209" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/19-w20-700-209-19.jpg" alt="「最適化されていない画像をスキャンする」をクリック" class="wp-image-4135" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/19-w20-700-209-19.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/19-w20-700-209-19-500x149.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/19-w20-700-209-19-300x90.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">「最適化されていない画像をスキャンする」をクリック</figcaption></figure>



<p>右側ボックスの<strong>Web Pのみ</strong>、チェックボックスを入れます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="540" height="380" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/20-w21-540-380-21.jpg" alt="Web Pのみにチェック" class="wp-image-4136" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/20-w21-540-380-21.jpg 540w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/20-w21-540-380-21-500x352.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/20-w21-540-380-21-300x211.jpg 300w" sizes="(max-width: 540px) 100vw, 540px" /><figcaption class="wp-element-caption">Web Pのみにチェック</figcaption></figure>



<p>確認表示に応えます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="540" height="163" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/21-w22-540-163-9.jpg" alt="確認表示" class="wp-image-4137" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/21-w22-540-163-9.jpg 540w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/21-w22-540-163-9-500x151.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/21-w22-540-163-9-300x91.jpg 300w" sizes="(max-width: 540px) 100vw, 540px" /><figcaption class="wp-element-caption">確認表示</figcaption></figure>



<p class="is-style-question-box"><strong>最適化が開始され、進捗状況が表示されます。</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="794" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/22-w23-700-794-45.jpg" alt="最適化が開始され、進捗状況表示" class="wp-image-4138" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/22-w23-700-794-45.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/22-w23-700-794-45-500x567.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/22-w23-700-794-45-300x340.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">最適化が開始され、進捗状況表示</figcaption></figure>



<p><strong>進捗状況</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="122" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/23-w24-700-122-7.jpg" alt="最適化進捗状況表示" class="wp-image-4139" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/23-w24-700-122-7.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/23-w24-700-122-7-500x87.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/23-w24-700-122-7-300x52.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">最適化進捗状況表示</figcaption></figure>



<p><strong>最適化完了</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="108" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/24-w25-700-108-5.jpg" alt="最適化完了" class="wp-image-4140" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/24-w25-700-108-5.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/24-w25-700-108-5-500x77.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/24-w25-700-108-5-300x46.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">最適化完了</figcaption></figure>



<p class="is-style-ok-box"><strong>最適化が終わったら</strong></p>



<p>メディアライブラリの一覧で開き確認できます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="760" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/25-w26-700-760-39.jpg" alt="右端の画像最適化部分" class="wp-image-4141" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/25-w26-700-760-39.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/25-w26-700-760-39-500x543.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/25-w26-700-760-39-300x326.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">右端の画像最適化部分</figcaption></figure>



<p>見えにくいと思いますので、<strong>右端の画像最適化部分のみ切り出し</strong>ます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="500" height="984" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/26-w27-500-984-35.jpg" alt="右端の画像最適化部分のみ切り出し" class="wp-image-4142" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/26-w27-500-984-35.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/26-w27-500-984-35-300x590.jpg 300w" sizes="(max-width: 500px) 100vw, 500px" /><figcaption class="wp-element-caption">右端の画像最適化部分のみ切り出し</figcaption></figure>



<p>筆者の場合、予め「<strong><a href="https://tinypng.com/">Tiny Ping</a></strong>」で画像圧縮を行い、プラグインの「<span class="marker-under-blue"><strong>Regenerate Thumbnails</strong>」で調整も行っている為、サイズ圧縮値は、<strong>目だつ物</strong>がない様ですが、これでも有効なのです。</span></p>



<p class="is-style-question-box">筆者のブログの様にたくさんの画像を使う場合は（塵も積もれば山となるです。）</p>



<h4 class="wp-block-heading"><span id="toc15">Web Pに変換されているか確認する</span></h4>



<p><span class="marker-under-blue">検証モード</span>に切り替えます。　「<strong>Ctrl</strong>」＋「<strong>Shift</strong>」＋　「<strong>I</strong>」　</p>



<p><span class="marker-under">または</span>、<span class="marker-under-blue">マウス右クリック</span>で出てきたポップアップの一番下　<span class="marker-under-blue">検証（I）</span></p>



<p>「<strong><span class="bold-blue">Network</span></strong>」表示。</p>



<p>（下の様に、開いた時、<strong><span class="bold-red">何もデータが表示されていない</span></strong>ことがあります。</p>



<p><span class="marker-under">その場合は「<strong>ctrl</strong>」+「<strong>R</strong>」で再</span><span class="marker-under">読み込み（リロード）して下さい。</span></p>



<p>「<strong>Network</strong>」表示</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="359" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/27-w28-700-359-33.jpg" alt="開いた時、何もデータがない" class="wp-image-4143" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/27-w28-700-359-33.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/27-w28-700-359-33-500x256.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/27-w28-700-359-33-300x154.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">開いた時、何もデータがない</figcaption></figure>



<p class="is-style-ok-box"><strong>青枠で囲んだ部分</strong>が、<strong>次世代フォーマットWebＰ</strong>化された部分です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="530" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/28-w29-700-530-51.jpg" alt="次世代フォーマットWebＰ化" class="wp-image-4144" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/28-w29-700-530-51.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/28-w29-700-530-51-500x379.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/28-w29-700-530-51-300x227.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">青枠で囲んだ部分が、次世代フォーマットWebＰ化された部分</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc16">Search Consoleで確認</span></h2>



<p>この記事を執筆しながら行った関係で、最初計測してから4時間以上かかってしまいました。</p>



<p>ネットが混んできている時間帯でもあり、想定程のスピードが出ていません</p>



<p>（この検証は、明日、同じ時間帯に試みてみようと思います）15：52</p>



<p class="is-style-memo-box"><strong>Search Console</strong><strong>で確認</strong><strong></strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="349" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/29-w30-700-349-20.jpg" alt="PageSpeed Insights" class="wp-image-4145" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/29-w30-700-349-20.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/29-w30-700-349-20-500x249.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/29-w30-700-349-20-300x150.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">PageSpeed Insights</figcaption></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="427" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/30-w31-700-427-19.jpg" alt="次世代フォーマットでの画像配信" class="wp-image-4146" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/30-w31-700-427-19.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/30-w31-700-427-19-500x305.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/30-w31-700-427-19-300x183.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">「次世代フォーマットでの画像配信」は3.9秒から0.15秒に</figcaption></figure>



<p><strong>モバイル</strong></p>



<p>それでも、改善できる項目の「次世代フォーマットでの画像配信」は3.9秒から0.15秒になりました。</p>



<p><strong>パソコンは</strong></p>



<p>「次世代フォーマットでの画像配信」が、0.48秒から、表示がなくなりました。</p>



<p>つまり画像に関してはGoogleの評価では改良の余地はない（改善できる点がない）ということです。</p>



<h2 class="wp-block-heading"><span id="toc17">まとめ</span></h2>



<p>目的は、表示スピードのアップを求めるのではない。</p>



<p class="is-style-primary-box">ユーザビリティの向上の向上を目指して</p>



<p>「次世代フォーマットでの画像配信」対応のプラグインを使うことで、結果的にスピードアップにつながった･･･ということです。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="400" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/32-usability-700-400-26.jpg" alt="usability" class="wp-image-4147" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/32-usability-700-400-26.jpg 700w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/32-usability-700-400-26-500x286.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/32-usability-700-400-26-300x171.jpg 300w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/32-usability-700-400-26-120x68.jpg 120w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/32-usability-700-400-26-160x90.jpg 160w" sizes="(max-width: 700px) 100vw, 700px" /><figcaption class="wp-element-caption">目的はユーザビリティの向上</figcaption></figure>



<h2 class="wp-block-heading"><span id="toc18">考慮事項</span></h2>



<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
<p><span class="bold-red">一つだけ</span>、付け加えておきます。<br>それは、<span class="bold-red"><span class="marker-under">外部リソースに起因する点数ダウン※</span></span>は、どうしようもない。ということです。<br><br><span class="bold-red">※</span>.<strong>アドセンス</strong>、<strong>Analytics</strong>、<strong>Facebook</strong>、<strong>Twitter</strong><span class="bold-red">など※※</span>の外部が読み込まれている場合。<br><span class="bold-red">※※</span>.自サイトの情報以外、広告やSNSなどの情報も含みます。<br>（理由は、自身でコントロールできないからです。）<br></p>
</div>



<h2 class="wp-block-heading"><span id="toc19">設定注意事項</span></h2>



<hr>
<a href="Lasy_Load"><i class="fas fa-anchor fa-fw"></i>Lasy Load</a>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="800" height="501" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/33-EWW-136-800-37.jpg" alt="Lazy Load（遅延読み込み）は有効にしない（WordPress 5.5 から標準サポート）" class="wp-image-4115" srcset="https://xn--ecka7j.biz/wp-content/uploads/2022/04/33-EWW-136-800-37.jpg 800w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/33-EWW-136-800-37-500x313.jpg 500w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/33-EWW-136-800-37-300x188.jpg 300w, https://xn--ecka7j.biz/wp-content/uploads/2022/04/33-EWW-136-800-37-768x481.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /><figcaption class="wp-element-caption">Lazy Load（遅延読み込み）は有効にしない（WordPress 5.5 から標準サポート）</figcaption></figure>



<div class="wp-block-group is-style-ng-box is-layout-flow wp-block-group-is-layout-flow">
<p><strong>WordPress 5.5</strong> から標準で <strong>Lasy Load </strong>がサポートされる様になったため、<br>プラグインで機能する <strong>Lasy Load</strong> の設定は &#x2705; を付けないこと<br>これは何も、「<strong>EWWW Image Optimizer</strong>」に限ったことでなく、</p>



<p><strong><span class="marker-under">Lazy Load 機能を備えたプラグイン</span></strong>はこれらの機能は指定しないこと。<br>（重複すると<span class="bold-red">コンフリクト・干渉</span>してしまい<br>　不具合を起こす可能性があるので、&#x2705;を付けない方が良い）</p>
</div>



<div class="wp-block-group is-style-question-box is-layout-flow wp-block-group-is-layout-flow">
<p><strong>Lasy Load </strong>が関連するプラグイン（私が把握している範囲）</p>



<ul class="wp-block-list">
<li>a3 Lazy Load</li>



<li>Image optimization &amp; Lazy Load by Optimole</li>



<li>Jetpack</li>



<li>lazy-load</li>



<li>SG Optimizer</li>



<li>Unveil Lazy Load</li>
</ul>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://xn--ecka7j.biz/redirect/614/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
	</channel>
</rss>
