どのように私は1 KBのJavaScriptで高速にワードプレスを作った


Clickbaitタイトル権利?😉
4ヵ月前にリリースされて、スクリプトは現在4 k WordPressサイトによって使われます.

gijo-varghese / flying-pages
内部のページを即座に

フライングページ

Flying Pages prefetch pages before the user click on links, making them load instantly


クイックリンク
  • デモ:オープンhttps://wpspeedmatters.com をクリックして任意の投稿
  • WordPress Plugin
  • Quicklink vs Instant page vs Flying Pages
  • 参加するFacebook Group , WordPressスピード愛好家のコミュニティ

  • 用途
    クイックスタート:
    <script src="flying-pages.min.js"></script>

    With options:

    <script>
      window.FPConfig = {
        delay: 0,
        ignoreKeywords: [],
        maxRPS: 3,
        hoverDelay: 50,
      };
    </script>
    <script defer src="flying-pages.min.js"></script>
    • delay: Start prefetching after a delay (in seconds). Will be started when the browser becomes idle, using requestIdleCallback. Default to 0.
    • ignoreKeywords: An array of keywords to ignore from prefetching. Example ['/logout','/cart','about.html','sample.png','#'].
    • maxRPS: Maximum requests per second the queue should process. Set to 0…

    <script src="flying-pages.min.js"></script>
    <script>
      flyingPages({
          delay: 0,
          ignoreKeywords: [],
          maxRPS: 3,
          hoverDelay: 50
      });
    </script>
    

    どうやって動くの?
    フライングページは、ブラウザがアイドル状態になるまで待つ小さなJavaScriptコード(1 KB GZIP)を注入し、ビューポート内のリンクを検出します(また、マウスホバーでも)、ページを移動しながらブラウザが待機する必要はありません.
    プリフェッチはプリフェッチタグを使用します.
    <link rel="prefetch" href="URL_TO_PAGE">
    
  • ViewPortのプリフェッチページ-「交差点オブザーバー」を使用して、ViewPort(現在の視聴域)の中でリンクを見つけて、「プリフェッチ」を使って、それらをプリフェッチするようにブラウザに指示します
  • マウスホバー上のプリフェッチページ-ホバリングリンクの上に、まだ' viewport 'の上で先取りされていないならば、飛行ページは即座に(即座のページに類似した)彼らを接待します.
  • あなたのページがあまりにも多くのリンクを持っている場合、あなたのページがあまりにも多くのリンクを持っている場合は、サーバーをクラッシュさせるか、訪問者にウェブサイトを遅くする原因となります.飛行ページは、ビルトイン・キューを使用して、1秒あたりのprefetches(デフォルトで3 req/秒)の数を制限します.
  • サーバがビジー状態である場合にプリフェッチを停止します.サーバがゆっくり応答したりエラーを返した場合には、プリフェッチを停止してサーバの負荷を軽減します.
  • ユーザーの接続と設定を理解します-ユーザーが2 Gのような遅い接続の上にあるか、データセーバーを可能にしたかどうかチェックしてください.フライングページはこの場合何もプリフェッチされません.


  • WordPressプラグイン
    ログアウト、カートページなどへのプリフェッチリンクが問題を引き起こす可能性があります.そのようなリンクを除外する必要があります.
  • 秒あたりの最大リクエストを設定する
  • プリフェッチを開始する遅延
  • マウスホバー
  • 無効にするログイン
  • The Flying Pages WordPress plugin これらをすべて設定するための設定パネルが付属しています.


    デモ?
    ブログ一覧にもどるWP Speed Matters