今まで主にサイトのエラーの修正などを手掛けてきましたが、多くのサイトの制作者は表示ができればいいという考えのようです。
デザイン主体でサイトを作っているのがよくわかります。
顧客は素人ですからデザインの綺麗なサイトが出来上がればそれで満足しています。
だから私の仕事も成り立つわけですが、後になってから「PageSpeed Insights で遅いぞと言われた。」「何とかしてくれ。」という依頼が来るのです。
最初からその辺のことも対処していればいいのですが、そうならない訳はホームページの作成料金が安くなってきていることに原因があると思います。値段をたたかれるから手抜きする。建築における手抜き工事と同じです。予算をけちると落とし穴にはまります。
PageSpeed Insights で遅いぞと言われたら
ワードプレスの場合は翻訳ファイルをキャッシュするとか・・・
表示を遅くする原因の一つが、表示に関係のない部分のファイルをガンガン読み込むからです。
PageSpeed Insights では、画面内に表示される部分の css に限りヘッダーに書き込み残りのスタイルは後で読み込むことを推奨していたと思います。
他にもファイルを圧縮するなど表示を早くする方法はいくつもありますが、詳しく書こうと思うと横道にそれますので、別の機会にします。
今回はjavascript,cssについて説明します。
footer.php
//jsファイルはhtmlの最後で読み込みます。あちこちにそれも何回でも書いてあるサイトは多いのが実情です。
//下記の記述は html の読み込みが終わる直前に、スタイルシートを読み込むための記述です。
<script>
var link = document.createElement('link');
link.href = '/wp-content/themes/your-theme/styles.css';
link.rel = 'stylesheet';
link.type = 'text/css'; //html5の場合は省略してください。
document.getElementsByTagName('head')[0].appendChild(link);
</script>
おまけ
コンタクトフォーム7をはじめプラグインの場合は、必要の無いスタイルシートの読み込みを停止します。
いい換えれば必要な時だけ読み込めばいいのです。
functions.php
//必要なページはお問い合せのページですがcssは各ページで読み込まれています。
//下記の記述はお問い合せ以外のページで読み込みを停止します。仮にページスラッグをcontactとしています。
function tn_dequeue_style() {
if ( !is_page( 'contact' ) ) {
wp_dequeue_style( 'contact-form-7' );
}
}
add_action( 'wp_print_styles', 'tn_dequeue_style', 100 );
ついでに js の場合
functions.php
function tn_deregister_scripts() {
if ( !is_page( 'contact' ) ) {
wp_deregister_script( 'contact-form-7' );
}
}
add_action( 'wp_print_scripts', 'tn_deregister_scripts', 100 );
必要の無いファイルの読み込みも阻止できました。