ホームページ制作のアレ

最近すっかりメジャーになったwordpress用の問い合わせフォームプラグインMW WP Form。その機能の一つに、問い合わせデータをデータベースに保存し、管理画面から閲覧できるというのがあります。

で、保存したデータを管理画面で閲覧できるだけでなく、CSVでダウンロードできるのもポイントの一つですが、ある日突然そのCSVダウンロードボタンが消えて困った思いをした事はありませんでしょうか。
本日、その原因のひとつを突き止めました。原因はずばり、これまたメジャーどころのバックアッププラグイン「BackWPUp」の出力するcssでした。
修正方法ですが、
plugins/bakwpup/assets/css の中に backwp.min.cssがありますので、その中の
#wpfooter{overflow:hidden}
こちらを削除してしまえばOKです。※.min系ですので、改行なしで横にだーっと一列に記述されていますが、一番後ろの方にあります。
#wpfooterは管理画面の共用idですので、他にも思い当たるフシがありましたら、上記のcssを疑ったほうが良いかもしれません。

Tweet

2つ前の記事「CSSスプライトは意味がなかったのかもしれない」で、js等の読み込みはgoogleの読み込み速度フラグには関係ないようだ…という記事を紹介してみましたが、やはり気になったのでその後を追ってみました。
すると、
http://googlewebmastercentral-ja.blogspot.jp/2014/05/understanding-web-pages-better.html
googleの公式で、はっきりと「javascriptを実行して検証している」と書かれていました。
実行しているという事は読み込んでいるという事です（当たり前）
したがって、上記の記事は半分は誤報だと確定されました。元記事にも追記しておきます。

Tweet

一個前のエントリにも書いた通り、「googleが順位づけの要素のひとつに、ページの読み込み速度を参考にしているのではないか」という話ですが、その強力な根拠となるのが、googleが提供しているPageSpeed Insightsというサービスです。
簡単にいうと「そのページがどれくらいの速さで読み込めるか」と「おっそい場合はどこを改良すれば良いか」を教えてくれるサービスです。
読み込み速度をランクづけの参考にしていなければ、わざわざこんなサービスを提供しませんよね、という事です。
※ちなみに弊社はcssやjsを統合したり、htmlの中に展開したりという事はメンテナンス性を損ねるためしたくない。ページスピード系プラグインはキャッシュ関連の処理がイヤ、ということでスコア結構わるいまんまです。

で、このサービスで表示される改善点のうち、最もさっくりと改善できるのが、「画像のロスレス圧縮」です。

こんな感じで警告がでるやつですね。

対処方法は色々あるのですが、最もお勧めなのが「別にロスレスじゃなくてもよくね？」という事で、「ロスレス圧縮」よりも更に圧縮率のよい「ロスあり圧縮」の
https://tinypng.com/
こちらのサービスを使う方法です。
使い方はもうそのみたまんま

ここに画像をドラッグ＆ドロップするだけ。
中身にもよりますが、透過ありのpngなら、今までの経験からいって脅威の平均6割超えの圧縮をしてくれます。

———-
なお「ロスレス」とは「圧縮によるロスがない」つまり、「元の画像の品質を一切損ねないから何回でもやり直しできるよ」的な意味です。
が、
普通「何回でもやりなおしできる」意味はありません。圧縮前のデータを別に保存しておけばいいのですから。
なので、上記のサービスがお奨めなのです。

Tweet

2015/03/23 追記いたしました

googleが順位づけの要素のひとつに、ページの読み込み速度を参考にしているのではないか、という話は良く言われます。（※断定ではありません。断定できるのはgoogleの中の人だけ、というのが弊社のスタンスです）
そこで読み込みの高速化を図るため、cssスプライトを使ったり、ページスピード系の処理でcssをhtmlの中にぶちまけたり、と色々な努力があちこちでされているわけですが、
昨日、それらを全てひっくり返すような研究結果が発表されました。

http://web-tan.forum.impressrd.jp/e/2015/03/03/19447

要約していいますと、
今まで→html、css、js、img全て読み込んだときの速度を判定していた、というのが定説
今回の研究→htmlだけで判断しているぽい

となります。

繰り返していいますが、正確なところは「googleの中の人しかわからない」ので上記の研究結果もまた憶測なのですが、こちらが本当だとすると、CSSスプライトなんて作業時間のムダ、見づらいのを我慢してjsのコードの改行とかとっていたなんてお疲れさん、となります。

ですが、googleのPageSpeed Insightsではcssスプライトはともかく、jsの読み込みタイミングなども判定しているので、当然jsを組み込んだレンダリングも計算していると思っていたのですが、なかなか興味深い記事で、手があいたら追ってみようかと思います。

Tweet