CSSやJavaScriptを連結して高速表示するテーマの作り方 concrete5

concrete5には、cssやJavaScriptを連結して表示する機能があります。管理画面で「システムと設定」「キャッシュとスピード設定」と進むと、「cssとJavaScriptキャッシュ」という設定があります。この設定を有効にすると、ページで使用するcssとJavaScriptを連結&圧縮してくれます。

テーマのcssとJavaScript

テーマで読み込むcssとJavaScriptは、テーマのフッターなどで、

<link href="<?php echo $this->getThemePath(); ?>/css/style.css" rel="stylesheet">
<script src="<?php echo $this->getThemePath(); ?>/js/script.js"></script>

のように記述すれば、読み込むことができます。しかし、このように読み込んだ場合は、「cssとJavaScriptキャッシュ」の対象にならないようです。(バージョン5.7.5.8の場合。)
なので、テーマのフッターに直接書くのはやめ、「cssとJavaScriptキャッシュ」の対象になるように記述してみます。

パッケージのコントローラ

パッケージのコントローラ(controller.php)では、

    public function on_start()
    {
        $al = \Concrete\Core\Asset\AssetList::getInstance();
        $al->register(
            'css',  'sakan-bootstrap', 'themes/sakan/css/bootstrap-modified.css', array(), 'sakan'
        );
        $al->register(
            'css',  'sakan-style', 'themes/sakan/css/style.css', array(), 'sakan'
        );
        $al->register(
            'javascript',  'sakan-bootstrap', 'themes/sakan/js/bootstrap.min.js', array(), 'sakan'
        );
    }

のように記述します。(テーマはconcrete5日本コミュニティで作成中のsakanテーマです。弊社のウェブサイトも、このテーマをベースに作成してます。)
テーマで使用するcssとJavaScriptを、登録する処理です。これに加えて、読み込む処理を記述する必要があります。

読み込む処理は、テーマのpage_theme.phpに記述します。

    public function registerAssets() {
        ...
        $this->requireAsset('css', 'sakan-bootstrap');
        $this->requireAsset('css', 'sakan-style');
        $this->requireAsset('javascript', 'sakan-bootstrap');
    }

のように記述します。こうすると、コントローラで登録したファイルを読込することができます。

SEO対策に良い?

グーグルは、ページ速度を検索結果の評価基準の一つにしているらしいです。ただ評価に入れているとはいえ、コンテンツや被リンクと比べると重要度はかなり低そうです。

ただ、ユーザー体験としては、表示速度が速いに越したことはないですから、このような高速化施策は行っておいたほうが良いでしょう。

記事公開日: 2016年08月03日
#

ホームページの特定のページを保存しておいて、後から見たい... 詳細はこちら

#

concrete5本体はMITライセンスですが、テーマやアドオンは別... 詳細はこちら

#

画像をドラッグドロップするだけで画像挿入できます。 詳細はこちら