Insightsでトップの項目に上がる「次世代フォーマットでの画像の配信」。なんやねんそれ久しぶりにブログ界に出入りした僕の正直な感想でした。思われた方は僕だけじゃないはず。次世代フォーマットでの画像配信の対策は色々とネットにはあるんですが、AFFINGER5で対策されている方の記事に出会うことがなかなかできず(されていらっしゃる方がおられたらごめんなさい)だったら人柱的にAFFINGER5ユーザーの僕が試してみるのも価値があるなと挑戦した結果、スコアが大幅改善したので以下に当てはまるAFFINGER5ユーザーの方はどうぞ!次世代フォーマット化をお勧めするサイト画像を多用している短縮できる推定時間が5秒以上ある何を試してもスコアが上がらないちなみに僕はこういうのに詳しくない人間なので、この対策が今後どういうリスクがあるのかはわかりません。色んな編集を重ねると、思いがけず大切なブログが表示されなくなることもあります。このエントリーでは最重要のfunction.phpや.htaccessに変更を加えるので、面倒でも必ずコピーしてデスクトップに保存するなど、バックアップと自己責任でお願いします。imagesAutoptimize4.WebPへ画像を変換する方法オンラインで変換Photoshopで変換5.なぜこんなにも最強テーマのAFFINGER5が遅いのか6.まとめと個人的主観AFFINGER5がWebP変換でスコア驚異の34点アップ!Googleから提示される数ある次世代フォーマットの中から今回はWebP(ウェッピー)をチョイス。Insightsによるスコアは平均でモバイルが30点台、PCは90点台です。イカツすぎる(泣ネットで調べてみるかぎり平均的にPC速度のスコアの方が高いようですが、酷い時はモバイル29点/PC97点と、僕のケースだと圧倒的にモバイルが致命的すぎる状況でした。そんな底辺の状況でWebPへの画像変換をすると、まさかの34点アップの67点!その画像圧縮率は68%!驚異的なスコアアップとなり、自分でもかなりビックリした結果となりました。この驚異的なスコアアップの理由ですが、僕の場合は次世代フォーマットで配信することで短縮できる推定時間が18秒という、とてつもない数字だったのでWebPへの画像変換が驚異的なスコアアップ=Googleの評価に繋がったとのだというのが実感です。特徴として画質を落とさずにJPEGよりもさらにファイルサイズを小さくすることができます。Googleが開発してる手前、各ブラウザの思惑もあってなかなか浸透しなかったようですが、SafariがOS10以降で表示可能となったことに端を発して表舞台に現れました。InsightsによるざっくりとしたGoogle推奨次世代フォーマット一覧です。XRは対応ブラウザに偏りがあり、唯一SafariとChromeに対応している次世代フォーマットがWebP。Firefoxはv65で対応、Edgeはv18で対応ということなので、webの次世代画像フォーマットはWebP一択といったところがネットの評価。かなりのPV数を叩き出しているブログであれば多数のブラウザへの対応を考えなければならないと思うので、なかなか次世代フォーマットへの変換は踏み切りにくい所ですよね。Makananiaのアクセス状況では現状FirefoxとEdge、IEを切り捨てる形でも問題ないので採用してみました。不安な方がいらしたらこのブログはWebP画像を配信しているので、このブログの写真が見えてるってことは、今お使いのブラウザではWebPを表示できてるってことになります。Googleの評価基準が、今後もウェブサイトの運営基準の一側面であるのは事実なので、Appleが表示可能となった以上、各ブラウザが完全対応するのは時間の問題でしょう。今回その存在を知り、こうやって文章を作る時に「うぇっぴー」と打つと、ちゃんとiPhoneの変換候補でWebPと出てくるほどメジャーなんですね。optimizerで変換ワードプレス内においてのWebPへの変換方法ですが、ワードプレスは現在WebPでのメデイア保存ができないので、プラグインを使ってWebPへの画像変換を行います。optimizerこれ一本で解決します。写真の通りにチェックを入れて変更を保存するだけ。次に.htaccessに記述します。プラグインからリライトルールで挿入することもできますが、色々な方の記事を読ませてもらった平均だと、直接自分で.htaccessに記述するのが良さそうだったので、写真のように表示される以下のコードを.htaccessの一番下へ記述します。契約サーバー経由でも、FTP経由でも大丈夫です。Xサーバーであればサーバーパネルから編集することが可能です。.htaccessはfunction.php同様ブログを表示させるのにとても重要なファイルです。コーピーしてデスクトップに保存しておいてください。【再最適化】にチェックをいれてスキャンすればWebPに変換してくれます。これでは晴れて次世代フォーマットでの画像配信が完了です。Insightsでスコアをチェックしたら大幅に改善されてると思います。次世代フォーマットのWebPによる画像配信に至るまで、対策やプラグインを色々試してみましたが、僕のケースだと一向に改善されませんでした。WebPが次世代画像配信に適してるとはいえ、今はまだそれなりのリスクはあると思います。僕が試したことを以下にまとめましたので、これらを試してみて、それでもスピードテストのスコアが改善れない場合はWebP導入を検討してもいいかもしれませんね!【追記2019/1/27】AFFINGER5を使ってる方はこちらのブログが素晴らしく、とても参考になります。これだけで平均6ポイント前後スコアアップしました。WING(Affinger5)で不要なWEBフォントを読み込ませないようにする方法WING(Affinger5)でスライドショーのCSSとJavaScriptを削除する方法こういう良質な記事こそ検索トップに出てきてほしいですね。←切実PHPのバージョンアップ契約しているサーバーから行えます。簡単なことから始めたい僕は、早速Xサーバーにアクセスしてバージョンアップだ!と意気込みましたが最新の7.2.6でした。期待無念すぎPHPのバージョンアップだけでも大幅に改善するケースもあるということなので、使っているブログテーマと相談して試してみてください。gzip圧縮これは2〜3ポイントアップの効果があったので採用中。.htaccessの一番下に以下を記述します。.htaccessは重要なファイルです。記述前にオリジナルをFTP経由でダウンロード→デスクトップに保存しておいてください。application/vnd.ms-fontobjectJavaScriptをフッターで読み込みこれも効果があったんですが、自分が作った目次が動かなくなるなどちょっとした不具合があったのでコードを消しました。試したい方はfunction.phpの一番下に以下を記述するだけでOK。こちらもfunction.phpを触るので万が一に備えてFTP経由でファイルをダウンロード→保存しておいてくださいね。僕はカスタムに関してはど素人。いつでもCSSを戻せるようにデフォルトのCSSをコメントアウトして残す癖があったんですが今回思い切って削除。これも一説には多少なりとも効果はあるとのことなので試してみました。imagesに切り替えました。optimizeを使うことになったのであえなく削除。競合するのでこのプラグイン2つを同時に使うことはできません。こちらのブログで詳しく解説されています。モノグロ|monogrowmonogrow.comAutoptimizeAutoptimizeはStinger時代から相性が悪かったので避けてきましたが、最後の砦と言わんばかりに今回導入。それほどスコアが悪かったので(泣しかし案の定表示崩れを起こしたことと、スコアもそこまで伸びなかったのでプラグインを削除。この時点でほぼ打つ手がなくなったので、WebPへの画像変換→圧縮に乗り出しました。Autoptimizeを試したい方はこちらのブログが参考になります。5の表示を速くしたい。現在ワードプレスのメディア保存ではWebPを受け付けてくれない旨はお伝えしましたが、いずれはここもアップデートされるず。なるとWebP形式の画像を保存できるので、画像をWebPへ変換しておきたいケースもでてきますよね。現状それが可能な方法は以下の2通りがあります。オンラインで変換まずオンラインが一番確実な方法です。こちらのサイトはあらゆる画像フォーマットへの変換に対応してる点とシンプルなUIが使いやすい点が良かったです。Convertioconvertio.coPhotoshopで変換Photoshopを持っている人はプラグインを使用することで、保存形式にWebPが追加されます。以下からプラグインをダウンロードして解凍。http://telegraphics.com.au/sw/product/WebPFormatMacなら「アプリケーション」→「Photoshop」→「plugin」の中にドラッグ&ドロップ。Photoshopを起動すると保存形式に追加されています。CCなのですが、CC用だと保存形式にWebPが追加されませんでした。試しにCS6用をダウンロード→解凍してpluginに追加したらWebPが追加されました。同じ症状の方がいらしたら試してみてください。2017はデフォルトでWebPは保存できるようになっています。こんなにも最強テーマのAFFINGER5が遅いのかAFFINGER5はデフォルトではスピードテストでも高得点を叩き出すテーマです。AFFINGER5をテーマとして使われている方のサイトも参考にさせてもらいましたが、皆さんここまで致命的な方はおられなかったので、シンプルに僕が色々といじりすぎた結果なのだと思います。トップページもふくめてJETを使わずいじり過ぎました。スピードテスト・スコアップのために色々と試しましたが、結局のところ僕は「スピードなので、デフォルトに戻す気もありませんし、やるだけのことやってこの得点ならいいかなってのが個人的な感想。タイトルとか内容で検索上位を狙っていこうと思います(笑まとめと個人的主観WebPはGoogleが開発した静止画フォーマットです。WebPを推し進める一貫としても「次世代フォーマットの配信」を評価のトップに置いたうまいやり方だなぁというのが正直な感想です。踊らされてる感も否めませんが、今求められるのはウェブサイト運営者の姿勢のアップデートで、その先にはサーバー負担の軽減や、速度アップなど、結果的に誰もがその恩恵を受けることのできる変革のタイミングだと受け止めてます。純粋にWebサイトとして残っていくためにもGoogleの評価が常に基準になりますし、これからもGoogleを軸にしたウェブサイトのアップデートに追われることは変わらないので、柔軟に対応していきたいと思います。^しかし、今回の件でネットにだいぶ潜りましたが、調べた限り早い方は2010年あたりからWebPへの変換記事を書かれてる方がいて、時代を先読みしている姿勢に感服の至りでした。今回もいろんな方に助けていただきました。最新記事TA2OWMakanania(マカナニア)管理人。スニーカー・Mac・沖縄マニア。pay対応の作りやすいクレジットカードランキングTOP52020/02/05航空券とホテル代を安くする方法を年6回以上旅行する僕が大公開!TA2OWの記事をもっと見るauthorあわせて読みたいPREV徳島県で海鮮料理ならびんび家で決まり。Mojaveアップデート後のおすすめの機能と設定こちらもおすすめ2019/02/01【AFFINGER5(アフィンガー5)】高速化のまとめのまとめ決定版2014/01/14moreタグで記事内にアドセンスをセンタリングで設置する方法[Stinger3and5]2020/01/29AFFINGER5のデフォルトの機能を使って目次の表示/非表示を切り替える方法2015/11/23インスタグラムの投稿写真をiPhoneでブログに埋め込む方法2013/12/29htaccessなどの非表示ファイルをMacとCyberduckで簡単に表示させる方法!!2019/01/125万PVから0PVへ、そして1万PVまで10日で復活!その時に感じたこと、その時したこと。AFFINGER5.。