Concrete5で構築したWebサイトの高速化とTinifierアドオンを入れて嵌った話


初投稿がなんとも言えない感じの記事なのはどうなんでしょうね?

タイトルそのままの内容で、オープンソースCMSであるConcrete5で構築したサイトの高速化のためにやったことと、その際に試したTinifierというアドオンでこっ酷い目にあったというお話。

ちなみにこれは5.6系を用いたサイトで試したことです。5.7系?シラネ(

Concrete5とパフォーマンス

コーポレートサイトなどを構築するのが得意な汎用CMSであり、ページを見たまま編集できる直感的な「編集モード」やカスタマイズ性の高さが売りのConcrete5。
自分はこのCMSでいくつかサイト構築した経験があるのですが、基本けっこう重い。
デフォルトでデータベースから読み出す表示内容をキャッシュとして保存することで動作を高速化する機能が付いているのですがそれだけでは全然足りません。

また、他のCMS同様<head>内で各種JSを読み込んでる上に圧縮もされていません。
特にこれはグーグル先生的には相当問題らしくGoogleのWebサイトの速度計測及び改善案の提案をしてくれるPageSpeed Insightsというサービスで計測すると、上記の件に関して「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」「JavaScript を縮小する」という項目でこっぴどく怒られます(特にモバイル)

Tinifier導入。そして苦行の始まり

そこで、concrete5で構築されたWEBサイトのJavascriptやCSSを最適化してくれる「Tinifier」というアドオンの導入を検討しました。

で、早速導入。

するとどうでしょう、トップページに設置してあったJqueryを利用したスライドショーが動かないではありませんか!
しかし、これは想定済み。導入前に調べた時に、このアドオンのJS最適化機能をONにした場合、JSを利用したプラグイン等が動かない場合があるのでこの機能はOFFにした方がいいという記述を見つけていたので、慌てず騒がずJS最適化をOFF。

これでスライドショーは無事復活。
ぱっと見その他の部分も特に問題ないように見えたのですが…

ブロックCSSが…!?

concrete5にはブロックCSS(ブロックのデザイン)といってGUIを通じてブロックごとにstyleを適応できる機能があります。
この機能で適応したstyleはインラインCSSとして書き込まれます。

なので、基本的にはコードが汚くなるというかキモくなるので使わない機能なのですが、1つのページで1箇所1回こっきりしか使わないようなデザインを後になって適応したくなったときには、いちいちmain.cssをFTP通じて編集したり何なりとしなくていいのでちょっと便利だったりします。他にもHTMLやCSSがわからないお客さんでも簡単にデザインを変えれるので喜ばれたりするかも?(この機能のせいで割りと全体のデザインを崩されて泣きたくなることも多いのですが…)

で、この機能を使った箇所が1,2箇所ほどあったのですが、これが「Tinifier」を有効化したことによって何故か無効化されているじゃありませんか!

えー、JSだけじゃなくてインラインCSSも動かないんかい…このアドオン導入は諦めるしか無いな…
と、導入を諦めアンインストール。

が、しかし

何故かアンインストールしたのにブロックCSSが動いてない!!!!

さすがに意味がわからない…。

と言うか、concrete5ってアドオンとかは別フォルダ別ファイルから本体もといコアファイルをoverrideして機能を実装する方式で、本体を汚染することは無いはずなのですが…

アンインストールしても、直らないってことは本体汚染してんじゃね???

もちろん、キャッシュの削除等考えられる対策は全てとったが、変化なし。
うわ、これどうしたらいいんだ、concrete5再インストール?め、めんどくさい…
という感じで途方に暮れていたんですが、ちょうどその頃5.6系で起きていた、IE11で編集モードに入りテキストブロッグを追加すると編集ができない問題を解消したバージョン5.6.3.3が公開されたところだったので、再インストール代わりにアップデートで本体ファイルを上書きしちゃえば直るんじゃね?という安易な考えでアップデート。

すると、ブロックCSSが適応されていなかったところが適応されており、その他特に問題なく直っていることを確認。ようやく一件落着。

concrete5のアドオンは本体汚染の心配はまずなく、どんどん気になるアドオンを気兼ねなく試せる!!って考えてたんですけども、認識を改める必要があると痛感しましたね…
というか、本体おもいっきり汚染とかテスト環境でも対応めんどくさすぎるんじゃ()

まとめ

concrete5でも最適化などコア部分に手を加えるようなアドオンについては導入には慎重になるべき(

思いの外記事が長くなってしまったので他にやった高速化については別の記事にしますかね…。