絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

7 件中 1 - 7 件表示
カバー画像

ファーストビューに配置したLCP対象画像に loading=lazyはいらない?

1. はじめにimg タグ(画像を表示するHTMLタグです)に「lazy という値を指定した loading 属性」を指定すると、その画像はすぐにダウンロードされません。ブラウザで表示している領域 (viewport) に、画像が入ってきたときにダウンロードが開始され表示されます。この動作により、Webページの読み込み&表示が高速化されます。 ところが、ファーストビュー(最初に画面に表示される範囲)上の画像はすぐに表示される必要があるため、loading=”lazy” を指定すると却ってWebページが遅くなってしまいます。 この動作を確認しようというのが、本記事の目的になります。2. 実験環境大きめの画像を画面上部に配置した Webページを用意します。 PC、スマートフォンのどちらからアクセスした場合でも、ファーストビューにこの画像が表示されるようにレイアウトを調整します。また、ファーストビュー上に表示される中で一番サイズが大きい要素がこの画像になるようにします。こうすることで、この画像が LCP (Largest Contentful Paint) の対象となります。今回の解析においても、この画像が LCP (Largest Contentful Paint) の対象となっていることを確認しています。 この画像の img タグに指定する loading 属性値を “eager” (こちらがdefault値です)、”lazy” のそれぞれを指定した場合とで、それぞれ Performance を解析します。この解析には、Chrome ブラウザのデベロッパーツール (DevToo
0
カバー画像

WordPress: 特定の記事に特定のCSSを出力する方法

1. はじめに WordPress サイトにおいて、「特定の記事を表示するときだけ、特定の CSSを出力する」方法を紹介します。それぞれのページが、なるべく必要最低限のCSS(スタイル)を出力することによって、ページの読み込み&表示速度を改善するのが目的です。特定の記事だけに対して、特定のCSS(スタイル)を出力します2. 特定の記事を表示するときだけ、特定のCSSを出力する方法 2-1. 概要 いろいろなやり方があるとは思いますが、本記事では以下の方法を紹介します。(1) 特定のページのみが必要とするCSSを、1つのファイルに切り出しておく。(2) functions.phpファイルに、「記事IDが○○な記事ページを表示するのであれば、△△というCSSファイルを出力する処理」を記述する。このとき、CSSファイルの中身を <style>タグ内にインライン展開する。2-2. 具体的な手順 (1) まず、A という記事だけが必要とするCSS(スタイル)を記述した .css ファイルを、テーマディレクトリ直下に配置します。ここでは、a.css というファイル名にします。 (2) 記事 A の ID番号を調べます。 これは、記事A を編集する際のURLに入っています。?post=XXXXX という部分の XXXXX が ID番号です。 ここでは、記事AのIDは「1111」だとします。 (3) テンプレートの functions.php ファイルに以下を記述します。- - - - - ここから - - - - -add_action( 'wp_enqueue_scripts'
0
カバー画像

Wordpressでホームページ制作行うデメリットについて

WordPressについて WordPressはホームページの更新のしやすさ、プラグイン(拡張機能)の多さから多くのユーザーに使用されており、インターネットにあるページの40%以上がWordpressで作成されています。そんなWordpressですがメリットもあれば、やはりデメリットもあります。 ご依頼を頂く前にデメリットと対策も併せてご確認いただくことでより安心してご依頼いただけると思いますのでご紹介いたします。 WordPressのデメリット ページ表示速度が遅いWordPress作成されたサイトは一般的に「動的サイト」と呼ばれ、反対にHTMLでコーディングされたホームページを「静的サイト」と呼びます。動的サイトに比べると静的サイトの表示スピードは遅くなります。これはサーバー内の仕事量の違いになります。Wordpressではユーザーがホームページにアクセスした際にHTMLを作成しユーザーに送ります。反対に事前にHTMLでコーディングし作成された静的サイトはサーバー内で作成する手間がないので素早くサイト情報をユーザーに届けることが出来ます。これがWordpressの表示が遅くなる原因の1つです。 ページの表示遅延はユーザーの離脱しやすい点とSEOの観点からしてもデメリットにつながります。 サーバーの負担が大きい前述したように、サーバー内の作業が多いため、多くのユーザーが一度にログインした場合にサーバーダウンが発生する可能性があります。セキュリティ問題多くのサイトでも記載がありますが、Wordpressで作成したサイトは攻撃を受けやすいです。理由は「Wordpressを使用して
0
カバー画像

2021年のPageSpeed Insightsスコア改善にあまり意味がない理由

ウェブサイト高速化の話をするとPageSpeed Insigthsスコアが低いから改善したいという声を頻繁に聞いたり目にしたりします。ただ改善したところでそれがSEO上のメリットがある訳でもないです。そもそもGoogleはスコアを高速化判断に使用しないと何度も明らかにしていますから。それでも何故か点数が低いと気になってしまい100点を目指したくなるというのは人間の性でしょうか。あとスコア算出基準は1年~数年で変わります。なので例えば今100点を目指して改善しても基準が変わると1年後にはまた改善が必要になります。既に高速なサイトをPSIスコアが低いだけで何度も改善をするというのは、お金に余裕があれば良いのですがその費用対効果を考えると微妙とも言えます。じゃあ高速化を無理にしなくても良いのか?と言うとそれは違います。2021年であればCore Web Vitals(コアウェブバイタル)対策を実施すべきですし、実際にページが表示されるまでの時間は速ければ速いほどストレスを感じません。PSIスコアを改善する事と、CWV対策や体感速度を改善する事は似て非なるのでそれぞれの特徴を理解して対策することが大事です。実際に恐らくは今年中にLighthouse 8が登場するとCLS改善が不完全だとPSIスコアは今より下がります。CLS以外の部分が良好で結果としてスコアが90以上になったとしても、将来の仕様変更で同じスコアにはならないのです。なのでスコア改善ではなく、高速化へ向けてサイトの課題をしっかり解決する事が何よりも大事。問題ある箇所を改善して結果としてスコアがあがるくらいに考えるのがちょうど
0
カバー画像

サイト高速化ご契約前の確認事項および、必要な情報まとめ

お忙しい中ご覧いただき、誠にありがとうございます。作業前にご確認およびご了承いただきたい点、また必要な情報をまとめましたので、必ず最後までご確認をお願いいたします。【 ご契約前確認事項 】■ 作業後ほとんど改善が見られない、または効果が目に見えない場合がございますWordPressの一般的なテーマやプラグインは、汎用性を持たせるため、あなたのサイトには直接関係のない情報を読み込むことが多々あります。またサーバーのスペックが足りないと、レスポンスに相応の時間を要します。そのため、利用されるテーマやプラグイン、サーバーなどによっては、物理的に高速化が難しい場合がございます。下記のような制限がある場合、ほとんど改善が見られない場合がございます。予めご了承ください。・テーマの機能を最大限利用したい・プラグインはどれもアンインストールできない・広告やカルーセル等、処理の重い要素の設置や配置を見直すことができない・サーバーのスペックが足りないまた一般的な表示速度計測ツールは、サーバーの状況や通信環境、ブラウザの拡張機能等の影響を受けます。スコアはあくまで参考値であり、サイト高速化=スコア向上ではございませんので、ご理解ください。※作業前と作業後にGoogle PageSpeed Insightsのスコアキャプチャをお送りいたしますが、前述の環境差異により、ご自身でのテストと数値が異なる場合がございますので、こちらも併せてご承知おきください。■ ページによって効果の度合いが異なる場合がございます高速化施策には、「該当ページのみに有効なもの」と、「サイト全体に影響を及ぼすもの」がございます。基
0
カバー画像

[WordPress高速化基本編]基礎的な高速化の知識をあなたに

初めまして、ココナラで今までに300件以上の高速化を担当してきましたkamata4649と申します。今回は高速化基本編としてデザインにこだわり過ぎると速度低下に繋がる内容に関してとその回避方法について解説したいと思います。AutoptimizeやLazy Loadを使っても速度があまり上がらない...という方には効果がある内容かと思われますので最後まで見ていただければ幸いです。※記事の内容は更新がある場合がありますGoogle Fontsは絶対に使ってはダメ!多くのブログなどのサイトではGoogle Fontsを使っているかと思われます。このフォントは読み込む際に日本語フォントを複数のファイルに分けて読み込んでいます。これは容量が大変大きく、サイト全体の容量を遥かに上回る容量になることが多いです。画像を遅延読み込みしようとも、Google Fontsの容量が多すぎて意味をなさなくなります。フォントは基本的にはブラウザの基本フォントや有料の軽量フォントを使うことがSEO的にベストとなっています。FontAwesomeの速度的影響FontAwesomeは便利さとこのフォントの数によって多くのユーザーがいますが、数が多くその容量もCSSとwoffやSVGを含め100KB近くの容量があります。またこのフォントをCDNで読み込む場合はCDNサーバーの性能にも依存するため速度低下に繋がる場合が多いです。そのため使うフォント、使わないフォントを「IcoMoon」を使ってサイトで使うアイコン、使わないアイコンを分けて使用すべきです。設定に関しては少しの知識が必要になります。知識がなく手軽に高速
0
カバー画像

WordPress高速化に関する以外と知らない部分

初めましてkamata4649です。私は普段からWordPressを利用している方々のサイトを高速化する業務やデザインの改良などの作業をしています。今回の記事は高速化部分についてお話をしたいと思います。1.PageSpeed insightsの仕様上Google Adsenseがあるサイトではスコアが55点以上はほぼ不可能これはPageSpeed insightsの仕様上またGoogle Adsenseの仕様上の両方の面で通常の設置方法だと不可能になっています。これはGoogle AdsenseのスクリプトはAsyncと呼ばれる非同期化をされていますが、基本的に後からスクリプトは結局読み込まれ、そのあとの広告に含まれるGoogle Fontsや画像などが大幅に速度に影響を与えます。多くのブログはGoogle Adsenseを収入源としています。これを外すことはブログの生命線を無くすことになります。トップページから外してもトップページはスコアが良くなりますが、サイト全体の体感速度は基本的には変わりません。これを高速化する方法は知識がなければ難しいです。2.Twitter,FaceBook,Instagramタイムライン、ツイートの埋め込みがある場合は速度に大幅に影響がありますTwitter,FaceBook,Instagramは外部からの遅延できない画像を読み込む、また圧縮率の低い画像を読み込む、多くの外部スクリプトを読み込むため読み込み速度に大幅な影響を与えます。この問題点は記事などで多くの埋め込みをしている場合はPageSpeed insightsの場合は10点程度になる場合
0
7 件中 1 - 7
有料ブログの投稿方法はこちら