![\"\"](\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\")
\u751f\u5f92<\/span><\/div>Web\u30b5\u30a4\u30c8\u306eLighthouse\u30b9\u30b3\u30a2\u3092100\u70b9\u306b\u3057\u305f\u3044\u3093\u3067\u3059\u304c\u3001\u3069\u3046\u3059\u308c\u3070\u826f\u3044\u3067\u3057\u3087\u3046\u304b\uff1f<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n \u3088\u30fc\u304f\u805e\u304f\u3093\u3060\u305e\uff01Lighthouse\u30b9\u30b3\u30a2100\u70b9\u306f\u7c21\u5358\u3067\u306f\u306a\u3044\u304c\u3001\u6b63\u3057\u3044\u624b\u6cd5\u3092\u5b9f\u8df5\u3059\u308c\u3070\u9054\u6210\u3067\u304d\u308b\u3093\u3058\u3083\u3002\u4eca\u65e5\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u5177\u4f53\u7684\u306a\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3059\u308b\u305e\u3044\uff01<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n Web\u30b5\u30a4\u30c8\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u3068SEO\u306e\u4e21\u65b9\u306b\u76f4\u63a5\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u91cd\u8981\u306a\u8981\u7d20\u3067\u3059\u3002Google\u304c\u63d0\u4f9b\u3059\u308bLighthouse\u306f\u3001\u30b5\u30a4\u30c8\u306e\u54c1\u8cea\u3092\u6e2c\u5b9a\u3059\u308b\u6a19\u6e96\u7684\u306a\u30c4\u30fc\u30eb\u3068\u3057\u3066\u5e83\u304f\u4f7f\u308f\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30b9\u30b3\u30a2100\u70b9\u3092\u9054\u6210\u3057\u7dad\u6301\u3059\u308b\u3053\u3068\u306f\u6c7a\u3057\u3066\u7c21\u5358\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n \u672c\u8a18\u4e8b\u3067\u306f\u3001Lighthouse\u30b9\u30b3\u30a2100\u70b9\u3092\u9054\u6210\u3059\u308b\u305f\u3081\u306e\u5177\u4f53\u7684\u306a\u624b\u6cd5\u3092\u3001\u57fa\u790e\u304b\u3089\u5b9f\u88c5\u307e\u3067<\/span><\/strong>\u3001\u5b9f\u8df5\u7684\u306a\u4f8b\u3092\u4ea4\u3048\u3066\u5fb9\u5e95\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n Lighthouse\uff08\u30e9\u30a4\u30c8\u30cf\u30a6\u30b9\uff09\u306f\u3001Google\u304c\u958b\u767a\u3057\u305fWeb\u30b5\u30a4\u30c8\u306e\u54c1\u8cea\u3092\u6e2c\u5b9a\u3059\u308b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30c4\u30fc\u30eb<\/strong>\u3067\u3059\u3002Chrome DevTools\u306b\u7d71\u5408\u3055\u308c\u3066\u304a\u308a\u3001\u8ab0\u3067\u3082\u7121\u6599\u3067\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n Lighthouse\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30b9\u30b3\u30a2\u306b\u306f\u3001Google\u304c\u5b9a\u3081\u305fCore Web Vitals<\/strong>\u304c\u5927\u304d\u304f\u5f71\u97ff\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u30aa\u30f3\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\uff1ahttps:\/\/pagespeed.web.dev\/<\/p>\n\n\n\n \u3069\u3053\u304b\u3089\u624b\u3092\u4ed8\u3051\u308c\u3070\u826f\u3044\u3067\u3059\u304b\uff1f<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n \u307e\u305a\u306f\u73fe\u72b6\u3092\u6e2c\u5b9a\u3057\u3001\u30b9\u30b3\u30a2\u304c\u4f4e\u3044\u30ab\u30c6\u30b4\u30ea\u30fc\u304b\u3089\u512a\u5148\u7684\u306b\u6539\u5584\u3057\u3066\u3044\u304f\u3093\u3058\u3083\u3002\u7279\u306b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306f\u6700\u3082\u96e3\u3057\u304f\u3001\u6700\u3082\u91cd\u8981\u3058\u3083\u305e<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n \u753b\u50cf\u306f\u6700\u3082\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u304f\u3001\u6700\u9069\u5316\u306e\u52b9\u679c\u304c\u9ad8\u3044\u8981\u7d20\u3067\u3059\u3002<\/p>\n\n\n\n WebP\u306fJPEG\/PNG\u3088\u308a25\u301c35%\u5c0f\u3055\u304f\u3001AVIF\u306f\u3055\u3089\u306b\u9ad8\u5727\u7e2e\u7387\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n\n\n HTTP\/2\u306f\u8907\u6570\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u4e26\u5217\u51e6\u7406\u3067\u304d\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u5927\u5e45\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n \u9759\u7684\u30d5\u30a1\u30a4\u30eb\u3092CDN\u304b\u3089\u914d\u4fe1\u3059\u308b\u3053\u3068\u3067\u3001\u4e16\u754c\u4e2d\u3069\u3053\u304b\u3089\u3067\u3082\u9ad8\u901f\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n LCP\u306f\u6700\u5927\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u63cf\u753b\u6642\u9593\u3067\u30012.5\u79d2\u4ee5\u5185\u304c\u76ee\u6a19\u3067\u3059\u3002<\/p>\n\n\n\n CLS\u306f\u8996\u899a\u7684\u306a\u5b89\u5b9a\u6027\u3092\u6e2c\u308b\u6307\u6a19\u3067\u30010.1\u4ee5\u4e0b\u304c\u76ee\u6a19\u3067\u3059<\/span><\/strong>\u3002<\/p>\n\n\n\n WCAG AA\u57fa\u6e96\uff1a\u901a\u5e38\u30c6\u30ad\u30b9\u30c8\u306f4.5:1\u4ee5\u4e0a\u3001\u5927\u304d\u3044\u30c6\u30ad\u30b9\u30c8\uff0818pt\u4ee5\u4e0a\uff09\u306f3:1\u4ee5\u4e0a\u306e\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n Lighthouse\u30b9\u30b3\u30a2100\u70b9\u306f\u9054\u6210\u3057\u3066\u7d42\u308f\u308a\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u30b3\u30fc\u30c9\u306e\u5909\u66f4\u3084\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u8ffd\u52a0\u3067\u30b9\u30b3\u30a2\u306f\u5909\u52d5\u3059\u308b\u305f\u3081\u3001\u7d99\u7d9a\u7684\u306a\u76e3\u8996\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n Lighthouse\u30b9\u30b3\u30a2100\u70b9\u3001\u9054\u6210\u3067\u304d\u305d\u3046\u306a\u6c17\u304c\u3057\u3066\u304d\u307e\u3057\u305f\uff01<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n \u305d\u306e\u610f\u6c17\u3058\u3083\uff01\u305f\u3060\u3057\u3001\u30b9\u30b3\u30a2100\u70b9\u306f\u300c\u4eca\u65e5\u9054\u6210\u3057\u3066\u3082\u660e\u65e5\u304c\u540c\u3058\u3068\u306f\u9650\u3089\u306a\u3044\u300d\u3053\u3068\u3092\u5fd8\u308c\u305a\u306b\u3002\u7d99\u7d9a\u7684\u306a\u76e3\u8996\u3068\u6539\u5584\u304c\u4f55\u3088\u308a\u5927\u5207\u306a\u3093\u3058\u3083\u305e\uff01<\/strong><\/p>\n<\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n![\"\"](\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.11.23.jpg\")
\u30da\u30f3\u535a\u58eb<\/span><\/div>\u3053\u306e\u8a18\u4e8b\u3067\u308f\u304b\u308b\u3053\u3068<\/h3>\n\n\n
\n
\n\n\n\nLighthouse\u3068\u306f\uff1f\u57fa\u672c\u6982\u5ff5\u3068\u8a55\u4fa1\u30ab\u30c6\u30b4\u30ea\u30fc<\/h2>\n\n\n\n
Lighthouse\u306e5\u3064\u306e\u8a55\u4fa1\u30ab\u30c6\u30b4\u30ea\u30fc<\/h3>\n\n\n\n
\u30ab\u30c6\u30b4\u30ea\u30fc<\/th> \u8a55\u4fa1\u5185\u5bb9<\/th> \u91cd\u8981\u6027<\/th><\/tr><\/thead> Performance\uff08\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\uff09<\/td> \u8aad\u307f\u8fbc\u307f\u901f\u5ea6\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u6027<\/td> \u2605\u2605\u2605\u2605\u2605<\/td><\/tr>\n Accessibility\uff08\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\uff09<\/td> \u8ab0\u3067\u3082\u4f7f\u3048\u308b\u304b\u3001\u8aad\u307f\u3084\u3059\u3055<\/td> \u2605\u2605\u2605\u2605\u2605<\/td><\/tr>\n Best Practices\uff08\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff09<\/td> \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3001\u30e2\u30c0\u30f3\u306a\u6280\u8853<\/td> \u2605\u2605\u2605\u2605\u2606<\/td><\/tr>\n SEO<\/td> \u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u6700\u9069\u5316<\/td> \u2605\u2605\u2605\u2605\u2605<\/td><\/tr>\n PWA\uff08Progressive Web App\uff09<\/td> \u30a2\u30d7\u30ea\u30e9\u30a4\u30af\u306a\u4f53\u9a13<\/td> \u2605\u2605\u2605\u2606\u2606<\/td><\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n Core Web Vitals\uff08\u30b3\u30a2\u30a6\u30a7\u30d6\u30d0\u30a4\u30bf\u30eb\uff09<\/h3>\n\n\n\n
\n
Lighthouse\u30b9\u30b3\u30a2\u306e\u6e2c\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n
1. Chrome DevTools\u3067\u6e2c\u5b9a<\/h4>\n\n\n\n
\n
2. PageSpeed Insights\u3067\u6e2c\u5b9a<\/h4>\n\n\n\n
3. Lighthouse CI\uff08\u7d99\u7d9a\u7684\u6e2c\u5b9a\uff09<\/h4>\n\n\n
# Lighthouse CI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install -g @lhci\/cli\n\n# \u6e2c\u5b9a\u306e\u5b9f\u884c\nlhci autorun --collect.url=https:\/\/example.com<\/code><\/pre><\/div>\n\n\n
\n\n\n\n\u30b9\u30b3\u30a2100\u9054\u6210\u306e\u305f\u3081\u306e\u6539\u5584\u512a\u5148\u9806\u4f4d<\/h2>\n\n\n
\u751f\u5f92<\/span><\/div>\u30da\u30f3\u535a\u58eb<\/span><\/div>\n
\n\n\n\n\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u5177\u4f53\u7684\u624b\u6cd5<\/h2>\n\n\n\n
1. \u753b\u50cf\u6700\u9069\u5316<\/h3>\n\n\n\n
\u6b21\u4e16\u4ee3\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\uff08WebP\/AVIF\uff09\u3078\u306e\u5909\u63db<\/h4>\n\n\n\n
<!-- picture\u30bf\u30b0\u3067\u8907\u6570\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092\u63d0\u4f9b -->\n<picture>\n <source srcset=\"image.avif\" type=\"image\/avif\">\n <source srcset=\"image.webp\" type=\"image\/webp\">\n <img src=\"image.jpg\" alt=\"\u8aac\u660e\u6587\" loading=\"lazy\" decoding=\"async\">\n<\/picture><\/code><\/pre><\/div>\n\n\n\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u753b\u50cf\u306e\u5b9f\u88c5<\/h4>\n\n\n
<img\n src=\"image-800.jpg\"\n srcset=\"\n image-400.jpg 400w,\n image-800.jpg 800w,\n image-1200.jpg 1200w,\n image-1600.jpg 1600w\n \"\n sizes=\"\n (max-width: 600px) 400px,\n (max-width: 1200px) 800px,\n 1200px\n \"\n alt=\"\u8aac\u660e\u6587\"\n loading=\"lazy\"\n decoding=\"async\"\n width=\"800\"\n height=\"600\"\n\/><\/code><\/pre><\/div>\n\n\n\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\uff08Lazy Loading\uff09<\/h4>\n\n\n
<!-- \u30cd\u30a4\u30c6\u30a3\u30d6Lazy Loading -->\n<img src=\"image.jpg\" alt=\"\u8aac\u660e\u6587\" loading=\"lazy\" decoding=\"async\">\n\n<!-- iframe\u306b\u3082\u9069\u7528\u53ef\u80fd -->\n<iframe src=\"https:\/\/example.com\" loading=\"lazy\"><\/iframe><\/code><\/pre><\/div>\n\n\n\u753b\u50cf\u30b5\u30a4\u30ba\u306e\u6307\u5b9a\uff08CLS\u5bfe\u7b56\uff09<\/h4>\n\n\n
<!-- width\u3068height\u3092\u5fc5\u305a\u6307\u5b9a -->\n<img\n src=\"image.jpg\"\n alt=\"\u8aac\u660e\u6587\"\n width=\"800\"\n height=\"600\"\n loading=\"lazy\"\n\/>\n\n<!-- CSS\u3067\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092\u7dad\u6301 -->\n<style>\n img {\n max-width: 100%;\n height: auto;\n }\n<\/style><\/code><\/pre><\/div>\n\n\n2. JavaScript\u6700\u9069\u5316<\/h3>\n\n\n\n
\u672a\u4f7f\u7528JavaScript\u306e\u524a\u9664<\/h4>\n\n\n
\/\/ \u274c \u60aa\u3044\u4f8b\uff1a\u5168\u3066\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\nimport _ from 'lodash';\n\n\/\/ \u2705 \u826f\u3044\u4f8b\uff1a\u5fc5\u8981\u306a\u95a2\u6570\u306e\u307f\u30a4\u30f3\u30dd\u30fc\u30c8\nimport debounce from 'lodash\/debounce';\n\n\/\/ \u307e\u305f\u306f\u3001Tree Shaking\u304c\u6709\u52b9\u306a\u66f8\u304d\u65b9\nimport { debounce } from 'lodash-es';<\/code><\/pre><\/div>\n\n\n\u30b3\u30fc\u30c9\u5206\u5272\uff08Code Splitting\uff09<\/h4>\n\n\n
\/\/ Next.js\u3067\u306e\u52d5\u7684\u30a4\u30f3\u30dd\u30fc\u30c8\nimport dynamic from 'next\/dynamic';\n\n\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u52d5\u7684\u306b\u8aad\u307f\u8fbc\u3080\nconst DynamicComponent = dynamic(() => import('.\/HeavyComponent'), {\n loading: () => <p>\u8aad\u307f\u8fbc\u307f\u4e2d...<\/p>,\n ssr: false \/\/ \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u306e\u307f\u8aad\u307f\u8fbc\u3080\n});\n\n\/\/ React\u6a19\u6e96\u306e\u52d5\u7684\u30a4\u30f3\u30dd\u30fc\u30c8\nconst LazyComponent = React.lazy(() => import('.\/LazyComponent'));\n\nfunction App() {\n return (\n <Suspense fallback={<div>Loading...<\/div>}>\n <LazyComponent \/>\n <\/Suspense>\n );\n}<\/code><\/pre><\/div>\n\n\n\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u6700\u9069\u306a\u8aad\u307f\u8fbc\u307f<\/h4>\n\n\n
<!-- defer: DOM\u304c\u5b8c\u5168\u306b\u30d1\u30fc\u30b9\u3055\u308c\u305f\u5f8c\u306b\u5b9f\u884c -->\n<script src=\"script.js\" defer><\/script>\n\n<!-- async: \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5b8c\u4e86\u6b21\u7b2c\u5b9f\u884c\uff08\u9806\u5e8f\u4fdd\u8a3c\u306a\u3057\uff09 -->\n<script src=\"analytics.js\" async><\/script>\n\n<!-- type=\"module\": ES Modules\u3068\u3057\u3066\u8aad\u307f\u8fbc\u307f\uff08\u81ea\u52d5\u3067defer\uff09 -->\n<script type=\"module\" src=\"app.js\"><\/script><\/code><\/pre><\/div>\n\n\n\u91cd\u8981\u306aJavaScript\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u5316<\/h4>\n\n\n
<!-- \u30af\u30ea\u30c6\u30a3\u30ab\u30eb\u306a\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u30a4\u30f3\u30e9\u30a4\u30f3\u5316 -->\n<script>\n \/\/ \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5207\u308a\u66ff\u3048\u306a\u3069\u3001\u5373\u5ea7\u306b\u5b9f\u884c\u3057\u305f\u3044\u30b3\u30fc\u30c9\n (function() {\n const theme = localStorage.getItem('theme');\n if (theme === 'dark') {\n document.documentElement.classList.add('dark');\n }\n })();\n<\/script><\/code><\/pre><\/div>\n\n\n3. CSS\u6700\u9069\u5316<\/h3>\n\n\n\n
\u672a\u4f7f\u7528CSS\u306e\u524a\u9664<\/h4>\n\n\n
\/\/ PurgeCSS\u306e\u8a2d\u5b9a\uff08Tailwind CSS\u4f7f\u7528\u6642\uff09\n\/\/ tailwind.config.js\nmodule.exports = {\n content: [\n '.\/pages\/**\/*.{js,ts,jsx,tsx}',\n '.\/components\/**\/*.{js,ts,jsx,tsx}',\n ],\n \/\/ \u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u30af\u30e9\u30b9\u306e\u307f\u30d3\u30eb\u30c9\u306b\u542b\u307e\u308c\u308b\n}<\/code><\/pre><\/div>\n\n\n\u30af\u30ea\u30c6\u30a3\u30ab\u30ebCSS\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u5316<\/h4>\n\n\n
<!-- \u30d5\u30a1\u30fc\u30b9\u30c8\u30d3\u30e5\u30fc\u306b\u5fc5\u8981\u306aCSS\u3092\u30a4\u30f3\u30e9\u30a4\u30f3\u5316 -->\n<style>\n \/* \u30af\u30ea\u30c6\u30a3\u30ab\u30ebCSS\uff08Above the Fold\uff09 *\/\n body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n }\n\n .header {\n background: #fff;\n padding: 1rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n<\/style>\n\n<!-- \u6b8b\u308a\u306eCSS\u306f\u975e\u540c\u671f\u3067\u8aad\u307f\u8fbc\u3080 -->\n<link rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n<noscript><link rel=\"stylesheet\" href=\"styles.css\"><\/noscript><\/code><\/pre><\/div>\n\n\nCSS Minification\uff08\u5727\u7e2e\uff09<\/h4>\n\n\n
\/\/ Next.js\u306f\u81ea\u52d5\u3067\u5727\u7e2e\u3055\u308c\u308b\u304c\u3001\u624b\u52d5\u306e\u5834\u5408\uff1a\n\/\/ package.json\n{\n \"scripts\": {\n \"build:css\": \"postcss src\/styles.css -o dist\/styles.min.css\"\n },\n \"devDependencies\": {\n \"postcss\": \"^8.4.0\",\n \"postcss-cli\": \"^10.0.0\",\n \"cssnano\": \"^6.0.0\"\n }\n}<\/code><\/pre><\/div>\n\n\n4. \u30d5\u30a9\u30f3\u30c8\u6700\u9069\u5316<\/h3>\n\n\n\n
\u30d5\u30a9\u30f3\u30c8\u306e\u6700\u9069\u306a\u8aad\u307f\u8fbc\u307f<\/h4>\n\n\n
<!-- Google Fonts\u306e\u6700\u9069\u306a\u8aad\u307f\u8fbc\u307f -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700&display=swap\"\n rel=\"stylesheet\"\n>\n\n<style>\n \/* \u30d5\u30a9\u30f3\u30c8\u8aad\u307f\u8fbc\u307f\u4e2d\u306e\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af *\/\n body {\n font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;\n }\n<\/style><\/code><\/pre><\/div>\n\n\nNext.js Font Optimization\u306e\u6d3b\u7528<\/h4>\n\n\n
\/\/ app\/layout.tsx\nimport { Noto_Sans_JP } from 'next\/font\/google';\n\nconst notoSansJP = Noto_Sans_JP({\n weight: ['400', '700'],\n subsets: ['latin'],\n display: 'swap',\n preload: true,\n});\n\nexport default function RootLayout({ children }) {\n return (\n <html lang=\"ja\" className={notoSansJP.className}>\n <body>{children}<\/body>\n <\/html>\n );\n}<\/code><\/pre><\/div>\n\n\n5. \u30b5\u30fc\u30d0\u30fc\u30fb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u6700\u9069\u5316<\/h3>\n\n\n\n
HTTP\/2\u306e\u6709\u52b9\u5316<\/h4>\n\n\n\n
# Nginx\u306e\u8a2d\u5b9a\u4f8b\nserver {\n listen 443 ssl http2;\n server_name example.com;\n\n ssl_certificate \/path\/to\/cert.pem;\n ssl_certificate_key \/path\/to\/key.pem;\n\n # \u305d\u306e\u4ed6\u306e\u8a2d\u5b9a...\n}<\/code><\/pre><\/div>\n\n\nGzip\/Brotli\u5727\u7e2e<\/h4>\n\n\n
# Nginx\u306e\u8a2d\u5b9a\u4f8b\ngzip on;\ngzip_vary on;\ngzip_min_length 1024;\ngzip_types\n text\/plain\n text\/css\n text\/xml\n text\/javascript\n application\/javascript\n application\/json\n application\/xml+rss\n image\/svg+xml;\n\n# Brotli\u5727\u7e2e\uff08\u3088\u308a\u9ad8\u5727\u7e2e\u7387\uff09\nbrotli on;\nbrotli_types\n text\/plain\n text\/css\n text\/xml\n text\/javascript\n application\/javascript\n application\/json;<\/code><\/pre><\/div>\n\n\n\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u8a2d\u5b9a<\/h4>\n\n\n
# Nginx\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\nlocation ~* \\.(jpg|jpeg|png|gif|ico|css|js|woff|woff2)$ {\n expires 1y;\n add_header Cache-Control \"public, immutable\";\n}\n\n# HTML\u306f\u77ed\u3081\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\nlocation ~* \\.html$ {\n expires 1h;\n add_header Cache-Control \"public, must-revalidate\";\n}<\/code><\/pre><\/div>\n\n\nCDN\u306e\u6d3b\u7528<\/h4>\n\n\n\n
\n
\n\n\n\nCore Web Vitals\u6700\u9069\u5316<\/h2>\n\n\n\n
LCP\uff08Largest Contentful Paint\uff09\u306e\u6539\u5584<\/h3>\n\n\n\n
\n
\/\/ LCP\u8981\u7d20\u3092\u7279\u5b9a\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\nnew PerformanceObserver((list) => {\n const entries = list.getEntries();\n const lastEntry = entries[entries.length - 1];\n console.log('LCP element:', lastEntry.element);\n console.log('LCP time:', lastEntry.startTime);\n}).observe({ entryTypes: ['largest-contentful-paint'] });<\/code><\/pre><\/div>\n\n\n\n
<!-- \u30d2\u30fc\u30ed\u30fc\u753b\u50cf\u3092\u30d7\u30ea\u30ed\u30fc\u30c9 -->\n<link rel=\"preload\" as=\"image\" href=\"hero.jpg\" fetchpriority=\"high\">\n\n<!-- \u91cd\u8981\u306a\u30d5\u30a9\u30f3\u30c8\u3092\u30d7\u30ea\u30ed\u30fc\u30c9 -->\n<link rel=\"preload\" as=\"font\" href=\"font.woff2\" type=\"font\/woff2\" crossorigin><\/code><\/pre><\/div>\n\n\n\n
FID\/INP\uff08First Input Delay \/ Interaction to Next Paint\uff09\u306e\u6539\u5584<\/h3>\n\n\n\n
\n
\/\/ \u274c \u60aa\u3044\u4f8b\uff1a\u91cd\u3044\u51e6\u7406\u3092\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3067\u5b9f\u884c\nfunction heavyCalculation() {\n for (let i = 0; i < 1000000; i++) {\n \/\/ \u91cd\u3044\u51e6\u7406\n }\n}\n\n\/\/ \u2705 \u826f\u3044\u4f8b\uff1aWeb Worker\u3067\u5b9f\u884c\n\/\/ worker.js\nself.addEventListener('message', (e) => {\n const result = heavyCalculation(e.data);\n self.postMessage(result);\n});\n\n\/\/ main.js\nconst worker = new Worker('worker.js');\nworker.postMessage(data);\nworker.addEventListener('message', (e) => {\n console.log('Result:', e.data);\n});<\/code><\/pre><\/div>\n\n\n\n
\/\/ \u30bf\u30b9\u30af\u3092\u7d30\u304b\u304f\u5206\u5272\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u306b\u5236\u5fa1\u3092\u8fd4\u3059\nasync function processLargeArray(array) {\n const chunkSize = 100;\n\n for (let i = 0; i < array.length; i += chunkSize) {\n const chunk = array.slice(i, i + chunkSize);\n\n \/\/ \u30c1\u30e3\u30f3\u30af\u3092\u51e6\u7406\n await processChunk(chunk);\n\n \/\/ \u30d6\u30e9\u30a6\u30b6\u306b\u5236\u5fa1\u3092\u8fd4\u3059\n await new Promise(resolve => setTimeout(resolve, 0));\n }\n}<\/code><\/pre><\/div>\n\n\nCLS\uff08Cumulative Layout Shift\uff09\u306e\u6539\u5584<\/h3>\n\n\n\n
\n
<!-- \u5fc5\u305awidth\/height\u3092\u6307\u5b9a -->\n<img src=\"image.jpg\" width=\"800\" height=\"600\" alt=\"\u8aac\u660e\">\n\n<!-- aspect-ratio\u3092\u4f7f\u7528 -->\n<style>\n .image-container {\n aspect-ratio: 16 \/ 9;\n }\n<\/style><\/code><\/pre><\/div>\n\n\n\n
<!-- \u5e83\u544a\u7528\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc -->\n<div style=\"min-height: 250px;\">\n <!-- \u5e83\u544a\u30b9\u30af\u30ea\u30d7\u30c8 -->\n<\/div><\/code><\/pre><\/div>\n\n\n\n
@font-face {\n font-family: 'CustomFont';\n src: url('font.woff2') format('woff2');\n \/* \u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u30d5\u30a9\u30f3\u30c8\u3068\u306e\u30b5\u30a4\u30ba\u5dee\u3092\u8abf\u6574 *\/\n font-display: swap;\n size-adjust: 100%;\n}<\/code><\/pre><\/div>\n\n\n
\n\n\n\nSEO\u30fb\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u30fb\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n
SEO\u30b9\u30b3\u30a2100\u9054\u6210<\/h3>\n\n\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n <!-- \u30bf\u30a4\u30c8\u30eb\uff0860\u6587\u5b57\u4ee5\u5185\uff09 -->\n <title>\u30da\u30fc\u30b8\u30bf\u30a4\u30c8\u30eb | \u30b5\u30a4\u30c8\u540d<\/title>\n\n <!-- \u30e1\u30bf\u30c7\u30a3\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\uff08160\u6587\u5b57\u4ee5\u5185\uff09 -->\n <meta name=\"description\" content=\"\u30da\u30fc\u30b8\u306e\u8aac\u660e\u6587\">\n\n <!-- OGP -->\n <meta property=\"og:title\" content=\"\u30da\u30fc\u30b8\u30bf\u30a4\u30c8\u30eb\">\n <meta property=\"og:description\" content=\"\u30da\u30fc\u30b8\u306e\u8aac\u660e\u6587\">\n <meta property=\"og:image\" content=\"https:\/\/example.com\/ogp.jpg\">\n <meta property=\"og:url\" content=\"https:\/\/example.com\/page\">\n\n <!-- Twitter Card -->\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n\n <!-- Canonical URL -->\n <link rel=\"canonical\" href=\"https:\/\/example.com\/page\">\n\n <!-- robots -->\n <meta name=\"robots\" content=\"index, follow\">\n<\/head><\/code><\/pre><\/div>\n\n\n\u69cb\u9020\u5316\u30c7\u30fc\u30bf\uff08JSON-LD\uff09<\/h4>\n\n\n
<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"Article\",\n \"headline\": \"\u8a18\u4e8b\u306e\u30bf\u30a4\u30c8\u30eb\",\n \"author\": {\n \"@type\": \"Person\",\n \"name\": \"\u8457\u8005\u540d\"\n },\n \"datePublished\": \"2026-02-25\",\n \"image\": \"https:\/\/example.com\/article-image.jpg\"\n}\n<\/script><\/code><\/pre><\/div>\n\n\n\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u30b9\u30b3\u30a2100\u9054\u6210<\/h3>\n\n\n\n
\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30afHTML<\/h4>\n\n\n
<!-- \u2705 \u826f\u3044\u4f8b\uff1a\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u306a\u69cb\u9020 -->\n<header>\n <nav aria-label=\"\u30e1\u30a4\u30f3\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\">\n <ul>\n <li><a href=\"\/\">\u30db\u30fc\u30e0<\/a><\/li>\n <li><a href=\"\/about\">\u6982\u8981<\/a><\/li>\n <\/ul>\n <\/nav>\n<\/header>\n\n<main>\n <article>\n <h1>\u8a18\u4e8b\u30bf\u30a4\u30c8\u30eb<\/h1>\n <p>\u672c\u6587...<\/p>\n <\/article>\n<\/main>\n\n<footer>\n <p>\u00a9 2026 \u30b5\u30a4\u30c8\u540d<\/p>\n<\/footer><\/code><\/pre><\/div>\n\n\nARIA\u5c5e\u6027\u306e\u9069\u5207\u306a\u4f7f\u7528<\/h4>\n\n\n
<!-- \u30dc\u30bf\u30f3 -->\n<button aria-label=\"\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u304f\">\n <svg>...<\/svg>\n<\/button>\n\n<!-- \u30d5\u30a9\u30fc\u30e0 -->\n<form>\n <label for=\"email\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<\/label>\n <input\n type=\"email\"\n id=\"email\"\n name=\"email\"\n aria-required=\"true\"\n aria-describedby=\"email-help\"\n >\n <span id=\"email-help\">example@domain.com\u306e\u5f62\u5f0f\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\n<\/form>\n\n<!-- \u30ea\u30f3\u30af -->\n<a href=\"\/article\" aria-label=\"\u8a18\u4e8b\u30bf\u30a4\u30c8\u30eb - \u7d9a\u304d\u3092\u8aad\u3080\">\n \u7d9a\u304d\u3092\u8aad\u3080\n<\/a><\/code><\/pre><\/div>\n\n\n\u8272\u306e\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4<\/h4>\n\n\n\n
\n\n\n\n\u7d99\u7d9a\u7684\u306a\u76e3\u8996\u3068\u6539\u5584\uff5cLighthouse CI\u306e\u5c0e\u5165<\/h2>\n\n\n\n
# GitHub Actions\u306e\u8a2d\u5b9a\u4f8b\n# .github\/workflows\/lighthouse.yml\nname: Lighthouse CI\n\non:\n push:\n branches:\n - main\n pull_request:\n\njobs:\n lighthouse:\n runs-on: ubuntu-latest\n steps:\n - uses: actions\/checkout@v4\n\n - name: Setup Node.js\n uses: actions\/setup-node@v4\n with:\n node-version: '20'\n\n - name: Install dependencies\n run: npm ci\n\n - name: Build\n run: npm run build\n\n - name: Run Lighthouse CI\n run: |\n npm install -g @lhci\/cli\n lhci autorun\n\n# lighthouserc.json\n{\n \"ci\": {\n \"collect\": {\n \"staticDistDir\": \".\/dist\",\n \"url\": [\n \"http:\/\/localhost\/index.html\",\n \"http:\/\/localhost\/about.html\"\n ]\n },\n \"assert\": {\n \"preset\": \"lighthouse:recommended\",\n \"assertions\": {\n \"categories:performance\": [\"error\", {\"minScore\": 0.9}],\n \"categories:accessibility\": [\"error\", {\"minScore\": 0.9}],\n \"categories:best-practices\": [\"error\", {\"minScore\": 0.9}],\n \"categories:seo\": [\"error\", {\"minScore\": 0.9}]\n }\n }\n }\n}<\/code><\/pre><\/div>\n\n\n
\n\n\n![\"\"](\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.06.05.jpg\")
\u751f\u5f92<\/span><\/div>![\"\"](\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.12.07.jpg\")
\u30da\u30f3\u535a\u58eb<\/span><\/div>