[{"data":1,"prerenderedAt":1105},["ShallowReactive",2],{"content-/lighthouse-performance-improvement":3,"all-pages-for-dir":1084,"related-/lighthouse-performance-improvement":1085,"og-image-/lighthouse-performance-improvement":1104},{"id":4,"title":5,"body":6,"category":1069,"concepts":1069,"description":1070,"extension":1071,"meta":1072,"navigation":1073,"ogImage":1069,"path":1074,"project_name":1069,"published":1075,"publishedAt":1076,"seo":1077,"source":1069,"stem":1078,"tags":1079,"todo":1069,"unpublished":1075,"updatedAt":1076,"__hash__":1083},"pages/2025-12/2025-12-04/lighthouse-performance-improvement.md","Lighthouseパフォーマンス改善記録",{"type":7,"value":8,"toc":1046},"minimark",[9,13,24,28,35,38,42,119,125,129,134,222,226,308,311,329,332,335,339,387,391,433,437,479,481,484,488,494,500,509,613,616,627,632,647,802,807,814,816,820,824,828,832,834,837,840,900,903,954,957,966,969,977,979,982,1017,1020,1042],[10,11,5],"h1",{"id":12},"lighthouseパフォーマンス改善記録",[14,15,16,17],"p",{},"本番環境（",[18,19,23],"a",{"href":20,"rel":21},"https://log.eurekapu.com/%EF%BC%89%E3%81%AELighthouse%E6%B8%AC%E5%AE%9A%E7%B5%90%E6%9E%9C%E3%81%AB%E5%9F%BA%E3%81%A5%E3%81%8F%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E6%94%B9%E5%96%84%E3%81%AE%E8%A8%98%E9%8C%B2%E3%80%82",[22],"nofollow","https://log.eurekapu.com/）のLighthouse測定結果に基づくパフォーマンス改善の記録。",[25,26,27],"h2",{"id":27},"測定日時",[29,30,31],"ul",{},[32,33,34],"li",{},"初回測定: 2025-12-04",[25,36,37],{"id":37},"改善前の状態",[39,40,41],"h3",{"id":41},"全体スコア",[43,44,45,67],"table",{},[46,47,48],"thead",{},[49,50,51,55,58,61,64],"tr",{},[52,53,54],"th",{},"ページ",[52,56,57],{},"Performance",[52,59,60],{},"Accessibility",[52,62,63],{},"Best Practices",[52,65,66],{},"SEO",[68,69,70,87,101],"tbody",{},[49,71,72,76,79,82,84],{},[73,74,75],"td",{},"/",[73,77,78],{},"96",[73,80,81],{},"100",[73,83,81],{},[73,85,86],{},"91",[49,88,89,92,95,97,99],{},[73,90,91],{},"/about",[73,93,94],{},"98",[73,96,81],{},[73,98,81],{},[73,100,86],{},[49,102,103,106,112,115,117],{},[73,104,105],{},"/blog",[73,107,108],{},[109,110,111],"strong",{},"43",[73,113,114],{},"95",[73,116,81],{},[73,118,86],{},[14,120,121,124],{},[122,123,105],"code",{}," ページのパフォーマンスが特に低い。",[39,126,128],{"id":127},"blog-ページの詳細分析","/blog ページの詳細分析",[130,131,133],"h4",{"id":132},"core-web-vitals","Core Web Vitals",[43,135,136,152],{},[46,137,138],{},[49,139,140,143,146,149],{},[52,141,142],{},"指標",[52,144,145],{},"値",[52,147,148],{},"基準",[52,150,151],{},"状態",[68,153,154,168,181,195,209],{},[49,155,156,159,162,165],{},[73,157,158],{},"First Contentful Paint (FCP)",[73,160,161],{},"8.6秒",[73,163,164],{},"\u003C 1.8秒",[73,166,167],{},"❌",[49,169,170,173,176,179],{},[73,171,172],{},"Largest Contentful Paint (LCP)",[73,174,175],{},"10.4秒",[73,177,178],{},"\u003C 2.5秒",[73,180,167],{},[49,182,183,186,189,192],{},[73,184,185],{},"Total Blocking Time (TBT)",[73,187,188],{},"550ms",[73,190,191],{},"\u003C 200ms",[73,193,194],{},"⚠️",[49,196,197,200,203,206],{},[73,198,199],{},"Cumulative Layout Shift (CLS)",[73,201,202],{},"0",[73,204,205],{},"\u003C 0.1",[73,207,208],{},"✅",[49,210,211,214,217,220],{},[73,212,213],{},"Speed Index",[73,215,216],{},"8.8秒",[73,218,219],{},"\u003C 3.4秒",[73,221,167],{},[130,223,225],{"id":224},"問題点diagnostics","問題点（DIAGNOSTICS）",[227,228,229,246,259,272,285,298],"ol",{},[32,230,231,234],{},[109,232,233],{},"Reduce initial server response time",[29,235,236,243],{},[32,237,238,239,242],{},"サーバー応答時間: ",[109,240,241],{},"1,960ms","（約2秒）",[32,244,245],{},"原因: サーバーサイドでの記事一覧取得・レンダリング処理",[32,247,248,251],{},[109,249,250],{},"Largest Contentful Paint element",[29,252,253,256],{},[32,254,255],{},"LCP要素の表示に10,390ms",[32,257,258],{},"原因: サーバー応答遅延の影響",[32,260,261,264],{},[109,262,263],{},"Eliminate render-blocking resources",[29,265,266,269],{},[32,267,268],{},"削減可能: 750ms",[32,270,271],{},"原因: CSS/JSのレンダーブロッキング",[32,273,274,277],{},[109,275,276],{},"Reduce unused JavaScript",[29,278,279,282],{},[32,280,281],{},"削減可能: 24 KiB",[32,283,284],{},"原因: 未使用のJSコードがバンドルに含まれている",[32,286,287,290],{},[109,288,289],{},"Avoid long main-thread tasks",[29,291,292,295],{},[32,293,294],{},"5個の長いタスクを検出",[32,296,297],{},"原因: JavaScriptの実行時間が長い",[32,299,300,303],{},[109,301,302],{},"Serve static assets with efficient cache policy",[29,304,305],{},[32,306,307],{},"1リソースでキャッシュ設定不足",[130,309,310],{"id":310},"その他の問題",[29,312,313,323],{},[32,314,315,318,319,322],{},[109,316,317],{},"SEO (91点)",": ",[122,320,321],{},"robots.txt is not valid"," - robots.txtにエラーあり",[32,324,325,328],{},[109,326,327],{},"Accessibility (95点)",": コントラスト比が不十分な箇所あり",[330,331],"hr",{},[25,333,334],{"id":334},"改善計画",[39,336,338],{"id":337},"優先度-高","優先度: 高",[43,340,341,357],{},[46,342,343],{},[49,344,345,348,351,354],{},[52,346,347],{},"#",[52,349,350],{},"対策",[52,352,353],{},"期待効果",[52,355,356],{},"難易度",[68,358,359,373],{},[49,360,361,364,367,370],{},[73,362,363],{},"1",[73,365,366],{},"サーバー応答時間の改善",[73,368,369],{},"FCP/LCP大幅改善",[73,371,372],{},"中",[49,374,375,378,381,384],{},[73,376,377],{},"2",[73,379,380],{},"robots.txtのエラー修正",[73,382,383],{},"SEO改善",[73,385,386],{},"低",[39,388,390],{"id":389},"優先度-中","優先度: 中",[43,392,393,405],{},[46,394,395],{},[49,396,397,399,401,403],{},[52,398,347],{},[52,400,350],{},[52,402,353],{},[52,404,356],{},[68,406,407,420],{},[49,408,409,412,415,418],{},[73,410,411],{},"3",[73,413,414],{},"レンダーブロッキングリソースの最適化",[73,416,417],{},"750ms削減",[73,419,372],{},[49,421,422,425,428,431],{},[73,423,424],{},"4",[73,426,427],{},"未使用JavaScriptの削減",[73,429,430],{},"24KiB削減",[73,432,386],{},[39,434,436],{"id":435},"優先度-低","優先度: 低",[43,438,439,451],{},[46,440,441],{},[49,442,443,445,447,449],{},[52,444,347],{},[52,446,350],{},[52,448,353],{},[52,450,356],{},[68,452,453,466],{},[49,454,455,458,461,464],{},[73,456,457],{},"5",[73,459,460],{},"キャッシュポリシーの最適化",[73,462,463],{},"リピートアクセス高速化",[73,465,386],{},[49,467,468,471,474,477],{},[73,469,470],{},"6",[73,472,473],{},"コントラスト比の改善",[73,475,476],{},"A11y向上",[73,478,386],{},[330,480],{},[25,482,483],{"id":483},"実装内容",[39,485,487],{"id":486},"_1-サーバー応答時間の改善","1. サーバー応答時間の改善",[14,489,490,493],{},[109,491,492],{},"実施日",": 2025-12-04",[14,495,496,499],{},[109,497,498],{},"原因分析",":",[14,501,502,504,505,508],{},[122,503,105],{},"ページでは",[122,506,507],{},"queryCollection('pages').all()","を使用して、130件以上のコンテンツを全フィールド取得していた。",[510,511,516],"pre",{"className":512,"code":513,"language":514,"meta":515,"style":515},"language-javascript shiki shiki-themes vitesse-light vitesse-light","// 改善前: 全フィールドを取得\nconst { data: contentArticles } = await useAsyncData('blog-content-articles', () =>\n  queryCollection('pages').all()\n)\n","javascript","",[122,517,518,527,583,607],{"__ignoreMap":515},[519,520,523],"span",{"class":521,"line":522},"line",1,[519,524,526],{"class":525},"sxvE3","// 改善前: 全フィールドを取得\n",[519,528,530,534,538,542,544,547,550,553,557,561,564,568,572,574,577,580],{"class":521,"line":529},2,[519,531,533],{"class":532},"stQ0i","const",[519,535,537],{"class":536},"shFtX"," {",[519,539,541],{"class":540},"s4oTP"," data",[519,543,499],{"class":536},[519,545,546],{"class":540}," contentArticles",[519,548,549],{"class":536}," }",[519,551,552],{"class":536}," =",[519,554,556],{"class":555},"sHkkW"," await",[519,558,560],{"class":559},"senZ8"," useAsyncData",[519,562,563],{"class":536},"(",[519,565,567],{"class":566},"sMJiu","'",[519,569,571],{"class":570},"sdGka","blog-content-articles",[519,573,567],{"class":566},[519,575,576],{"class":536},",",[519,578,579],{"class":536}," ()",[519,581,582],{"class":536}," =>\n",[519,584,586,589,591,593,596,598,601,604],{"class":521,"line":585},3,[519,587,588],{"class":559},"  queryCollection",[519,590,563],{"class":536},[519,592,567],{"class":566},[519,594,595],{"class":570},"pages",[519,597,567],{"class":566},[519,599,600],{"class":536},").",[519,602,603],{"class":559},"all",[519,605,606],{"class":536},"()\n",[519,608,610],{"class":521,"line":609},4,[519,611,612],{"class":536},")\n",[14,614,615],{},"問題点：",[29,617,618,621,624],{},[32,619,620],{},"全130ファイルの全フィールド（本文含む）を取得",[32,622,623],{},"クライアント側でソート処理を実行",[32,625,626],{},"不要なデータ転送によるレスポンス遅延",[14,628,629,499],{},[109,630,631],{},"実装",[227,633,634,641],{},[32,635,636,637,640],{},"必要なフィールドのみ選択（",[122,638,639],{},"select()","）",[32,642,643,644,640],{},"DB側でソート（",[122,645,646],{},"order()",[510,648,650],{"className":512,"code":649,"language":514,"meta":515,"style":515},"// 改善後: 必要なフィールドのみ、DB側でソート\nconst { data: contentArticles } = await useAsyncData('blog-content-articles', () =>\n  queryCollection('pages')\n    .select('title', 'description', 'path', 'tags', 'publishedAt')\n    .order('publishedAt', 'DESC')\n    .all()\n)\n",[122,651,652,657,691,705,761,788,797],{"__ignoreMap":515},[519,653,654],{"class":521,"line":522},[519,655,656],{"class":525},"// 改善後: 必要なフィールドのみ、DB側でソート\n",[519,658,659,661,663,665,667,669,671,673,675,677,679,681,683,685,687,689],{"class":521,"line":529},[519,660,533],{"class":532},[519,662,537],{"class":536},[519,664,541],{"class":540},[519,666,499],{"class":536},[519,668,546],{"class":540},[519,670,549],{"class":536},[519,672,552],{"class":536},[519,674,556],{"class":555},[519,676,560],{"class":559},[519,678,563],{"class":536},[519,680,567],{"class":566},[519,682,571],{"class":570},[519,684,567],{"class":566},[519,686,576],{"class":536},[519,688,579],{"class":536},[519,690,582],{"class":536},[519,692,693,695,697,699,701,703],{"class":521,"line":585},[519,694,588],{"class":559},[519,696,563],{"class":536},[519,698,567],{"class":566},[519,700,595],{"class":570},[519,702,567],{"class":566},[519,704,612],{"class":536},[519,706,707,710,713,715,717,720,722,724,727,730,732,734,736,739,741,743,745,748,750,752,754,757,759],{"class":521,"line":609},[519,708,709],{"class":536},"    .",[519,711,712],{"class":559},"select",[519,714,563],{"class":536},[519,716,567],{"class":566},[519,718,719],{"class":570},"title",[519,721,567],{"class":566},[519,723,576],{"class":536},[519,725,726],{"class":566}," '",[519,728,729],{"class":570},"description",[519,731,567],{"class":566},[519,733,576],{"class":536},[519,735,726],{"class":566},[519,737,738],{"class":570},"path",[519,740,567],{"class":566},[519,742,576],{"class":536},[519,744,726],{"class":566},[519,746,747],{"class":570},"tags",[519,749,567],{"class":566},[519,751,576],{"class":536},[519,753,726],{"class":566},[519,755,756],{"class":570},"publishedAt",[519,758,567],{"class":566},[519,760,612],{"class":536},[519,762,764,766,769,771,773,775,777,779,781,784,786],{"class":521,"line":763},5,[519,765,709],{"class":536},[519,767,768],{"class":559},"order",[519,770,563],{"class":536},[519,772,567],{"class":566},[519,774,756],{"class":570},[519,776,567],{"class":566},[519,778,576],{"class":536},[519,780,726],{"class":566},[519,782,783],{"class":570},"DESC",[519,785,567],{"class":566},[519,787,612],{"class":536},[519,789,791,793,795],{"class":521,"line":790},6,[519,792,709],{"class":536},[519,794,603],{"class":559},[519,796,606],{"class":536},[519,798,800],{"class":521,"line":799},7,[519,801,612],{"class":536},[14,803,804,499],{},[109,805,806],{},"コード変更",[29,808,809],{},[32,810,811],{},[122,812,813],{},"apps/web/app/pages/blog/index.vue:12-18",[330,815],{},[39,817,819],{"id":818},"_2-robotstxtのエラー修正","2. robots.txtのエラー修正",[14,821,822,493],{},[109,823,492],{},[14,825,826,499],{},[109,827,498],{},[14,829,830,499],{},[109,831,631],{},[330,833],{},[25,835,836],{"id":836},"改善結果",[39,838,839],{"id":839},"改善後のスコア",[43,841,842,857],{},[46,843,844],{},[49,845,846,848,851,854],{},[52,847,54],{},[52,849,850],{},"Performance (前)",[52,852,853],{},"Performance (後)",[52,855,856],{},"改善幅",[68,858,859,871,883],{},[49,860,861,863,865,868],{},[73,862,75],{},[73,864,78],{},[73,866,867],{},"99",[73,869,870],{},"+3",[49,872,873,875,877,880],{},[73,874,91],{},[73,876,94],{},[73,878,879],{},"97",[73,881,882],{},"-1",[49,884,885,887,891,895],{},[73,886,105],{},[73,888,889],{},[109,890,111],{},[73,892,893],{},[109,894,78],{},[73,896,897],{},[109,898,899],{},"+53",[39,901,902],{"id":902},"全体平均",[43,904,905,917],{},[46,906,907],{},[49,908,909,911,914],{},[52,910,142],{},[52,912,913],{},"改善前",[52,915,916],{},"改善後",[68,918,919,930,938,946],{},[49,920,921,923,926],{},[73,922,57],{},[73,924,925],{},"79",[73,927,928],{},[109,929,879],{},[49,931,932,934,936],{},[73,933,60],{},[73,935,94],{},[73,937,94],{},[49,939,940,942,944],{},[73,941,63],{},[73,943,81],{},[73,945,81],{},[49,947,948,950,952],{},[73,949,66],{},[73,951,86],{},[73,953,86],{},[39,955,956],{"id":956},"改善の効果",[14,958,959,961,962,965],{},[122,960,105],{}," ページのパフォーマンスが ",[109,963,964],{},"43 → 96"," に大幅改善（+53ポイント）。",[14,967,968],{},"主な要因：",[29,970,971,974],{},[32,972,973],{},"サーバー応答時間の短縮（クエリ最適化による）",[32,975,976],{},"データ転送量の削減（必要なフィールドのみ取得）",[330,978],{},[25,980,981],{"id":981},"学んだこと",[227,983,984,996,1005,1011],{},[32,985,986,318,989,992,993,995],{},[109,987,988],{},"クエリの最適化が重要",[122,990,991],{},"queryCollection().all()","は全フィールドを取得するため、大量のコンテンツがある場合は",[122,994,639],{},"で必要なフィールドのみ取得する",[32,997,998,1001,1002,1004],{},[109,999,1000],{},"DB側でのソートが効率的",": クライアント側でソートするより、",[122,1003,646],{},"でDB側でソートした方が効率的",[32,1006,1007,1010],{},[109,1008,1009],{},"開発サーバー vs 本番の差",": 開発サーバーでのスコアは本番より大幅に低くなる。正確な測定には本番環境を使用すべき",[32,1012,1013,1016],{},[109,1014,1015],{},"Lighthouse CIの活用",": ローカルで簡単に本番環境のパフォーマンスを測定できる。デプロイ前後の比較に有用",[25,1018,1019],{"id":1019},"参考リンク",[29,1021,1022,1029,1035],{},[32,1023,1024],{},[18,1025,1028],{"href":1026,"rel":1027},"https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/",[22],"Lighthouse Performance Scoring",[32,1030,1031],{},[18,1032,133],{"href":1033,"rel":1034},"https://web.dev/vitals/",[22],[32,1036,1037],{},[18,1038,1041],{"href":1039,"rel":1040},"https://web.dev/optimize-lcp/",[22],"Optimize LCP",[1043,1044,1045],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":515,"searchDepth":529,"depth":529,"links":1047},[1048,1049,1053,1058,1062,1067,1068],{"id":27,"depth":529,"text":27},{"id":37,"depth":529,"text":37,"children":1050},[1051,1052],{"id":41,"depth":585,"text":41},{"id":127,"depth":585,"text":128},{"id":334,"depth":529,"text":334,"children":1054},[1055,1056,1057],{"id":337,"depth":585,"text":338},{"id":389,"depth":585,"text":390},{"id":435,"depth":585,"text":436},{"id":483,"depth":529,"text":483,"children":1059},[1060,1061],{"id":486,"depth":585,"text":487},{"id":818,"depth":585,"text":819},{"id":836,"depth":529,"text":836,"children":1063},[1064,1065,1066],{"id":839,"depth":585,"text":839},{"id":902,"depth":585,"text":902},{"id":956,"depth":585,"text":956},{"id":981,"depth":529,"text":981},{"id":1019,"depth":529,"text":1019},null,"/blogページのパフォーマンス問題を分析し、改善を実施した記録","md",{},true,"/lighthouse-performance-improvement",false,"2025-12-04T00:00:00.000Z",{"title":5,"description":1070},"2025-12/2025-12-04/lighthouse-performance-improvement",[1080,1081,1082],"lighthouse","performance","optimization","5OnqkRiTvCm1MkMUhxSIYjMTilcmRFoGA02hyTmrOHM",[],[1086,1089,1092,1096,1100],{"title":1087,"path":1088,"publishedAt":1076},"Lighthouse CI ローカルセットアップガイド","/lighthouse-ci-local-setup",{"title":1090,"path":1091,"publishedAt":1076},"Lighthouse テスト実行ガイド","/lighthouse-testing-guide",{"title":1093,"path":1094,"publishedAt":1095},"Chrome DevTools for agents 1.0 が出た — Claude Codeの表示確認フローに何を足せるか","/chrome-devtools-for-agents-v1","2026-07-07T00:00:00.000Z",{"title":1097,"path":1098,"publishedAt":1099},"検索ページ（/search）パフォーマンス改善計画","/search-page-performance-plan","2026-01-29T00:00:00.000Z",{"title":1101,"path":1102,"publishedAt":1103},"Nuxt 4 + @nuxt/content の開発サーバー起動が遅い原因と対策","/nuxt-dev-startup-time","2026-01-10T00:00:00.000Z","https://log.eurekapu.com/og/blog/lighthouse-performance-improvement.png?v=2025-12-04T00%3A00%3A00.000Z&title=Lighthouse%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E6%94%B9%E5%96%84%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=ac767dfa9cb7f6bb",1785654671709]