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

   

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

ワードプレスサイト高速化失敗例(ページスピードスコア低下)→最後にjsで読み込むCSS

      2018/04/05

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

今回は、管理人が重いワードプレスサイトを高速表示しようとして、失敗した事例(ページスピードスコアが逆に低下)をお話します。

特にCSSの読み込みに関するチューニングです。実施前・実施後のページスピードスコアもご覧ください。

■CSSで表示速度上がるの?元の表示速度スコアは?

■PageSpeed Insightsで良く出てくるのが、javascriptやCSS

グーグルPageSpeed Insightsで、サイトのページ表示速度を計測したことがある方なら、一度は見たことがあると思います。『コンテンツのレンダリングをブロックする、javascriptやCSS』という点です。

容量が大きいjavascriptやCSSを、ヘッダー内で『link rel=”stylesheet”』みたいな感じ(javascriptはscript type=’text/javascript’ src=”)で読んだときに、『他の文章や画像読み込む前に、そこでつっかかって表示スピードが落ちる』という状況になりやすく、圧縮するとか、非同期にするなどの対策が必要です。

■このサイトの、以前計測したページ表示速度スコア

基本的にワードプレスサイトって重いので、チューニングをしなければ、ページ速度スコア赤信号が出る(SP40点とか)ことが多いです。とりあえずいろいろ削って『SP:71 / PC:77』まで上げました。

10人以上同時にアクセスしてきているときには5点くらい下がることもありますが、だいたいこのくらいです。

■やってみたい対策→CSSを最後に読み込む

このサイトではjavascriptは</body>の手前で読み込むようにしています(たしかSpeed Up – JavaScript To Footer)。

同じような理屈で『CSSを最後に読み込んだら、先に文章が表示されて速いんじゃね?』という単純な理由でやってみることにしました。

■CSSを最後に読み込んだ例と、ページ表示速度スコア

■CSSを最後に表示するのに、javascriptを使ってしまった

普段はヘッダー内に『link rel=”stylesheet”』って書くんですけど、今回はjavascriptを利用して、最後にCSS読み込みしてみました。

ワードプレスでやる場合は、構造上『footer.php』のファイルに、</body>まわりの記述があることが多いと思います。

■javascriptでCSSを最後に読み込んだときの、ページ表示速度スコア

あれ、さっきより下がっていますね。ダメじゃん(笑)

原因としては『javascript読み込み回数が増えた』、『一度レンダリングした後、またCSS読み込んで同じ処理した』みたいなのが考えられます。

■今後やってみたいページ表示速度対策

で、今考えている対策もあります。まずはCSSを圧縮し・・
https://syncer.jp/css-minifier
『CSS Minifier (スタイルシートの圧縮)』


ヘッダー内に、内部記述で<style type=”text/css”> CSS・・・</style>みたいな形で、限界まで圧縮したCSSを書いてやることでしょうか。

確か高速ワードプレステーマのLuxeritas Theme(ルクセリタス)も、テーマの機能でCSSやjavascriptを圧縮&ヘッダーにCSS書いちゃうというような構成だったと思います。
この対策はやってみてうまくいったら、このサイトでみなさんにお知らせいたします。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 -

Message

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

  関連記事

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』では …

ワードプレスサイトの独自ドメイン解除方法

今回は、以前『ワードプレスに独自ドメインを設定する方法』を書きましたが、 …

音声セミナー・講座・音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTM …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …