ホームぺージにはWordpressを利用する機会が多くなってきております。

「ホームぺージ制作会社から勧められたからそれにした。」ではなく、ワードプレスの良い点を理解して導入することにより、効果は数倍に膨れ上がりますので、是非この記事を確認して知識を増やしてください。

2022.09.25

WordPress(ワードプレス)まとめ記事　基礎知識編

基礎知識 今、WEB集客のためにホームページ制作するならWordPressなんでしょうが、、、そもそもWordPressって何？ ...

WordPress(ワードプレス)まとめ記事　アップデート・バックアップ編

WordPressのアップデートやバックアップについては当社にもよく相談を頂きます。

ただ、トラブルが起きて相談を頂いた時点で、既に私たちにもどうにも出来ない事が多いので日頃からこまめにバックアップをしてアップデートをしておきましょう。

2022.09.22

WordPress(ワードプレス)まとめ記事　アップデート・バックアップ編

アップデート WordPressを安全かつ簡単に手動で最新版に更新(アップデート)する方法 WordPressはセキュリティ強化...

WordPress(ワードプレス)まとめ記事　HTMLタグ・編集方法編

WordPressで制作をさせて頂いたお客様から編集方法についてよく相談を頂きます。

WordPressについては当社で発明・開発したものではないので正直なところ、完璧に理解をしているわけではないので時々回答に困る事があります。

今回の記事の「改行」についてはまさにそうで・・・。
法則性があるんでしょうが・・・・複雑すぎて理解が出来ません。
その環境で出来る改行方法を探して、その方法を見つけるのが正解という状況です。

そんな状態に少しでもお役立てれば良いかな・・・という記事を集めてみました。

2022.09.23

WordPress(ワードプレス)まとめ記事　HTMLタグ・編集方法編

HTMLタグ WordPressを利用したブログで改行を行うときに使用するHTMLタグと正しい使用方法 WordPressを利用...

WordPress(ワードプレス)まとめ記事　プラグイン編

このWordpressのプラグインはWordpressを多く人が利用している一つの理由です。
そして、とても便利で、多くのプラグインが無料で提供されています。

しかし、同じケースで利用が出ると予測できるものでもプラグインの数が多いのでどのプラグインが良いのか判断が出来ない事が多いの事実です。

そんなプラグインの選択でお困りの場合は、下記の記事を参考にしてください。

2026.03.22

岡山の採用は「5.10倍」の時代へ。1人を5社で奪い合う超・人手不足でも、無名企業が若手に選ばれ続けるロードマップ

この記事の対象者 岡山県内で「求人を出しても1ヶ月以上応募ゼロ」が当たり前になっている経営者 大手企業や県外企業に、地元の優秀な...

まとめ

WordPressについて記載している記事のまとめ記事をお届けしました。

WordPressを利用しているホームぺージでトラブルが起きた！とかお困りの事があればこのまとめ記事を利用して改善を図ってください。

それでも、改善が出来ない場合は、エクセレントにご相談頂ければと思います。

▼該当サービス

無料相談の流れ

1.お申込み

下記お申込フォームより、お気軽にご連絡ください。

2.日程調整

担当より日程のご連絡をいたします。

3.無料相談

30分程度の相談会を実施いたします。

4.商談

弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。

無料相談　ご利用後の流れ

しつこい電話セールスなどは一切いたしません。逆に、弊社サービスをご検討頂ける場合には、お見積もりやサービス内の詳細についてご案内をさせて頂きます。

ただ、メルマガの登録だけお願いします。
このメルマガでは新サービスの案内やコラムの更新情報のご案内をしております。

メルマガの解除はいつでもできますので、そこだけご理解とご協力をお願いいします。

▼お申し込みはこちらから

wordpressを利用したWeb制作が得意な会社　株式会社エクセレント

The post WordPress(ワードプレス)まとめ記事　　総まとめ編 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

今回は、「適切なサイズの画像」の改善方法についてお伝えいたします。

今回も基本、Wordpress(ワードプレス)を使用しているホームページでの対応策の案内となりますのでご注意下さい。

▼参考記事

2022.05.27

超簡単！ページ表示速度の改善方法は、PageSpeed Insightsが診断した上で改善方法を提示してくれます

ぺージの表示速度の改善方法 Webサイト(ホームぺージ)をクリックしてページが表示するまでに3秒以上かかってしまうと、半数以上のユーザーが...

さて！
その改善には以前、「次世代フォーマットでの画像の配信」の記事でご紹介いたしましたワードプレスのプラグインEWWW Image Optimizerを今回も利用します。

▼参考記事

2022.06.06

「次世代フォーマットでの画像の配信」をプラグイン　EWWW Image Optimizer　でスピード解決する方法　

PageSpeed Insights　改善シリーズの新作です。 ▼該当記事 今回は、「次世代フォーマットでの画像の配信」につ...

さて、早速に行ってみましょう！！

適切なサイズの画像とは？

200KB以下にする

ズバリ！！
「適切なサイズの画像とは」画像1枚のファイルサイズが「200KB」が目安となります。

そして、Googleの発表によると、1ページの容量は「1.6MB以内」が目安となります。

はて？？

そうなるとですよ。。。。

本文以外のサイトデータも考慮すると、200KB以下の画像だと1ぺージに5～6枚が良いという事になります。もっというなら、、、1ぺージに5～6枚以下が望ましいということになります。

うーーん。
そうなると・・・ページの内容によりますが・・・。
最近のほとんどのページは1ぺージに画像5～6枚で1.6Mの実現なんて不可能ですよね。ww

ということで・・・・あくまでも、画像については1ぺージに5～6枚を努力目標とする程度で良いと思います。

横幅は1,000px程度にする

ズバリ！！横幅は1,000px程度あれば問題ありません。
ちなみに、このサイトでは記事で使用している画像の横幅は「700px」です。

サイドナビがある場合は・・・700px～800px
サイドナビが無い場合は・・・1000px程度

に納める事を推奨いたします。

画像の高さは定番の比率を参考にする

ズバリ！！一般的な比率が良いです。ここはあくまでも見た目のバランス重視です。

一般的な比率とは下記を参考してください。

16:9（横幅1000px → 高さ562px）
4:3（横幅1000px → 高さ750px）
3:2（横幅1000px → 高さ666px）

ちなみに、、、余談ですが・・・縦横の比率と言えば・・・
日本でよく使われている名刺のサイズで有名なお話があります。

名刺の比率は1:1.654の黄金比というもので作られています。このサイズは、人間がもっとも美しいと感じる比率と言われています。

この比率は古代から現代までに様々な作品に取り入れられています。例えば・・・・

などなど・・・・。

何気なく作ってるのかな？と思っていた作品にはしっかりとした理由があるという

余談でした・・・。

画像最適化におすすめのツールやプラグイン

さてさて、いよいよ本題。
WordPressで制作しているホームページをEWWW Image Optimizerを利用してスピード解決する方法について説明していきます。

EWWW Image Optimizerの機能は「新規画像の圧縮」と「既存画像の圧縮」の2つです。
「新規画像の圧縮」では、プラグインが有効化されている状態であれば、画像をWordPressに追加する際に自動的に圧縮されます。

プラグインが有効化されている状態で、メディアの「一括最適化」を選び、「最適化されていない画像をスキャンする」を選択するだけで、「既存画像の圧縮」ができます。

非常に簡単に利用できるため、WordPressでホームページを運営しているなら、おすすめしたいプラグインです。

さて、今回もインストール方法からご紹介いたします。

インストール方法

プラグインの新規追加で検索窓にewwwと入れると検索結果に出てきます。

【今すぐインストール】を押し、有効化すれば完了です。

設定方法

初期設定

プラグインからEWWW Image Optimizerを探して【設定】を選択します。

上側のチェックボックスは目指す目標を選択します。
選択した方に最適な設定を推奨してくれるようになります。
両方にチェックを付けても大丈夫です！

下側のチェックボックスは有料のサポートが必要か、無料モードの選択になりますので【今は無料モードのままにする】にチェックを入れて【次】を押します。

基本的にはデフォルト状態のチェック項目のままで問題ありません。
初期設定が完了した後でも変更出来るのでご安心ください。

• メタデータを削除
  メタデータとは簡単に言えばデータのデータです。作成日やサイズなど、写真の場合は撮影した位置情報もメタデータです。このデータを削除することで画像の軽量化につながります。
• 遅延読み込み
  遅延読み込みはファーストビュー以外の画像を後から後から表示します。初期表示の高速化になりますのでチェックしておいてください。
• WebP変換
  画像サイズを自動的にリサイズする機能です。
  後から変更出来るのでとりあえずの数値で構いません。
• 埋め込みヘルプ
  チェックあり。
• 著名の報告
  チェックなし。

【設定を保存】を押します。

【完了】を選択して初期設定は以上です。

画像リサイズ設定

初期設定が終わったら通常の設定画面に切り替わりますので、こちらでリサイズ設定をします。

画像リサイズという項目でピクセル数の設定ができます。

ホームぺージでの定番のサイズは、上記で説明しましたように1,000px程度ですので、ここでは1,000とします。

あくまで上限サイズの指定なので、上限サイズより小さい画像は関係ありません。
大きいサイズの画像を軽量化するために、わざわざリサイズしてアップロードするのが面倒な時に役に立つ機能です。

高さの上限は基本的に0のままがおすすめです。
0にすることで幅の縮小比率に合わせて自動でリサイズされます。

設定が完了したら忘れずに【変更を保存】を押します。

以上の作業が完了すれば、これからアップロードする画像は自動的にリサイズされてアップロードされるようになります。

一括最適化

次は既にアップロードされている画像を一括で最適化する方法を説明していきます。

ここで注意が必要なのは一括最適化を行った画像は、元に戻すことができないという事です。
あらかじめ画像のバックアップをとっておきましょう。

設定画面の上の方にある【一括最適化】を選択します。

【最適化されていない画像をスキャンする】を押します。

最適化できる画像が〇〇点ありますと出るので【〇〇点の画像を最適化】を押します。

完了になれば最適化終了です。

まとめ

簡単な設定で自動的にリサイズしてくれるのでとても便利なプラグインです。
さらに既にアップロードされている画像も一括で最適化出来ます。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post 「適切なサイズの画像」をプラグイン EWWW Image Optimizer でスピード解決する方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

Webサイト(ホームぺージ)をクリックしてページが表示するまでに3秒以上かかってしまうと、半数以上のユーザーが離脱していると言われます。
3秒！？って短いですよね。と言っても、実際のところ私もページが表示されるまでに2秒ぐらいしか待たないのですね・・・・・。すぐ離脱します。ww

しかし、Webサイト(ホームぺージ)の表示スピードの改善方法なんて、分かりませんよね。

ホームぺージを制作を稼業としてる私もそうです。
さっぱりわかりません。ww(笑い事ではない)

しかし、それはある方法を知るまでの話です。
私はそのある方法を利用する事でWebサイト(ホームぺージ)の表示スピードを劇的に改善出来るという事を知りました。

今回はその方法について説明します。

PageSpeed Insights（ページスピードインサイト）を利用すべし

どのような方法なのかというと・・・誰でも、いつでも、無料で手軽に利用出来る便利なツールがあるんです。

皆さん、Googleってごご存知ですか？？ww　(ナイツ風)

そのGoogleさんが提供するPageSpeed Insightsを使えば、スピードの測定と改善方法を提示してくれます。カンタンに対応できる改善方法から、専門的過ぎてその道のプロでも理解が出来ないような事まで提案してくれます。

そんな凄いシステムの利用料が今ならなんと無料！！(ずっと　無料)

ページ表示速度は検索結果のランキングを決める

ページ表示速度は、Googleが10年ほど前から検索結果のランキングを決める要因の一つであると公表していますが、数あるランキングの要因の一部にすぎず、その影響は小さいものです。(私の実感によるもの・・)

したがって、影響を受けるWebサイト(ホームぺージ)は一部で、本当に開かないWebサイト(ホームぺージ)だけがマイナスの影響を受け、一般的なWebサイト(ホームぺージ)の表示速度であればマイナス影響を受けることはないと考えられます。

2秒や3秒でWebサイト(ホームぺージ)が表示出来なくても大丈夫です。(大丈夫なんかい！)

ただ、Googleの検索結果のランキングの影響としてはさほど大きくはないのですが、ユーザビリティに大きく影響します。

したがって、ユーザビリティを考えると2秒や3秒でWebサイト(ホームぺージ)が表示が出来ないとだめなのです。(だめなんかい！)

それでは、PageSpeed Insights（ページスピードインサイト）を利用してのページ表示速度の改善策をご紹介いたします。

PageSpeed Insights（ページスピードインサイト）で分かること

表示速度スコア

まず、測定・評価結果の画面では、表示速度の判定スコアを確認できます。

モバイルはパソコンよりも評価が低く出る傾向があり、モバイルに関しては60を超えることは難しいと言われています。また、PageSpeed Insights（ページスピードインサイト）は海外から表示速度を測定しているため、日本のWebサイト(ホームぺージ)は評価が低く出る傾向があります。

そういう採点システムであるので、私はモバイルは50、パソコンは80を超えるように改善を進めていくと良いと思います。

何らかのセールスをしてくるホームぺージ業者によっては「スコアは90以上が当たり前ですよ！うちにお任せ下さい！！」という元気な業者も中にはいると思いますが、笑って聞き流してください。そして、こう言ってください。

「成果報酬でやる勇気があってからいうとんのかい？」と・・・。ww

指標

個人のパソコンなど、特定の環境下で測定されたデータです。
このデータを改善して行くわけですが、ここでは表示項目の説明のみさせて頂きます。

改善できる項目

この項目がPageSpeed Insights（ページスピードインサイト）メインの項目です。

表示速度を早くするために正確に提案してくれています。項目には改善によってどのくらいの時間短縮ができるのか記載されているため、改善を行うかどうかを判断するのに参考になります。

では、どのように対応すれば良いのかについて説明します。

と言っても、私の知識の限界がありまして、ここではWordpress(ワードプレス)を使用しているホームページでの対応策の案内となります。ご了承下さい。

レンダリングを妨げるリソースの除外

レンダリングを妨げるリソースとは以下の2つとなります。

・JavaScript
・CSS

この項目は、プラグインAutoptimizeを利用する事で、使われていないJavaScriptやCSSコードを削除することで読み込み速度を改善します。Autoptimizeの設定方法については他の記事で説明していますのでそちらをご確認してください。

▼該当記事

2022.05.20

「レンダリングを妨げるリソースの除外」という項目はプラグイン　Autoptimize 　を使って簡単に解決出来ます

やって来ました。 PageSpeed Insights 待望のシリーズ第二弾！！ PageSpeed Insights ...

使用していない JavaScript の削減

この項目はユーザーが何かの操作を起こすまでJavaScriptの実行を遅らせる事で改善出来ます。
これもプラグインFlying Scripts by WP Speed Mattersを利用する事で改善が出来ます。

ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行される仕掛けをホームぺージに組み込んでくれます。しかも、遅延時間を大幅に伸ばさない限りは、ホームページの表示画面が崩れるような可能性は低いのでお勧めのプラグインです。

Flying Scripts by WP Speed Mattersの設定方法については他の記事で説明していますのでそちらをご確認してください。

▼該当記事

2022.05.18

「使用していない JavaScript の削減」をプラグイン　Flying Scripts　でスピード解決する方法　

PageSpeed Insightsの得点 PageSpeed Insightsとは、Googleさんから提供されており、URLを入力...

画像の最適化

この項目は

この内容について対応します。
と言っても、こちらもプラグインで簡単に対応が出来ます。

どのプラグインもWebPに対応していますが、使い勝手や特徴、画像圧縮率がことなります。
お薦めなのは、設定画面が日本語で、ネット上に情報が多い「EWWW Image Optimizer」を選択するのがおすすめです。

まとめ

PageSpeed Insights（ページスピードインサイト）は表示速度を調べたいWebサイトのURLを入力するだけで簡単なうえに無料で利用ツールです。

Webサイトの表示速度はSEOにも影響しますが、メインはユーザビリティの観点からのWebサイトの改善を目的で取り組んでください。

PageSpeed Insights（ページスピードインサイト）は、改善項目と改善した場合に短縮できる時間の予測が合わせて記載されているので、優先順位をつけて改善に取り組むことができます。

ただ、PageSpeed Insights（ページスピードインサイト）で改善を頑張ったとしてもSEOにはほんの少ししか影響がありませんので、その点を考慮して費用対効果を考えながら取り組んでください。

もし、ご不明な点がございましたら当社までお気軽にお問合せ下さい。
何か良いアドバイスが出来るかもしれません。(自信ないんか――いww)

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post 超簡単！ページ表示速度の改善方法は、PageSpeed Insightsが診断した上で改善方法を提示してくれます first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

PageSpeed Insightsとは、Googleさんから提供されており、URLを入力するだけでモバイル、PCそれぞれのWebページの読み込み速度をスコアリングしてます。しかも無料で改善ポイントまで教えてくれるという優れもののシステムです。

ほんと、親切なツールです。
そして親切なこのツールを使って、SEO会社さんやホームぺージ制作会社さんがお客さんに電話営業してくるんです。ww

御社のホームぺージのPageSpeed Insightsのスコアが異常に低いのですぐに改善しないと危ないですよ！

という営業をかけてくるんです。

そんなこと言われたら、詳しく内容を知らないホームぺージの担当者さんなら焦るじゃないですか！！

なんと！うまいなーーー！！

すると・・・すぐに・・・

大変だ～～至急！直してぇ～～～
おたくが作ったホームぺージ評価が低いって言われたよ～～

これです。
おなじみの日本のビジネスのおまじないワード【至急】付での連絡が来るのです。

順調に業務をこなしていたのに、この日本のビジネスのおまじないワード【至急】付で来る連絡にそこからの業務の進行に足元をすくわれてしまいます。

という事で、今回はPageSpeed Insightsの対応内容についてご紹介いたします。

得点が低くても慌てないで！

Googleも検索順位付け要素にページスピードを組み込んでいると言われているので、PageSpeed Insightsへの対応は検索エンジンの指標に対する最適化でもあるのは確かです。

しかし、ページの表示速度はランキング要因の１つに過ぎないので、PageSpeed Insightsの点数が仮に10点でも、検索順位が大幅に下落するかというとそうではありません。逆に得点が100点であれば、1位になるのかというとそうではありません。

ですので、すぐに改善しなくても大丈夫です。

そして改善しても検索の順位が劇的に改善するというとそうではないので、勘違いをしないでください。

費用対効果を落ち着いて考えてください。

費用が潤沢にあるのであれば、全てのエラーに対応すれば良いと思いますが、多くの場合はそうではないと思います。

エラーの内容とすれば、とんでもない作業内容を指示しているケースがあります。逆にパッパッと改善出来るケースもあります。
何が効果的で何を諦めないといけないのかをよく考えて対応すべきです。

もし、自分では判断が出来ないと思われるケースは当社にご相談ください。
状況をヒアリングしてお客様目線で丁寧に対応させて頂きます。

▼該当サービス

「使用していないJavaScriptsの削減」について

PageSpeed Insightで表示された「改善できる項目」の内、「使用していないJavaScriptsの削減」について改善をしていきます。

この項目を改善するだけでかなりの得点の回復が出来ます。

「Flying Scripts by WP Speed Matters」という便利なプラグインをインストールします。

このプラグインは、ユーザーが何かの操作を起こすまでJavaScriptの実行を遅らせ、ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行される仕掛けをホームぺージに組み込んでくれます。しかも、遅延時間を大幅に伸ばさない限りは、ホームページの表示画面が崩れるような可能性は低いのでお勧めのプラグインです。

では、早速インストールしてみましょう！！

Flying Scripts by WP Speed Mattersの設定方法

Flying Scripts by WP Speed Mattersを検索しインストール

【プラグインを追加】の画面で　Flying Scripts by WP Speed Matters　と入力してプラグインを探します。プラグインが表示されたら、【今すぐインストール】をクリックしてください。

インストールが出来たら【プラグインを追加】をクリックしてください。

続いて【有効化】のボタンを押してエラーが発生しなければ、初期設定は完了です。

Flying Scriptsを起動します

サイドナビの【設定】タブから【Flying Scripts】を選択してください。

設定画面が表示されたら【Settings】タブを開いて【Include Keywords】欄を確認します。

この項目にはPagespeed Insightの「使用していないJavaScript」を登録しますので、そのぺージを開いたままPageSpeed Insightsのページを開きます。

PageSpeed Insightsの【改善できる】項目をクリック

【使用していないJavaScriptの削減】の項目を表示して、該当ファイル名をコピーします。

コピーしたら先程の画面に戻って、【Include Keywords】欄にその内容をペーストします。

【Timeout】は5秒で設定します。

ここまでの内容が入力が完了すれば【Save Changes】ボタンを押せば設定完了です。

スピードが改善されたか確認

PageSpeed Insightに戻って、再度URLを入れてスピードが改善されたか確認します。

そうした時に、エラーはまだ出ているケースがあると思います。
今改善したばかりの「使用していないJavaScriptの削減」が全て対応出来ていないケースもありますが、これは5秒後にはJavaScriptが稼働するため、PageSpeed Insightsで計測する時点では稼働している為、対応が出来ていないと表示されている可能性があります。

PageSpeed Insightsはネットワークやサーバー・クライアントの負荷に応じて、分析結果が変動しますので、1回の計測だけでパフォーマンスを正しく評価することはできません。正しく結果を評価するには、数日にわたって何回か計測を行い、そこで頻発するエラーがあれば対応して行くようしてください。

まとめ

ホームページのスピードアップ対策は、必要ですがそれぞれの環境によっても異なり、原因は複雑な為、常に同じ結果となることはありません。
目指すべき得点は90点として改善をすれば良いと思います。

ただ、ワードプレスで使用してるテーマによってはその道のプロでなければ、どこをどう改善すれば良いのか分からないケースもありますので、70点から80点あれば十分だと私は思います。

※ご注意下さい。

今回の方法では、Chrome等で確認できる全てのJavaScriptを全て遅延させますので、以下の危険性が指摘されています。

もし上記のような不具合が生じた場合は、関連するJavaScriptを Flying Scriptsのキーワードから外す、もしくは Flying Scripts自体を削除して対応してください。

それでも、改善が出来ないという場合にはお気軽にエクセレントにご相談ください。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント

The post 「使用していない JavaScript の削減」をプラグイン　Flying Scripts　でスピード解決する方法　 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.