長すぎるとSEO非友好的な質問の技術のいくつかの利点と欠点と単一ページの黒と白の家の原則を適用します
一般的な
フロントエンドのフレームワークVUEの出現により、人気とともに、など、単一ページのアプリケーションを反応させます。より多くのプロジェクトは、単一ページのアプリケーションを実現するためになど、反応し、フレームワークをVUEを使用します。最大の利点は、ユーザーエクスペリエンスを向上させ、何のリフレッシュ対話単一ページのアプリケーションではありません。しかし、単一ページのアプリケーションは、それが長すぎるためのSEOよそよそしいホーム白い画面で、また非常に明らかな欠点です。今、私が言いたいのは長すぎると非友好的なSEOの技術的な問題のいくつかのために単一ページのアプリケーションと原則ホーム白い画面の利点と欠点を解決することです。
黒と白のホーム理由に長い時間
唯一の単一のHTMLページアプリケーション、およびページのコンテンツを生成するためのJSに依存する必要があり、これに伴う問題は、ユーザーがページにアクセスする必要がある場合、HTMLに戻ったサーバは骨格だけ、実際のコンテンツであるということですHTML。ブラウザにサーバーが返すHTMLを解析するとき、JSまた、実行解決されますjsファイルを取得した後に、別のサーバーを取得するための要求を送信する時間を満たすために必要があり、必要なHTMLページを生成し、指定さに挿入されますノード。JSのJSは、目的のページを生成し、この時間HMTLに実行するために取得するには、コンテンツはありませんHTMLに戻ったサーバは、ブラウザは常に白い画面を表示させます。だから、長い単一ページの黒と白のホームタイムの原因は3つあります。まず、ネットワークの問題は、ネットワークが良くないとき、時間が長くなるに対応したファイルを取得します。第二に、問題のファイルサイズ、より大規模なプロジェクト、長く、ファイルサイズが大きくダウンロード時間。第三に、コンピュータ自体の問題は、コンピュータのパフォーマンスが高い、その逆に遅いと、より高速の分析の実行速度をJS。前の二つの問題（ネットワークの問題、および問題のファイルサイズ）主にこの部分のフロントエンドのパフォーマンスの最適化に、圧縮要求とそのような最適化などの文書を包装削減の問題、主に合併要求、のフロントエンドのパフォーマンスの最適化に関連している私は、マルチここではないです私は一人で、フロントエンドのパフォーマンスの最適化問題についての記事外となります時間をかけて、関心のある読者が見ることができます、と言います。言うまでも無く、よりコンピュータの問題、すべての人のコンピュータが同じ性能、違いはありません。、これらの3つの問題は、不可抗力のいくつかは、私たちは私たちが根本原因を解決するための時間から長い白い画面の問題を解決するために、これらの三つの側面を解決起動することはできませんが、それは、サーバーのみのhtml HTML骨格に返されますそして、実際の内容がブラウザに表示されないことができ、私たちが行う必要のあるブラウザはJSや他のファイルを取得するので、HTMLコンテンツで埋めることで、その後のjs htmlページはコンテンツがあるかもしれないこの時間を必要として生成解決要求を送信しますこれは、ブラウザに表示されます。
理由SEO無愛想
上記サーバ戻るだけ骨格、HTMLのない実際のコンテンツ、およびページのDOM要素をクロールします検索エンジン、テキスト情報などではなく、コンテンツ領域JS上昇、およびページ・メタHTMLでコンテンツ]タブには、ルーティングページのさまざまなニーズに応じて、あなたはメタ死者を書き込むことはできませんので、メタタグのコンテンツを表示するための別のルートページは、同じではありませんそれ以外の検索エンジンは、あなたが浮気していると思うだろう、あまりにも多くのではなく、単一のページ背景には、動的コンテンツのメタタグを生成しました。したがって、DOM要素とテキスト要素が存在しない場合に、検索エンジンがページの重いウェイトが比較的低いだろう計算し、依存しますランキングは、ユーザーが対応するページを検索することはできません。
SSRサーバーレンダリング技術についての最初の話。SSRはVUEで、問題を解決するために非友好的なSEOがある一般的なシナリオを解決するにはあまりにも長い間反応し、その黒と白のフレームの家。原理は、VUEをできるように、サーバー上で実行されている反応し、その文字列に対応するリターンの先端にHTMLをレンダリングし、ルート要求に基づいて、異なるルートと一致しています。実際に、その白は、Java JSPに幾分類似しており、ノードテンプレートエンジンEJS等、JSP、実際にサーバにレンダリングEJSが、それらはサーバ側のデータ前部に十分な見返りが充填されています。しかし、問題は、背景や人員によって引き起こされる問題です。最初は、バックグラウンドの問題であり、SSR一般ノードを使用し、めったに非ノード、ノードおよび非言語実装が困難を書くために言語を使用しませんが、業界はまだ良い解決策を持っていません。JSに基づいている言語のSSRメインノードの基礎を達成するためにノードを使用して、簡単な高親和性のjsが、実装します。しかし、今は非常に少数の企業やプロジェクトは、問題の一部と、それは楽屋全体の崩壊を引き起こします、ノードは、シングルスレッドの問題である主な理由は、背景を行うためにノードを使用します。ノードは、一般的に中間層に用いられる、任意のサービスコードおよび論理を担うのみ責任SSR転送剤、です。これは、サーバーのオーバーヘッドが大きくなることを意味しています。SSRので、単一ページのアプリケーションは、SSRを行うだけ倍を超える一般的で、すべてのページがSSRを使用されていない、結局のところ、これはろうそくの価値があります。第二は、一般的に、すべてのフロントエンドの後、ノードのバックエンドのコードで書かれているフロントエンドエンジニアのSSRを使用して、スタッフの問題であるエンジニアのJSより身近な、結局のところ、非常に少数の非エンジニア堪能ノードノードの背景には、もちろん、それはバットのようなものです例外エンジニア。だから、ノードSSRを使用するフロントエンドエンジニアは、一般的にシニアフロントエンドエンジニアはやるので、これはそれがシニアフロントエンドエンジニアがコストの合計です募集を意味します。だから、一般的に大企業、大企業、結局、お金をたくさん、才能と技術で使用されている中小企業はほとんど使用しないもののグレード、上のこのハイエンドの雰囲気SSR！
プリレンダリング技術
プリレンダリング主に非友好的なSEOの問題を解決するために使用されるが、いくつかの静的なページ、またはなどログインページ、登録ページ、など少し変更されたデータページ、のために、また、長い黒と白のホームタイムの問題を解決することができます。データ収集のために待機し、Chromeブラウザで必要な事前レンダリングされたページを開き、梱包の過程では、このようなこのプリレンダリングされたプラグインの事前レンダリング・スパ・プラグインVUEとして、この技術は、主にクローラ技術を使用しているプリレンダリングされ、レンダリングされ、その後、読み、事前レンダリングされたドキュメントを生成し、ファイルに書き込みをした、ページの内容を降り、爬虫類を使用しています。それはあなたがSEOの効果を達成できるように、プリレンダリングファイルによって生成された検索エンジンのクローラが戻るが、普通のユーザーは、通常のHTMLファイルに戻ることがあればことを検出した場合、背景nginxのプロキシサーバーの転送を使用しています。平均的なユーザー・アクセスは、いくつかの静的なページやページの変更データでない場合、我々はまた、直接、プリレンダリングされたファイルを生成返すことができますので、あなただけではなく、黒と白、ユーザーの通常のブラウジングに影響を与えることなく、かつ、使用家に長い時間の問題を解決することができますしかし、このアプローチは注意する家の一つは、JSがダウンロードされ、適切に実行された場合に後のページが再びJSを生成しますので、あなたが短い点滅を見ているかもしれない、この時間は、それがあるということです長い白い画面時間の問題を解決するためにそして、プリレンダリングされたコンテンツ生成されたファイルの内容を上書きし、これはそこにそこから、その後の内容を引き起こすとされます。だから我々は、HTMLの事前生成されたレンダリングで容器をルートする必要があります
スケルトンスクリーン技術
スケルトンスクリーン技術は、SEOは非常に友好的ではないため、家庭黒と白の長い時間の問題点を解決するために主にあります。スケルトンデータがまだ準備ができていないとき、描画を開始するこれらの携帯電話のアプリと少し似て画面データは、画面の骨格の内容の後を取り除くために準備ができているとき、画面には、何かの骨格を示したが、対応するデータを表示します。共通骨格画面背景画像、CSSローディングアニメーションがあり、プレースホルダブロックがあります。まず、ここでの画像の背景には、あなたは確かにホーム白い画面の時間が長くなります画像を取得するために要求した後に戻って得るのhtmlを送信することも導入の形でリンクを使用していますが、あれば必要性は、Base64形式の使用を導入することに留意すべきだ、と絵音量が大きすぎではない、それ以外の場合は、より大きなボリュームのhtmlファイルへのダウンロード時間をリードすることは望ましくないとする、長くなります。したがって、このような背景の絵はほとんどのWebアプリケーションで使用されていない、ほとんどが携帯電話のアプリで使用されています。そして、CSSローディングアニメーション、このアプローチは、上記のCSSローディングアニメーションを追加し、通常は直接フルスクリーン半透明のマスク層に、あまりそこに表示され、このアプローチは、ユーザがデータを取得するように指示されていることです。最後のブロックは、プレースホルダブロックはそのようなものが500-をトッピングどのようなコンテンツ、ユーザーが知っているために、ページのプレースホルダブロックを見ることができるように、異なるページを占有するdiv要素の内容に応じて使用され、プレースホルダーである我々は、カルーセル図200背景色の上に配置灰色で、500 DIV 200です。私たちはブロックを占有物の組成となるよう同じことが、他のページ要素の事実です。テイク空腹アプローチこのプレースホルダブロックの使用がどのようなものです。主な原則は、ブラウザのアドレスに対応するプレースホルダページブロックアドレス、隠されたプレースホルダブロックの他のページを表示するためのバックボーン画面です。スケルトンスクリーン技術は、単一ページの黒と白の家に長い時間を解決最も効果的な方法、低コスト、実装が容易です。
概要
技術的ソリューションホーム黒と白の単一ページのアプリケーション時間に異なるプロジェクトのために同じではないが長すぎたり、会社やプロジェクトの実際の状況に応じて選択する必要がSEO非友好的な問題、の使用です。唯一のSEOのための場合は、プリレンダリングが最良の選択です。のみが長すぎるため、家庭白い画面のためならば、スケルトン画面が最良の選択です。あなたが長すぎるためにSEOや家庭用の黒と白にしたい場合は、サービスのSSR側のレンダリングは、最良の選択やプリレンダリングスケルトン画面と両方の組み合わせです。会社の最も最近のプロジェクトは、プリレンダリングされたスクリーン技術とスケルトンの使用が長すぎると黒と白のホームSEO非友好のために問題を解決するために組み合わせることです