wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

      2018/04/05

こんにちは、管理人@SS_mshpです。

今回は、サイトを高速表示するCSSの書き方についてです。

管理人が昔使ってたfc2ぶろぐがあったので(fc2は外部ファイル読み込み・ヘッダーに書く、両方できる)、それを使って実験してみます(絵はイラストacさんからお借りしました)。

■fc2ぶろぐのスマホ向けテンプレと、表示速度について

■fc2のスマホ向けベーシックテンプレ


使ったのは、fc2ぶろぐのスマホ用テンプレートベーシックです。設定すると『/?sp』がついたスマホページを自動的に表示してくれます(レスポンシブ時にはoffにします)。基本的にベーシック選んで、ヘッダー部分に『img src=”○○” style=”display:block;margin:0 auto;”』でロゴ表示すればokです。

■表示速度について


そのテンプレのスマホ表示速度スコアを調べてみました。チューニングなしだとこんなもん(50点)です。

■fc2ブログで実験・ヘッダーにCSS全部書くと速くなるか

ここでは、管理人がもっていたfc2ブログで、スコアが微妙だったからやってみた『ヘッダーにCSS全部書く』のやり方を紹介します。

■1・まずはjavascriptを、htmlの最後のほうに移す


iphone用やメニュー用・解析タグなど、いろいろなjavascriptがヘッダー付近にありました。これをhtmlの最後のほうに移します。

理由は二つで、『ヘッダーがごちゃごちゃするのを避ける』と、『レンダリングブロックするjavascriptは後から読み込む』。つける前にスクショとってしまいましたが、async属性つけとくとokです(先日のpintarestのjavascriptにもありましたね)

■CSSを限界圧縮する

fc2のテンプレート編集ページの下のほうにあるCSSをコピーします。『CSS圧縮サービス』とかで検索すると出てくるサイトで、CSSを圧縮しましょう。コメントや改行が省かれた圧縮CSSが発行されます。

『CSS Minifier (スタイルシートの圧縮サイト)』
https://syncer.jp/css-minifier

なお、圧縮CSSはメンテが大変なので、『あとからデザインいじる可能性がある場合』は、『圧縮前のCSSもバックアップしておく』と安心です。

■ヘッダーに圧縮CSSをコピペ

fc2ブログの場合は『<link rel=”stylesheet” href=”<%css_link>”> 』というような関数(ワードプレスはPHP)、通常htmlサイトでも『<link rel=”stylesheet” href=”スタイルシートの場所”> 』というようにCSSを読み込むのが通常です。2012年くらいのwebクリエイター認定試験テキストでも推奨されてます。

しかしヘッダーに書くときは『<style type=”text/css”></style> 』の間に、先ほどの圧縮CSSを全部コピペします。2重読みを避けるため、『<link rel=”stylesheet” href=”<%css_link>”> 』のところはカットしておきます。

■CSSをヘッダーに圧縮して突っ込んだ場合の、ページスピードスコア


あれ、ずいぶんスマホ表示速度スコアがあがりましたね(50→95)。これだけ上がると、体感的にもかなり速く感じます。

ためしに、アドセンスとアナリティクスを外してみると・・・

100点にきわめて近い状態に。あとは画像圧縮とかをうまくできれば、スマホでページスピードスコア100点出せそうですね。

もちろん、ページ高速表示が出来ただけで、いきなりアクセスがハネ上がるということはありませんが(内容やバックリンク・sns拡散も重要です)、今まで遅かったときは離脱していたユーザーに見てもらえる機会がじわじわ増えるので、チャンスが大きくなりそうです。

fc2に限らず、ワードプレスや通常htmlサイト、html&css全部いじれるブログサービスでは使えるテクですので、ぜひ取り入れてみてください。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト高速表示 【タグ】 - ,

Message

メールアドレスが公開されることはありません。

  関連記事

【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)

今回は、サイト表示速度に関わるキャッシュ話題です。 以前ロリポサーバーで …

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック

今回はサイトを高速表示するときに重要なポイントといえる『キャッシュ活用』 …

【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで

今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだ …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

Googleがスマホ表示速度をランキング要因にすると発表・サイト制作者/ユーザーの対策は?

今回は2018年1月に、Googleの検索順位に影響する内容が公式に発表 …

【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法

今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグイ …

【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット …

スマホページ高速表示のための、CSS圧縮方法まとめ

今回は、読み込み速度を速くしてwebページ(特にスマホ版)を高速表示する …

ページ高速表示~正規URLとリダイレクトで、速度スコアが10点近く違う件

今回は、リダイレクト処理における、ページ表示速度の変化を検証します。 題 …

【wpプラグイン】ワードプレスサイトで、スマホアクセス時だけ軽量テーマに切り替える方法

今回は、スマホでみるとワードプレスサイトがちょっと重い件について対策して …

【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介 …