😃 ブログサイト最適化第1部

👉 Lighthouseを使用してパフォーマンスを測定する

Chromeは、Webサイトのパフォーマンスをテストするためのツールを提供しています.モバイルもデスクトップもサポートされており、カテゴリはPerfomance、Progressive Web app、seoなど多くの指標があります.

以上の指標から見ると、100点満点で44点の成績がある.次の写真を見れば、どの部分で性能が低下しているかを確認できます.

👉 ロード・パフォーマンスの最適化

1.画像サイズの最適化

Webサービスでは複数の画像が使用されます.しかし、このイメージのサイズが大きすぎると、サービスが重くなります.また、サイズが小さすぎると低画質で気分が悪くなります.ある種の사이즈가 적당한지 체크のはずです.


上図は120 x 120を示していますが、実際の写真サイズは1200 x 1200です.この場合、写真サイズは240 x 240が好ましい.(2倍)
フロントで直接写真サイズを縮小できますが…バックエンドから受信する場合、直接減らすことは難しい.
このときはCDN(Contents Delivery Network)を使用します.以下に、サーバから受信したAPIデータを示す.

(1)CDNとは?

地理的位置、

技術により、物理的に分散したユーザにコンテンツをより迅速に提供

テクノロジー

は、応答速度/ダウンタイムが遅いという問題を克服します.
ホームページが韓国で、私が使ったcafe 24のサーバーに預けられているとしたら.
搭載されたスペースに私のウェブページの画像があり、アメリカ在住のユーザーがウェブサイトにログインすると、サーバーはアメリカのユーザーから要求を受け、韓国のサーバーから画像を呼び出して表示します.
しかし、物理的な距離が遠いため、一定の時間遅延が発生する.これを補うために、CDNサービスは、サーバ自体を複数の場所に配置し、ユーザ要求時に最近のサーバ上で処理することで、遅延時間を低減する.

(2) Image CDN

画像をユーザに送信する前に、가공をユーザに転送する.(画像フォーマット変更およびサイズ変更)http://cdn.image.com?src=[img src]&width=200&height=100形態.

2. Code Split

コードを効率的に分割するには、コードを分割するタイミングを決定します.

(1)bundleとblock

bundle:Webpackは、JavaScriptを含む複数のリソースを接続した結果です.bundleは複数のChungで構成されています.

block:すべてのコードが巨大なファイル(bundle)にならないように、複数のblocksに分割します.コードがどのように区切られるかの方法も任意に構成できます.

（2）分析ビームファイル（ビーム分析器）

初期ロード時に1つのブロック.jsリソースファイルのみがダウンロード時間が非常に長いと判断できます.javascriptのダウンロードからコードを実行するため、初期ロード速度が非常に遅くなります.
chunk 파일의 상세 내용を表示するには、webpackツールbundle-analyzerを使用します.Webpackでは、バンドルされたファイルがどのように組織されているかを表示できます.

上の写真を見ると、npmでインストールされているnode modulesのライブラリです.
多くのjsライブラリがあり、これらのリストソースはpackage.lock.jsonで見つけることができます.使用しているモジュールのサブ依存項目のリストが表示されます.
ここでは、各画面に必要なモジュールをロードすれば、初期ロード速度を速めることができます.

(3) Code Splitting & Lazy Loading

コード分割:余分なコードや重複するコードを必要とせずに、適切な時間に適切なサイズのコードをロードします.
<最適化されていないコード>

import React from "react";
import { Switch, Route } from "react-router-dom";
import "./App.css";
import ListPage from "./pages/ListPage/index";
import ViewPage from "./pages/ViewPage/index";

function App() {
  return (
    <div className="App">
        <Switch>
          <Route path="/" component={ListPage} exact />
          <Route path="/view/:id" component={ViewPage} exact />
        </Switch>
    </div>
  );
}

<最適化されたコード>

import React, { Suspense, lazy } from "react";
import { Switch, Route } from "react-router-dom";
import "./App.css";
const ListPage = lazy(() => import("./pages/ListPage/index"));
const ViewPage = lazy(() => import("./pages/ViewPage/index"));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>로딩중..</div>}>
        <Switch>
          <Route path="/" component={ListPage} exact />
          <Route path="/view/:id" component={ViewPage} exact />
        </Switch>
      </Suspense>
    </div>
  );
}

最適化コードを適用した場合、バンドルされたファイルは以下のようになります.

以下に示すように、生成された여러개의 chunk.js 파일がネットワーク上に見られる.

3.テキストの圧縮

ページにログインすると、いろいろなリソースが届きます.Javascript、CSS、HTMLがあり、미리 이러한 파일들을 서버에서 압축以降に届きます.これにより小さくなり、より速くロードされます.

データ・ブロック・リソース・ファイルを表示すると、gzipで圧縮されていることがわかります.

👉 レンダリングパフォーマンスの最適化(Optimize Render Performance)

1.Bottleネックコードの最適化

JavaScriptコードによっては遅いかもしれないサービスを開発しました.どのコードが遅いかを知るには、これらのコードを見つけて解決する方法を知っておく必要があります.
Chrome開発者ツールのPerformanceラベルでは、どの部分が長くボトルネックになっているかを特定できます.

上の写真を見ると、Articleというコンポーネントが長い間動いているのが見えます.

以上のように,どの関数が長時間かかったかをより詳細に調べることができる.3つのシナリオで最適化する予定

を使用して、関数と正規表現

を置換します.
ライブラリを使用して

の特殊文字(削除-削除)

をクリア

のワークロードを削減(実際の可視データのみを処理)

以下はremoveSpecialCharactor関数の非最適化コードと最適化コードです.
<最適化されていないコード>

/*
 * 파라미터로 넘어온 문자열에서 일부 특수문자를 제거하는 함수
 * (Markdown으로 된 문자열의 특수문자를 제거하기 위함)
 * */
  let _str = str;
  let i = 0,
    j = 0;

  for (i = 0; i < removeCharacters.length; i++) {
    j = 0;
    while (j < _str.length) {
      if (_str[j] === removeCharacters[i]) {
        _str = _str.substring(0, j).concat(_str.substring(j + 1));
        continue;
      }
      j++;
    }
  }

<最適化コード>

  let _str = str.substring(0, 300);
  _str = _str.replace(/[\#\_\*\~\&\;\!\[\]\`\>\=\-\n]/g, "");

  return _str;

最適化コードで記述すると、Frame Chartの幅は以下のように大幅に減少する.

😄 ブログサイト最適化第2部

後で作成...