あれもプラグイン、これもプラグイン、きっとプラグインそれもプラグイン。
毎度毎度、サイトを軽くするために四苦八苦しているかたせうみです、こんにちは。
重いサイトを軽くするため、画像遅延のプラグインを入れたり圧縮したり、色々試行していると、突然画像が出なくなったり、不具合が起きたりしませんか？
今日は私が使っているテーマ「STREETIST」や「STILE」と相性が悪かったプラグイン等を記事にしています。
「SANGO」でも画像が出なくなったりしたことがあるのですが、プラグインの名前を忘れてしまいました・・。
テーマと相性悪いのか、プラグイン同士相性が悪かったのか分かりませんが、とにかく、『急に画像が出なくなった』とか『アフィリエイトリンクの画像が出なくなった』なんて事で困った人は、試しに読んでみてね。
あんまりはてなとは関係ないです、ごめんなさい。
- 画像は全てWebPにせよ！
- 「STREETIST」や「STILE」と相性が悪かったプラグインはこれ
- という所で、STREETISTやSTILEと相性の悪かったプラグイン
- 結局、画像圧縮プラグインで使ってるのは「Imagify」
画像は全てWebPにせよ！
先日、「画像のWebP使用を開始せよ」と、サイトのメンテナンス等をお願いしている友人から連絡がありました。
（メンテは一応有料）
WebPとは、Googleが開発している静止画像のフォーマットです。
PNGとか、JPEGとか、そういう感じのやつです。
Googleが開発という事もありますが、ファイルサイズが小さく、軽い画像で保存できるので、サイトの高速化に一役買ってくれる、次世代型のフォーマットです。
私が普段使っているお絵かきソフトも、既にWebPで画像保存ができるように対応済みになってました。
ただし、これまではサファリがその形式に対応していなかったので、今ひとつ普及していませんでした。
しかし！バージョンアップで遂に、サファリもWebP対応となりました。
これで、世の中の9割以上はWebPに対応していることとなりますので、いよいよ画像を変更するタイミングが到来したのです。
はてなブログではまだWebP画像のアップロードは出来ないみたいですが、そのうち対応されるのではないかと思っています。
で、Wordpressのプラグインはアップロード時に自動で画像を圧縮してくれるものがほとんどなんですが、中でも圧縮と同時に画像をWebPで保存してくれるタイプのものが今後の主流となると思い、Webp対応プラグインでその時を待っていました。
取り敢えず、どのテーマでも不具合は起きなさそうなTinypigは、WebP未対応？
話はちょっとそれますが、今日は相性の悪かったプラグインを記事にしています。
画像圧縮プラグイン、多分これならどのテーマでも大丈夫なんじゃないかと思うものをひとつ紹介しておきます。
「TinyPNG」
タイニーピング。
パンダのプラグインみたいな言われ方してますよね。
私が「はてな」に画像をアップロードする前にお世話になっているプラグインです。
有料版にしても年間2,800円程度と格安。
詳しくは以下の記事を参照してください。
【画像圧縮】Tiny PNGを有料版にしたら快適だった！ - うみブログ
タイニーピングは画像の圧縮専門なのでとてもシンプル。
他のプラグインは画像の遅延読み込みとかも併用されていたりするので、相性が悪いこともあるんですよね。
ただ、タイニーピングの場合、PNGやJPEG画像の圧縮専門で、WebP画像を生成してくれたりはしません。
時代がWebPに流れ始めてる今、今から入れるプラグインとしては、ちょっと時代遅れかもしれないですね・・。
圧縮率とかは多分高いと思うので、Webp対応していない「はてなブログ」等に使用する画像の圧縮におススメ。
「STREETIST」や「STILE」と相性が悪かったプラグインはこれ
「STREETIST」や「STILE」は、画像遅延がテーマに実装されています。
それを使うかどうかというのはカスタマイズで選べるのですが、せっかく実装されているのだから、とりあえず使いますよね。
そのせいかどうかわかりませんが、レイジーロードと呼ばれるような、画像遅延のプラグインや、画像遅延もカバーされているような画像圧縮ソフトとはあまり相性がよくありません。
詳しく検証したわけじゃないのですが、画像遅延のチェックをテーマ側で外しても、あるプラグインを入れると広告リンクが出なかったり、画像そのものが出なかったりすることがあります。
私は物販系のリンクが作れるプラグイン「Rinker」を使用しているのですが、このプラグインと相性が悪い可能性も考えられます。
「Rinker」は、こんな商品リンクを簡単に作れるワードプレス用のプラグインです。
この画面は「カエレバ」というサービスの商品リンクなのですが、コードが長いのと、リンクの生成にカエレバのサイトに行かなければならないのが玉に瑕でした。
「Rinker」は、記事の編集画面でちょいちょいっとこのリンクが作れるんですよ。
だから「Rinker」を外すと言う選択は今のところありません。
という所で、STREETISTやSTILEと相性の悪かったプラグイン
そんな訳で、入れてみたけどダメだったプラグインはこちらです。
「EWWWイメージオプティマイザー」
これ、結構使いやすかったし、一括最適化も簡単だった。
WebP画像も生成してくれる。
しかも、メディアライブラリから確認しやすくてお気に入りだったんだけど、スマホ表示では「Rinker」の画像が出なくなったので外しました。
「Smush（スマッシュ）」
アメコミというかピクサーみたいなキャラがかっこよくないですか？
画像の圧縮や遅延処理をしてくれます。
画像の圧縮と遅延読み込みがセットで出来るため、とっても便利なプラグインですが、これを使ったらやっぱり画像が出なくなった。
もしかしたら遅延読み込みをオフにすればよかったのかもしれないけれど、一度に圧縮できる量が少なかったり、WebPを生成するには有料版でないとダメだったりで、すぐに外した。
「image oputimizathion & Lazy Load」
なんかかわいいキャラクター。
画像の遅延読み込みもついてます。
（多分これがいけない）
ネットの評判なんかを見て入れてみたけど、スマッシュと同様の理由で画像が表示されなかったりした。
WebPが生成できるかは忘れましたが、説明にWebPって書いてあるからきっと生成してくれたんだろう・・。
そんな感じで、これらのプラグインもダメだった
画像圧縮に重きを置いたプラグインで試してみてダメだったのは以上です。
遅延読み込みがカバーされてるのは危険ですね。
次は、ページ速度を早くするために入れてみたけど、よくなかったやつ。
「Humming bird」
JavaスクリプトとかCssを縮小してくれたりするやつ。
上で紹介した「Smash」と同じ会社が開発してます。
セットで使える。
このヒーローっぽいビジュアルが魅力的なんだけど、全体的にプラグインの情報量が少なくて、プロ版が割高という評判。
設定も関係あるのかもしれないけど、やっぱり画像関連で不具合が生じた。
「Autoptimize」（これは今使っている）と、プラグインの定番「LazyLoad」。
そもそも、このテーマ「LazyLoad」とか要らないんですが、プラグインで更に早くなると思って使ってみたら、画像が出なくなった。
当たり前ですね。
いかにも早そうな「Autoptimize」は、hummingbirdと同じようにJavaスクリプトの圧縮なんかをしてくれるのですが、画像の遅延読み込みもしてくれるます。
遅延読み込みの部分はオン・オフできるようになっていて設定をオフにすればサイトの画像表示に影響はなく、サイトスピードも速くなったので今使ってます。
結局、画像圧縮プラグインで使ってるのは「Imagify」
結局、私が今使っている画像圧縮のプラグインは「Imagify」です。
アップロード時に画像を圧縮してくれて、WebPも生成してくれる。
さらに、画質は悪くなるけど「ウルトラ」といって、かなり画像を小さくすることもできるらしい。
ただ、日本語対応していないので、説明が分かりずらく、使うのにちょっと苦労するというか、私も今ひとつ分かってません。
が、一応サイトの画像はWebPになってるらしいので、良しとしましょう。
これ多分、レイジーロードがパッケージングされてないのでよかったのかもしれませんね。
他のプラグインも設定でうまくいくのかもしれないけれど、心が折れました・・。
詳しい人は、この記事見て『そんな事も分からないのか』と思うかもしれないけれど、
分からないんですよっ！！！
と、とりあえず今日はこんなところです。
他に入れているプラグインは、サイトマップを生成して自動的にGoogleにお知らせしてくれたり、セキュリティを上げたりスパムから守ってくれるようなやつです。
あと、キャッシュクリアーとか。
サイトの速度を上げるプラグインには、画像の遅延読み込み等をパッケージしているものも多く、テーマで設定できる場合は、どちらかにしないと画像が出なくなったりしますのでご用心。
今使っているテーマも、画像の遅延読み込みやCSSをインラインで読み込んだりしてくれるのですが、「プラグインでやる時は、チェックを外してくださいね」とちゃんと書いてあります。
闇雲に何でも入れればいいわけじゃないのがまた、悩むところですよね。
似たようなプラグインがバッティングすると、〇〇を止めてくれという警告が出たりもします。
またなにか情報がありましたら、記事にしたいと思います。
それでは。
