chlonolog

web, digital gadgets, and more.

サイトを軽くしたいのです

そういえば以前LESSエディタはCrunchかBracketsかという話をしていましたが、「Compressするよりgzip圧縮した方がいいんじゃねえの?」という記事を発見したのでそうすることにしました。よって、エディタはBrackets一択になりました。
圧縮についてはMinifyというアプリがありまして、ドラッグ&ドロップで一発圧縮してくれるので便利です。gzipつくるだけなら別にKekaでもいいんですが。
メイン機能のCompressについては、前記事で書いた通りヘッダが削れてしまうと困る理由があるのでしていません。 .htaccessの設定はこんな感じに。


    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME} !\.gz$
    RewriteCond %{REQUEST_FILENAME}\.gz -s
    RewriteCond %{REQUEST_FILENAME} \.js$ [OR]
    RewriteCond %{REQUEST_FILENAME} \.css$
    RewriteRule .+ %{REQUEST_URI}.gz
    
    <FilesMatch "\.css\.gz$">
      ForceType text/css
      AddEncoding x-gzip .gz
    </FilesMatch>
    
    <FilesMatch "\.js\.gz$">
      ForceType application/x-javascript
      AddEncoding x-gzip .gz
    </FilesMatch>
    
    <FilesMatch "\.html\.gz$">
      ForceType   text/html
      AddEncoding x-gzip .gz
    </FilesMatch>

Wordpressで使ってる設定が入ってるIfModule内にRewrite〜の行を書いたら動かなかったりしましたが、外に置いたら動きました。記述としては間違っていなかったはずなので、若干釈然としません。
ちゃんと圧縮されているかどうかはHTTP Compression Testを使うと便利です。使わなくてもデベロッパーツール(うちはChrome使用なので。FirefoxならFirebug辺り)でレスポンスヘッダを見れば分かりますが。Content-Encoding:gzipがあればオッケー。
ついでにブログ内でシンタックスハイライトを綺麗に表示するように、Prismを入れてみました。Wordpressのプラグインもいろいろ試したのですが、動作が重くなるばかりで気に入るものがなかったのです。Lightboxのプラグインも結局Lityに変更してしまいましたし、こういった方法で実装していく方が軽くてスマートかも知れません。
必要のない記事を表示する時まで読み込ませたくはなかったので、少々泥臭い方法で切り替えしています。 具体的には記事にカスタムフィールド(Advanced Custom Fieldsを使っています)の真/偽チェックボックスを付け、PHPではこんな感じに。

functions.php

    $syntaxhighlight = 0;

footer.php

    /* 必要なときだけPrismを読み込む */
    global $syntaxhighlight;
    
    if ($syntaxhighlight == 1)  ?>
    <link rel="stylesheet" href="<?php echo get _stylesheet _directory_uri(); ?>/css/prism.css">
    <script src="<?php echo get _stylesheet _directory _uri(); ?>/js/prism.js"></script>
    <?php } ?>

記事読み込み部分

    global $syntaxhighlight;
    if (get _field('syntax _highlight')) {
      $syntaxhighlight = 1;
    } 

そもそもPrismにこれをやるぐらいなら縦書き表示に使用しているNehanの切り替えを入れるべきだろ、ということでそちらも設定をしてみました。
こちらの場合は、小説の個別ページと単体ページのみ読み込むようにしてあります。必要以上にヘッダへ読み込みまくるのは出来るだけ避けたいところ。
Prismと同じようにフッタにしようかと思ったのですが、nehan.jsを読み込んでいるにも関わらず分割してあるnehan設定用jsで「nehanなんぞ知らん」とエラーを吐くので、条件分岐でヘッダへ吐くことにしました。

    <?php
    if (istax('text-tag')) /* タクソノミーアーカイブ */ {}
    elseif (hasterm('', 'text-tag') || ispage()) /* タクソノミー個別・ページ */ { ?>
      <!-- nehan start -->
      <link charset="utf-8" rel="stylesheet" type="text/css" href="http://nehan.googlecode.com/hg/nehan5.css" />
      <link charset="utf-8" rel="stylesheet" type="text/css" href="http://nehan.googlecode.com/hg/jquery.nehan.css" />
      <script charset="utf-8" type="text/javascript" src="http://nehan.googlecode.com/hg/nehan5.min.js"></script>
      <script charset="utf-8" type="text/javascript" src="http://nehan.googlecode.com/hg/jquery.nehan.min.js"></script>
      <!-- /nehan end -->  
    <?php } ?>

先にタクソノミーアーカイブの条件が入っているのは、hasterm()するとアーカイブページも一緒に引っかかっちゃうからです。そっちは要らない。

これだけ小細工をしてもデベロッパーツールで確認すると、一番重いのはjsでもcssでもなくwebフォントなんですよね。これだけはどうにもなりません。圧縮も効果的じゃないしなあ。

コメント

© 2018 chlono