cssを圧縮するとデベロッパーツールで行数がわからない?!
カテゴリ:コーディング
本ページはプロモーションが含まれています
この記事は約1分42秒で読めます。
こんにちは!グローイングスケールの竹林と申します。
Web業界15年以上でWordPress(100サイト以上構築)とSEOが得意なWebデザイナーです。
noteで「爆速!速くGoogleにインデックスしてもらう方法」を書いたので、ご興味ありましたらご覧ください。
「好き」なことを仕事にしたいという方のお役に立てればと思います。
ここら辺ブラウザのバージョンアップで変わったりしやすい部分。。
最近のchromeは圧縮されたcssの行数が表示されます。
もし、あなたがchrome以外のブラウザでsassの行数を知りたいのなら迷わず、chromeを使いましょう。
あ、その前にソースマップというファイルをコンパイラに出力するように設定しておいてください。
ソースマップというものは
sassファイルに圧縮されたcssが何行目に書かれてるか、マッピングされた情報が書かれているファイルです。
きっとあなたがお使いのコンパイラにはソースマップを出力するかしないかチェックボックスなどで選択できるようになっているはずです。
もう一つ忘れずに行ってほしいのは
ソースマップファイルをFTPでかならずサーバーにUPしてください。
そうしないとブラウザがソースマップファイルを認識してデベロッパーツールが行数を認識してくれません。
CSSの圧縮はwebページ表示速度の改善にもかなり効果的です。
しかもwebページの表示速度が改善されたらSEO的にも評価が上がります。
行数がわからないからといって、CSSの圧縮を拒んでいたら上記の方法をヒントにソースマップを活用してみくださいね!
WordPressやWebのお悩み、わたしが解決します!
はじめまして。この記事を書いた竹林です。
WordPressやコーディング、SEO対策などのことでお困りですか?
15年以上の経験を持つWebデザイナーが、あなたのお悩みを解決します。
記事の更新ができない、設定方法が分からないなど、どんな小さな問題でも対応可能です!
合わせて読みたい「」の記事
執筆者
Growing Scale
Web業界約15年。WordPress化したサイトは約100サイト。SEOキーワードで上位表示経験多数。最近はGoogleのデーターポータルがおもしろい。ウェブ解析士。サイト制作実績
「Web制作」の関連記事
地域の未来を支える「流山・空き家を生まないプロジェクト」に参画
この度、GrowingScaleは「流山・空き家を生まないプロジェクト」にプロジェクトオブザーバーとして参加しました。...
おすすめのホームページ制作会社として掲載されました
こちら(https://seo-assist.jp/seo_measures2/20231219104838/)のサイ...
職業訓練校での講師業スタート
グローイングスケール代表 竹林は、職業訓練校での講師業を開始しました。 Web制作と、SEO対策の全般にわたる知...
新登場!3つのWeb制作プラン
グローイングスケールの新しいWeb制作プランが登場。 今回は、特に不動産仲介会社、老人ホームの営業会社、そしてク...
【爆速!速くGoogleにインデックスしてもらう方法】note販売中
今までの経験や実績を元に、Googleに速くインデックスしてもらう方法をnoteにまとめて販売しております。※¥5,9...
フリーランス協会の一般会員になりました
フリーランス協会の有料会員(会員番号: 014524)となり、同時にフリーランス向けの賠償責任保険に加入いたしました。...