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

   

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

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

      2018/04/05

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

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット』で、ワードプレステーマ・stingerのCSSサイズを縮小します。

画像はfreeimages.comさんからお借りしました。デザインや機能などをなるべく変えずに、どれくらいサイズを小さくできるのでしょうか?さっそくやってみましょう。

■stingerのCSSサイズ(通常・ただし8)ってどのくらい?

管理人が現在このサイトに入れているワードプレステーマはstinger(5)なんですが、バージョンが変わって、CSSエディット前の状態が配布していませんでした。そういうわけで、stinger(8)との比較になります。書き方や機能などはだいたい同じとはいえ、サイズが(5)とは少し異なりますのでご了承ください。

■stinger(8) CSS元はこんな感じ

元の状態です(stinger5も書き方はこんな感じです)。テーマ作成者の方がpadding-top,padding-bottomなど、分けて書いてくれているので、どこをいじればよいか分かりやすく、カスタマイズにも非常に向いています(ワードプレスの中身部分はGPLライセンスにつき、カスタマイズokという解釈です。ただし、コンテンツの部分の著作権は著者にとかいう感じ。)。

■stinger CSSの行数・文字数・サイズは?


stinger(8)の、文字数などをはかってみました。『スペース込文字数 40547・行数3035』とでました。バージョン5は少し少なくて39000くらいかと(うろ覚えです。)


これは、サイズをキロバイトであらわすと『46054バイト→約46キロバイト』となります。

なお、ツールは、こちらの文字数カウンターではかってみました。
http://www1.odn.ne.jp/megukuma/count.htm

■stingerのCSSサイズは、半分~3分の1くらいにできる!

■管理人のカスタマイズCSSはこんな感じ

前回書いた記事『スマホページ高速表示のための、CSS圧縮方法まとめ』
https://sounds-stella.jp/music-creation/archives/4543
にある、『短くする・カット』などを利用し、コンパクトに。

『RSSボタン・引用じゃないけど引用と同じデザイン・カレンダー・検索フォーム』などは、特に使っていないのでカットしました。検索が出なくても『タグ・関連記事・カテゴリー・1ページ多め記事表示などで探しやすくし、内部リンクを作って移動しやすくする』という狙いもあります。

■管理人のカスタマイズstinger CSSの行数・文字数・サイズは?


上記のCSSを解析したところ『スペース込文字数 15779・行数373』に。この時点でかなり小さくなっていることが確認できると思います。かつ、『レスポンシブスマホレイアウト対応や、そのときのアコーディオンメニュー』とか、主要な機能はそのまま。


サイズは『17131バイト→約17キロバイト』と、2.7分の1くらいのサイズに

■あとがき

とりあえず、あまり機能やデザインを変えずにサイズダウンができました。体感的にも、最初にワードプレスをインストールしたときよりもスマートフォン表示速度があがっていると思います(ページスピードスコアも当時より20点上昇しています)。

実はさらに、ここから『gzip・非同期読み込み』もつけられるので、CSS関連だけでもかなりのスピードアップができます。わかりにくい場合はドラゴンボールを思い出すとokです。戦闘力1万の状態から二段変身するキャラより、戦闘力53万から二段変身するようなものです。

webサイトで重要なのはコンテンツ(中身)ですが、表示に時間がかかりすぎると、肝心の中身を見てもらえないという可能性もあります。

ワードプレスが重い場合は、高速化プラグインなどのほかに『javascriptやcss自体をサイズダウンする』というのも、ぜひ検討してみてください。

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

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

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


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

Comment

  1. worpman より:

    私はここまでカスタマイズできる気がしません。もう少しwordpressの知識を身に着けたいですね

  2. ssmika より:

    >worpmanさま
    管理人です。コメントありがとうございます。最近wordpress使いこなすには、構造知ったり、html&css・js・phpとか、総合的な能力が必要かなっておもってきました(汗)

Message

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

  関連記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使っ …