CDNにイメージドメインを書き換えることを含むゴースト・ブログパフォーマンスを最適化してください

ゴーストブログプラットフォームは、リーンとミニマリストの経験を提供しています.そして、それは我々がそれを愛している理由です.しかし、残念ながら時々、それはあまりにも我々の要件に乏しいことができます.
特にGoogleがSEOランキングのパラメータとして始めたので、ウェブパフォーマンスはこれまでより重要で、関連していました.我々は可能な限り、可能な限り最高のユーザーエクスペリエンスを提供する当社のウェブサイトを最適化することを確認します.この記事は、それを無駄にして機知に富んだまま、ゴーストのブログのパフォーマンスを最適化するために取ることができる手順を歩いていきます.
私たちが仕事を始めたときappfleet blog 我々はいくつかの簡単なことから始めた.

ゴースト反応画像
ブログで紹介されているイメージにはたくさんのパラメータがあります.たとえば、複数のサイズを設定することができますpackage.json そして、自動的にモバイルデバイスまたは小さな画面上のユーザーのための敏感な経験のためにそれらを変更する幽霊があります.

"config": {
        "posts_per_page": 10,
        "image_sizes": {
            "xxs": {
                "width": 30
            },
            "xs": {
                "width": 100
            },
            "s": {
                "width": 300
            },
            "m": {
                "width": 600
            },
            "l": {
                "width": 900
            },
            "xl": {
                "width": 1200
            }
                 }
}

そして、あなたがしなければならないすべては、テーマのコードを更新することです

<img class="feature-image"
    srcset="{{img_url feature_image size="s"}} 300w,
            {{img_url feature_image size="m"}} 600w,
            {{img_url feature_image size="l"}} 900w,
            {{img_url feature_image size="xl"}} 1200w"
    sizes="800px"
    src="{{img_url feature_image size="l"}}"
    alt="{{title}}"
/>

パフォーマンスのための一般的なHTMLタグ
次に、いくつかの簡単な手順をダウンロードして資産のダウンロード時間を取る.それにはpreconnect and preload ヘッダdefault.hbs :

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous">
<link rel="preconnect" href="https://cdn.jsdelivr.net/" crossorigin="anonymous">
<link rel="preconnect" href="https://widget.appfleet.com/" crossorigin="anonymous">

<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Red+Hat+Display:400,500,700&display=swap" />
<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" />

私たちは多くのファイルをロードするjsDelivr 我々のパフォーマンスを向上させるために、我々はできるだけ早くドメインとの接続を確立するためにブラウザに指示します.同じようにGoogleのフォントとカスタムバーコードされたサイドバーウィジェットになります.
ほとんどの場合、特定のブログ記事にGoogleや他のソースから来ているユーザーがホームページに移動し、他に何を書いているかを確認します.同じ理由については、ブログの記事にも我々はprefetch and prerender メインのブログページのタグ.
ブラウザが非同期でダウンロードしてキャッシュする方法で、ユーザの次のもっとも確実な動作をほぼ瞬時にします.

<link rel="prefetch" href="https://appfleet.com/blog">
<link rel="prerender" href="https://appfleet.com/blog">

現在、これらの最適化は確かに助けました、しかし、我々にはまだ大きな問題がありました.我々のポストはしばしばそれらの中で多くのスクリーンショットとイメージを持ちます.
この問題を解決するために、我々は2つのステップを取りました.怠惰な負荷画像とCDNを使用します.問題は、ゴーストがポストの内容を変更したり、フィルタリングしたりできないことです.HTMLを出力することができます.
これに最も簡単な解決策は、ダイナミックコンテンツCDNCloudflare . CDNはサイト全体をプロキシしますが、HTMLをキャッシュしませんが、画像のような静的コンテンツをキャッシュします.また、彼らは自分のJavaScriptを注入することによって怠惰な負荷のすべての画像をオプションがあります.
しかし、我々はこのケースでCloudFlareを使いたくありませんでした.サードパーティのJSを怠惰な負荷にイメージを注入するような気がしなかった.それで、我々は何をしましたか?

Nginx救助に!
私たちのブログはDigitalOcean ドロップは、その市場アプリケーションを使用して作成されます.基本的には、ノードを事前にインストールするUbuntu VMです.JS、NPM、Nginxと幽霊.

Note that even if you don't use DigitalOcean, you are still recommended to use Nginx in-front of the Node.js app of Ghost.

これは最終的に解決策はかなり簡単になります.我々は、余分なJSなしで、CDNと怠惰なローディングイメージを同時に可能にして、HTMLを書き直すためにNGinxを使用します.
CDNの場合は、すべてのAMPプロジェクトにGoogleが提供する無料のCDNを使用することがあります.実際にアンプを実装することなく、通常のCDNとして使用できることを多くの人々が認識していません.
すべてのあなたのイメージの前にこのURLを使用する必要があります:

https://appfleet-com.cdn.ampproject.org/i/s/appfleet.com/

ドメインを自分で置き換えて<img> タグ、あなたが完了です.すべての画像がGoogleのCDNを介して提供されます.
最良の部分は、画像だけでなく、同様に最適化されているイメージです.さらに、それはさらにあなたのサイトのパフォーマンスを向上させる可能な場合は、イメージのWebPバージョンを提供します.
怠惰な読み込みに関しては、このように見える現代のブラウザーのネイティブの機能を使用するかもしれません<img loading="lazy" . 加えることによってloading="lazy" すべての画像には、ブラウザが自動的に怠惰にそれらをロードすると、一度、ユーザーが表示されるように指示します.
そして、これを実現するためのコードそのものです.

server {
    listen 80;

    server_name NAME;

    location ^~ /blog/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host       "appfleet.com";
        proxy_set_header        X-Forwarded-Proto https;
        proxy_pass http://127.0.0.1:2368;
        proxy_redirect off;

        #disable compression 
        proxy_set_header Accept-Encoding "";
        #rewrite the html
        sub_filter_once off;
        sub_filter_types text/html;
        sub_filter '<img src="https://appfleet.com' '<img loading="lazy" src="https://appfleet-com.cdn.ampproject.org/i/s/appfleet.com';
    }

}

最初にノード間の圧縮を無効にします.jsとnginx.さもなければ、それがバイナリ形式で来るならば、NginxはHTMLを変更することができません.
次はsub_filter HTMLを書き換えるパラメータ.ゴーストは、画像の絶対パスを使用しているので、我々も始めを追加します.1ラインではcdnとlazyloadingの両方を可能にした.
設定をリロードしてください.リアルタイムでこれを見るために、我々のブログをチェックしてください.