最近の運営ネタ、AMP辞めてページエクスペリエンスに注力しています。

今回は、ブログ運営ネタを色々書いて行きたいと思います。最近、AMPをいったん辞めました。

これまで、Googleモバイル検索のトップのカルーセルに表示されるにはAMP対応が必要という事でしたが、その必要がなくなったこととAMP対応ページに出ていた雷マークが既になくなっているということから今後もAMPはどんどん優遇されなくなっていくのではないかと考えたからです。

一度、僕もGoogle砲の恩恵を受けたため、最近まで、AMP対応に奮闘していましたが、AMPページでは限られたタグしか使えないため、制限も多いです。

サーチコンソロールで警告を受けたページを「PageSpeed Insights」でテストしてみると次世代フォーマットで配信しましょう「次世代フォーマットでの画像」という警告を受けますが、簡単にWebpに置き換えてくれるプラグイン「EWWW」ではAMPページは対応していないようです。

Webpはまだ全てのブラウザがサポートされているわけではないのでアクセスしたブラウザごとに切り替える必要がありますが、<picture> タグがAMPで使えないことそして僕のサイトはクラウドフレアを導入している為、最初にアクセスがあった端末がwebp対応だったら、webpが表示されますが、このページがキャッシュされた場合、非対応ブラウザでは画像が見えないという事になってしまいます。

キャッシュに対応できるjavascriptリライトもAMPは対応していないようです。出来ても手軽な方法はなさそうなのでやっぱり辞めました( ;∀;)

素人の限られた時間で、PCページ、モバイルページ、AMPと3つもページエクスペリエンスに対応するのは大変そうなので思い切って切り捨ててみましたが、今のところ収益もアクセスも落ちていないので良かったです(^^♪

というわけで、ページエクスペリエンスに対応して「PageSpeed Insights」で100点を目指すというマニアックなことを始めたのでどんなことをしたのか記事にしていきたいと思います。

テーマ:cocoon
サーバー:MIXHOST

という環境だと、なにもしなければサクサクなので、余計なことをしてしまっては修正という気がいつもしているアリスですがよろしくお願いします( ;∀;)

無駄に大きな画像の読み込みの停止

今回、以前から気付いてはいたのですが、僕が運営している一部のブログでサムネイルが適切なサイズで表示されていないという問題がありました。

普通、WordPressでは、画像をアップロードするとサムネイル用の小さな画像がいくつかアップロードされていると思います。参考画像で使われているような記事一覧や関連記事の表示に使われている小さなサムネイルには

-160×90.jpg

-150×150.png

このように画像URLの後にサイズが入って適切なサイズの画像が読み込まれていると思います。

僕のブログではこれがサムネイルでもフルサイズの画像が読み込まれていました。関連記事が5個あったら小さな画像が表示されるところフルサイズの画像が5個も表示されていたんですね( ;∀;)

えらいこっちゃです。

同じ画像で、フルサイズで80KBで表示されている画像が、サムネイルサイズだと8KBとなんと!その差は10倍

表示していたブログは6個の関連記事と次の記事へのリンクが2つで計8つだから、64KBで済んでいた読み込みが640KBも読み込んでいたんですw

サムネイルサイズが大きかった原因

最初は、uplordsフォルダにサムネイル画像が作成されているかどうかも確認せずに「そうだ!サムネイルが作成されていないんだ!」と思って

「Regenerate Thumbnails」というサムネイルを後から作ってくれるプラグインを使ってみたところ

エラー: 元の画像ファイルが https://hogehoge.info/wp-content/uploads/2021/10/hogehoge.jpg の uploads ディレクトリで見つかりませんでした。見つからない場合、新しいサムネイルは生成されません。

というエラーがでます。画像は表示されているのに画像が見つからないとはどういうことだ?と思い何度かやってみたけど結果は同じでした。アップロードフォルダには画像は確かにあり、そもそもプラグインを使うまでもなくサムネイルも作成されていました。

これにはWordPressの仕様が関わっていたようです。

WordPressにはアップロードには2つの方法がありますよね。メディアにアップロードする方法と記事に直接挿入する方法です。どちらにしても同じようにuploadsフォルダに保存はされサムネイルも作られます。記事にアップロードした画像は記事と画像が「記事Aに使われているのは画像B」という風に親子関係を持ってデータベースに登録されていますが、メディアからアップロードして記事に使った場合は記事と画像が親子関係を持っていないようです。

「Regenerate Thumbnails」ではアイキャッチとして使われている画像からサムネイルを作成してくれますが、「記事Aに使われているのは画像B」という情報からサムネイルを作っているので宙ぶらりんになっているメディアの画像からはサムネイルが作れなかったんだと思います。

関連記事にも同様のことが起こっているのでしょう。僕のまとめサイトは大量の記事を投稿していますので、最初に使われている画像は直接メディアにアップロードして同じ画像を使いまわしています。

これもAMPに対応していた時代の名残なんですが、AMPでは1200ピクセル以上の画像を使っていないと「推奨サイズより大きい画像を指定してください」という警告を受けてしまいます。

大きな画像を記事ごとに投稿していたらサーバー容量を圧迫してしまうので節約のためにこのようにしました。

サーバー代高いんです( ;∀;)

サムネイルサイズを呼び出す方法

ありがたいことに僕の使っているテーマcocoonでは色々とカスタマイズしやすいように作成されているようなので、助かります。

cocoonでは、親テーマと子テーマ、二つのテーマが使われていますが、カスタマイズは子テーマを使用するようになっています。

こうすることで親テーマがアップロードされた場合でも子テーマを編集する手間がなくなります。親テーマを編集してしまうとアップデートの際にまた編集することになるのでかなり面倒です(体験談)

/public_html/hogehoge/wp-content/themes/cocoon-master/tmpに色々とファイルがはいっていますが、同じように子テーマにtmpフォルダにファイルがあった場合、そちらの中身が優先して読み込まれるのも便利です。

/public_html/hogehoge/wp-content/themes/cocoon-child-master/tmpというフォルダは子テーマにはないので作成します。

親テーマにcocoon-master内にあるrelated-entry-card.php(関連記事ファイル)とpager-post-navi.php(ページングファイル)を子テーマの作成したtmpにも入れます。

pager-post-navi.phpでは35行目と51行目付近

get_post_navi_thumbnail_tag( $prevpost->ID, $width, $height ).

この部分が画像になっていたので、35行目

$thumimg = get_post_navi_thumbnail_tag( $prevpost->ID, $width, $height );

if (!preg_match("/-[^0-9]x[^0-9].(jpg|png|gif)$/u", $thumimg)){
$thumimg = preg_replace("/.jpg/msi", "-120x68.jpg", $thumimg);
$thumimg = preg_replace("/.png/msi", "-120x68.png", $thumimg);
$thumimg = preg_replace("/.gif/msi", "-120x68.gif", $thumimg);
}
echo "$thumimg";

 

このように置き換えました。51行目はこうです。

$thumimg = get_post_navi_thumbnail_tag( $nextpost->ID, $width, $height );


if (!preg_match("/-[^0-9]x[^0-9].(jpg|png|gif)$/u", $thumimg)){
$thumimg = preg_replace("/.jpg/msi", "-120x68.jpg", $thumimg);
$thumimg = preg_replace("/.png/msi", "-120x68.png", $thumimg);
$thumimg = preg_replace("/.gif/msi", "-120x68.gif", $thumimg);
}

echo "$thumimg";

 

related-entry-card.php(関連記事ファイル)では17行目付近にある

echo get_the_post_thumbnail($post->ID, get_related_entry_card_thumbnail_size(), array(‘class’ => ‘related-entry-card-thumb-image card-thumb-image’, ‘alt’ => ”) ); //サムネイルを呼び出す

この部分を同様に置き換えると縮小されたサムネイルが表示されます。普通に記事に画像をアップロードしていてサムネイルが表示されている記事もありましたので正規表現で、サムネイルが呼び出されていない箇所にはサムネイルが表示されるように置き換えています。

 

まとめ

今回は、自分で作り出した、サムネイルが使われていないという不具合を修正してみました。このぐらいだと、これでサックサクになったぞーっと言えるほど劇的な変化はありませんでしたが、かなりリソースの節約になったのではないかと思います。

カルーセルも同様にやらないといけないんですが、カルーセルは高速化を考える場合評判が良くなさそうなので、使うことはないと思いますのでそのままにしています。

そしてトップページからアクセスする記事一覧もサムネイルが使われていないんですが、entry-card.phpを子テーマのtmpに入れるとエラーが出ました。

親テーマをすれば同様のことができましたが、まとめサイトの場合、記事内にアクセスが多くて記事一覧へのアクセスは少ないのでこのままにしときます。

コメント

タイトルとURLをコピーしました