{"id":9989,"date":"2025-12-04T19:09:53","date_gmt":"2025-12-04T10:09:53","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=9989"},"modified":"2026-07-09T11:31:18","modified_gmt":"2026-07-09T02:31:18","slug":"web-performance-9989","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/web-performance-9989\/","title":{"rendered":"Web\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\uff1aPageSpeed Insights\u30b9\u30b3\u30a2\u3092\u5927\u5e45\u306b\u6539\u5584\u3067\u304d\u305f5\u3064\u306e\u65bd\u7b56"},"content":{"rendered":"

\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u306e\u30b5\u30fc\u30d0\u30fc\uff08\u3078\u30c6\u30e0\u30eb\uff09\u3067\u3001\u30e2\u30d0\u30a4\u30eb\u306ePageSpeed Insights\u30b9\u30b3\u30a2\u304c14\u70b9<\/b>\u3068\u3044\u3046\u885d\u6483\u7684\u306a\u6570\u5024\u3060\u3063\u305f\u305f\u3081\uff08\u30ab\u30e9\u30d5\u30eb\u30dc\u30c3\u30af\u30b9\u3067\u306f55\u70b9\uff09\u3001Web\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u306b\u53d6\u308a\u7d44\u3080\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\r\n

\u7d50\u679c\u3068\u3057\u3066\u3001\u4ee5\u4e0b\u306e\u6539\u5584\u3092\u9054\u6210\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\u6307\u6a19<\/th>\r\n Before<\/td>\r\n After<\/td>\r\n \u6539\u5584\u7387<\/td>\r\n <\/tr>\r\n <\/thead>\r\n
\u30b9\u30b3\u30a2<\/b><\/th>\r\n 14<\/td>\r\n 52<\/b><\/td>\r\n +38pt<\/td>\r\n <\/tr>\r\n
TBT<\/b><\/th>\r\n 1,240ms<\/td>\r\n 430ms<\/b><\/td>\r\n -65%<\/td>\r\n <\/tr>\r\n
CLS<\/b><\/th>\r\n 0.423<\/td>\r\n 0<\/b><\/td>\r\n \u5b8c\u5168\u89e3\u6d88<\/td>\r\n <\/tr>\r\n
FCP<\/b><\/th>\r\n 5.0\u79d2<\/td>\r\n 2.9\u79d2<\/b><\/td>\r\n -42%<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u5b9f\u969b\u306b\u52b9\u679c\u304c\u3042\u3063\u305f5\u3064\u306e\u65bd\u7b56\u3092\u3001\u5177\u4f53\u7684\u306a\u30b3\u30fc\u30c9\u4f8b\u3068\u3068\u3082\u306b\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\r\n\r\n\r\n

    <\/ul>\r\n<\/ins>\r\n\r\n\r\n\r\n\r\n
    \r\n\r\n

    1. document.write \u306e\u5ec3\u6b62<\/h2>\r\n\r\n\u554f\u984c\u70b9<\/strong>\r\n

    document.write<\/code> \u3092\u4f7f\u3063\u305f\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u52d5\u7684\u8aad\u307f\u8fbc\u307f\u306f\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u30d6\u30ed\u30c3\u30af<\/b>\u3059\u308b\u6700\u60aa\u306e\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002<\/p>\r\n

    \/\/ \u274c \u60aa\u3044\u4f8b\uff1adocument.write \u306b\u3088\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u8aad\u307f\u8fbc\u307f\r\ndocument.write('<script src="\/js\/script1.js"><\/script>');\r\ndocument.write('<script src="\/js\/script2.js"><\/script>');\r\n<\/code><\/pre>\r\n
    \u3053\u306e\u30b3\u30fc\u30c9\u306b\u306f\u3001<\/p>\r\n
      \r\n  
    • \u540c\u671f\u7684\u306b\u5b9f\u884c\u3055\u308c\u308b<\/b>\uff1aHTML\u30d1\u30fc\u30b9\u304c\u5b8c\u5168\u306b\u505c\u6b62\u3059\u308b<\/li>\r\n<\/ul>\r\n
      \u3068\u3044\u3046\u554f\u984c\u304c\u3042\u308a\u3001\u65e9\u304f\u6539\u5584\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001
      \r\n  document.write<\/code> \u3060\u3068\u52d5\u304f\u306e\u306b\u3001Claude\u3055\u3093\u306b\u66f8\u3044\u3066\u3082\u3089\u3063\u305f\u30b3\u30fc\u30c9\u3060\u3068\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u52d5\u304b\u306a\u3044\u3001\u52d5\u304b\u306a\u3044\u3002\u3068\u306b\u304b\u304f\u52d5\u304b\u306a\u3044\u3068Web\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u4ee5\u524d\u306e\u72b6\u614b\u306a\u306e\u3067\u3001document.write<\/code> \u306b\u3057\u3066\u304a\u304f\u3057\u304b\u306a\u3044\u3002
      \r\n  \u539f\u56e0\u304c document.body.appendChild(script);<\/code> \u306b\u3042\u308a\u3001document.body.appendChild<\/code> \u3060\u3068\u3001\u305d\u306e\u6642\u70b9\u3067\u306f\u307e\u3060body\u8981\u7d20\u304c\u306a\u3044\u304b\u3089\u52d5\u304b\u306a\u3044\u3068\u3044\u3046\u3053\u3068\u306b\u6c17\u3065\u304f\u306e\u306b\u7d50\u69cb\u306a\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3057\u305f\u3002\r\n<\/p>\r\n\r\n
      HTML\u30d1\u30fc\u30b9\u958b\u59cb\r\n    \u2193\r\n<head> \u51e6\u7406\r\n    \u2193\r\n\u2605 <head> \u5185 \u306e\u30b9\u30af\u30ea\u30d7\u30c8\u5b9f\u884c\r\n\uff08\u203b<body>\u89e3\u6790\u304c\u307e\u3060\u306a\u306e\u3067\u3001document.body.appendChild \u306f\u6a5f\u80fd\u3057\u306a\u3044\uff09\r\n<\/code><\/pre>\r\n\r\n
      \/\/ \u2705 \u826f\u3044\u4f8b\uff1a\u52d5\u7684\u30b9\u30af\u30ea\u30d7\u30c8\u8aad\u307f\u8fbc\u307f\r\n\r\n\/**\r\n * \u975e\u540c\u671f\u8aad\u307f\u8fbc\u307f\uff08\u9806\u5e8f\u4e0d\u5b9a\uff09\r\n * \u7528\u9014\uff1a\u72ec\u7acb\u3057\u305f\u30b9\u30af\u30ea\u30d7\u30c8\u3001\u4ed6\u306b\u4f9d\u5b58\u3057\u306a\u3044\u3082\u306e\r\n *\/\r\nfunction loadScriptAsync(src, callback) {\r\n  const script = document.createElement('script');\r\n  script.src = src;\r\n  script.async = true;\r\n  if (callback) script.addEventListener('load', callback);\r\n  document.body.appendChild(script);\r\n}\r\n\r\n\/**\r\n * \u9806\u5e8f\u4fdd\u8a3c\u8aad\u307f\u8fbc\u307f\r\n * \u7528\u9014\uff1a\u4f9d\u5b58\u95a2\u4fc2\u304c\u3042\u308b\u30b9\u30af\u30ea\u30d7\u30c8\uff08A\u2192B\u2192C\u306e\u9806\u3067\u5b9f\u884c\u3057\u305f\u3044\u5834\u5408\uff09\r\n *\/\r\nfunction loadScriptOrdered(src, callback) {\r\n  const script = document.createElement('script');\r\n  script.src = src;\r\n  script.async = false;  \/\/ \u9806\u5e8f\u4fdd\u8a3c\r\n  if (callback) script.addEventListener('load', callback);\r\n  document.body.appendChild(script);\r\n}\r\n<\/code><\/pre>\r\n
      \u30dd\u30a4\u30f3\u30c8<\/b>: async = false<\/code> \u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u5b9f\u884c\u9806\u5e8f\u304c\u4fdd\u8a3c\u3055\u308c\u307e\u3059\u3002<\/p>\r\n
      \r\n
      2. Critical CSS \u306e\u5c0e\u5165<\/h2>\r\n\r\n\u554f\u984c\u70b9<\/strong>\r\n
      \u6539\u5584\u4e2d\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff08scroll-shrinkIn\uff09\u3084Swiper\u30b9\u30e9\u30a4\u30c0\u30fc\u306eCSS\u304c\u8aad\u307f\u8fbc\u307f\u304c\u9593\u306b\u5408\u308f\u305a\u3001<\/p>\r\n
        \r\n  
      • FOUC\uff08Flash of Unstyled Content\uff09<\/b>: \u4e00\u77ac\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u3066\u3044\u306a\u3044\u72b6\u614b\u304c\u898b\u3048\u308b<\/li>\r\n  
      • CLS\uff08Cumulative Layout Shift\uff09<\/b>: \u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u30ac\u30bf\u30c3\u3068\u305a\u308c\u308b<\/li>\r\n<\/ul>\r\n
        \u3068\u3044\u3046\u554f\u984c\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\uff08\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u8aad\u307f\u8fbc\u307f\u304c\u9593\u306b\u5408\u3063\u3066\u3044\u306a\u3044\uff09<\/p>\r\n\r\n\r\n\u89e3\u6c7a\u7b56<\/strong>\r\n
        \u300c\u30af\u30ea\u30c6\u30a3\u30ab\u30ebCSS\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u300d\u3067\u3001Above the fold\uff08\u30d5\u30a1\u30fc\u30b9\u30c8\u30d3\u30e5\u30fc\uff09\u306b\u5fc5\u8981\u306a\u6700\u5c0f\u9650\u306eCSS\u3092Critical CSS<\/b>\u3068\u3057\u3066\u5148\u306b\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\r\n\r\n
        \u4f8b\uff09critical.min.css<\/b><\/p>\r\n
        \/* scroll-shrinkIn \u521d\u671f\u72b6\u614b *\/\r\n.scroll-shrinkIn {\r\n  transform: scale(1.1);\r\n}\r\n\r\n@keyframes scrollShrinkIn {\r\n  to {\r\n    transform: scale(1);\r\n  }\r\n}\r\n\r\n.scroll-shrinkIn.is-scloaded {\r\n  animation-name: scrollShrinkIn;\r\n}\r\n\r\n\/* Swiper \u521d\u671f\u72b6\u614b\uff08\u30b9\u30e9\u30a4\u30c9\u305a\u308c\u9632\u6b62\uff09 *\/\r\n.swiper {\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.swiper-wrapper {\r\n  display: flex;\r\n  transition-property: transform;\r\n}\r\n\r\n.swiper:not(.swiper-initialized) .swiper-slide {\r\n  visibility: hidden;\r\n}\r\n\r\n.swiper:not(.swiper-initialized) .swiper-slide:first-child {\r\n  visibility: visible;\r\n}\r\n<\/code><\/pre>\r\n\r\n
        \u8aad\u307f\u8fbc\u307f\u65b9\u6cd5<\/b>:<\/p>\r\n
        <!-- head\u5185\u306e\u5148\u982d\u3067\u8aad\u307f\u8fbc\u307f -->\r\n<link rel="stylesheet" href="\/css\/critical.min.css">\r\n<\/code><\/pre>\r\n\r\n
        \u3053\u306e\u5bfe\u7b56\u306b\u3088\u308a\u3001CLS \u304c 0.423 \u2192 0<\/b> \u306b\u6539\u5584\u3057\u307e\u3057\u305f\u3002<\/p>\r\n\r\n
        \r\n\r\n
        3. \u512a\u5148\u5ea6\u306e\u4f4e\u3044CSS\u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f<\/h2>\r\n\r\n\u554f\u984c\u70b9<\/strong>\r\n
        \u3059\u3079\u3066\u306eCSS\u3092head\u3067\u8aad\u307f\u8fbc\u3080\u3068\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30d6\u30ed\u30c3\u30af<\/b>\u304c\u767a\u751f\u3057\u3001FCP\u304c\u9045\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\r\n\r\n\u89e3\u6c7a\u7b56<\/strong>\r\n
        Above the fold\u306b\u4e0d\u8981\u306aCSS\u306f\u3001JavaScript\u3067\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3057\u307e\u3059\u3002<\/p>\r\n
        \/**\r\n * Lazy CSS\u8aad\u307f\u8fbc\u307f\uff08Below the fold\u7528\uff09\r\n *\/\r\nfunction loadLazyCSS(href) {\r\n  const link = document.createElement('link');\r\n  link.rel = 'stylesheet';\r\n  link.href = href;\r\n  document.head.appendChild(link);\r\n}\r\n\r\n\/\/ \u4f7f\u7528\u4f8b\uff1afooter\u3067\u8aad\u307f\u8fbc\u307f\r\nloadLazyCSS('\/css\/print-style.css');\r\nloadLazyCSS('https:\/\/fonts.googleapis.com\/css2?family=Shippori+Mincho&display=swap');\r\n<\/code><\/pre>\r\n
        \u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u306b\u9069\u3057\u305fCSS<\/b>:<\/p>\r\n