\uff1a\u6e05\u6670\u5ea6\u4f18\u5316\u5bf9SEO\u7684\u4ef7\u503c
\n\u5728\u767e\u5ea6\u641c\u7d22\u6392\u540d\u7b97\u6cd5\u4e2d\uff0c\u7f51\u7ad9\u52a0\u8f7d\u901f\u5ea6\u548c\u9875\u9762\u6e05\u6670\u5ea6\u76f4\u63a5\u5f71\u54cd\u7528\u6237\u4f53\u9a8c\u8bc4\u5206\u3002\u6570\u636e\u663e\u793a\uff0c\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u8d85\u8fc73\u79d2\u4f1a\u5bfc\u81f440%\u7684\u7528\u6237\u6d41\u5931\uff0c\u800c\u6e05\u6670\u5ea6\u4e0d\u8db3\u7684\u89c6\u89c9\u5448\u73b0\u4f1a\u4f7f\u8df3\u51fa\u7387\u589e\u52a025%\u3002\u672c\u6587\u901a\u8fc75\u5927\u6838\u5fc3\u4f18\u5316\u7b56\u7565\uff0c\u7ed3\u5408\u771f\u5b9e\u6848\u4f8b\u6570\u636e\uff0c\u7cfb\u7edf\u8bb2\u89e3\u5982\u4f55\u901a\u8fc7\u6280\u672f\u624b\u6bb5\u4e0e\u8bbe\u8ba1\u4f18\u5316\u5b9e\u73b0\u6e05\u6670\u5ea6\u4e0e\u52a0\u8f7d\u901f\u5ea6\u7684\u53cc\u91cd\u63d0\u5347\u3002<\/p>\n
\u4e00\u3001\u56fe\u50cf\u8d44\u6e90\u6e05\u6670\u5ea6\u63d0\u5347\u7684\u4e09\u5927\u6280\u672f\u8def\u5f84
\n 1.1 \u538b\u7f29\u6280\u672f\u9009\u62e9\u4e0e\u53c2\u6570\u8bbe\u7f6e
\n\u91c7\u7528WebP\u683c\u5f0f\u66ff\u4ee3\u4f20\u7edfJPEG\/PNG\uff0c\u5728\u4fdd\u8bc1PSNR\u503c\u226538dB\u7684\u524d\u63d0\u4e0b\uff0c\u538b\u7f29\u6bd4\u53ef\u8fbe60%\u4ee5\u4e0a\u3002\u5efa\u8bae\u4f7f\u7528Google\u7684WebP Converter\u5de5\u5177\u8fdb\u884c\u6279\u91cf\u8f6c\u6362\uff0c\u5173\u952e\u53c2\u6570\u8bbe\u7f6e\uff1a
\n– \u538b\u7f29\u5f3a\u5ea6\uff1a75%\uff08\u5e73\u8861\u8d28\u91cf\u4e0e\u4f53\u79ef\uff09
\n– \u4f18\u5316\u9009\u9879\uff1a\u542f\u7528lossless\u6a21\u5f0f\u5904\u7406\u77e2\u91cf\u56fe\u5f62
\n– \u5206\u8fa8\u7387\u9002\u914d\uff1a\u6839\u636e\u663e\u793a\u8bbe\u5907\u81ea\u52a8\u8c03\u6574DPI\u503c<\/p>\n
1.2 \u52a8\u6001\u56fe\u7247\u751f\u6210\u65b9\u6848
\n\u901a\u8fc7PHP GD\u5e93\u6216Next.js\u5b9e\u73b0\u61d2\u52a0\u8f7d\u6280\u672f\uff0c\u52a8\u6001\u751f\u6210\u4e0d\u540c\u5206\u8fa8\u7387\u7684\u56fe\u7247\uff1a
\n“`javascript
\n\/\/ Next.js\u56fe\u7247\u7ec4\u4ef6\u793a\u4f8b
\n<img
\n src={ `\/images\/logo@${breakpoint}$2x.png` }
\n alt=”\u54c1\u724c\u6807\u8bc6”
\n width={ breakpoint }
\n height={ breakpoint * 0.618 } \/\/ golden ratio\u9002\u914d
\n\/>
\n“`
\n\u8be5\u65b9\u6848\u5728\u7535\u5546\u7f51\u7ad9\u5b9e\u6d4b\u4e2d\uff0c\u5c06\u9996\u5c4f\u56fe\u7247\u4f53\u79ef\u964d\u4f4e42%\uff0c\u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4\u7f29\u77ed1.8\u79d2\u3002<\/p>\n
1.3 \u54cd\u5e94\u5f0f\u5e03\u5c40\u4f18\u5316
\n\u91c7\u7528CSS Grid+Flexbox\u5b9e\u73b0\u81ea\u9002\u5e94\u5e03\u5c40\uff0c\u5173\u952e\u4ee3\u7801
\n“`css
\npicture {
\n display: grid;
\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
\n gap: 1.5rem;
\n padding: 2rem 0;
\n}<\/p>\n
@media (max-width: 768px) {
\n picture { grid-template-columns: 1fr; }
\n}
\n“`
\n\u914d\u5408 viewport \u6807\u7b7e\u8bbe\u7f6e “\uff0c\u79fb\u52a8\u7aef\u9002\u914d\u6548\u7387\u63d0\u534765%\u3002<\/p>\n
\u4e8c\u3001\u524d\u7aef\u6e32\u67d3\u6027\u80fd\u4eceDNS\u5230CSS\u52a0\u8f7d\u7684\u5168\u94fe\u8def\u4f18\u5316
\n 2.1 \u591a\u57df\u52a0\u901f\u65b9\u6848
\n\u914d\u7f6eCDN\uff08\u5982Cloudflare\uff09\u5b9e\u73b0\uff1a
\n– DNS\u7f13\u5b58\u7b56\u7565\uff1aTTL\u8bbe\u7f6e\u4e3a5\u5206\u949f
\n– \u9884\u529f\u80fd\uff1a\u81ea\u52a8\u9884\u52a0\u8f7d\u6838\u5fc3\u57df\u540d
\n– TCP\u8fde\u63a5\u590d\u7528\uff1a\u542f\u7528Keep-Alive\u4f18\u5316
\n\u67d0\u6559\u80b2\u5e73\u53f0\u5b9e\u65bd\u540e\uff0cFCP\uff08First Contentful Paint\uff09\u6307\u6807\u4ece2.1\u79d2\u964d\u81f31.3\u79d2\u3002<\/p>\n
2.2 \u524d\u7aef\u8d44\u6e90\u52a0\u8f7d\u987a\u5e8f\u4f18\u5316
\n\u9075\u5faaPerformance Critical\u539f\u5219\u8c03\u6574\u52a0\u8f7d\u987a\u5e8f\uff1a
\n1. \u5fc5\u8981JS\u6587\u4ef6\uff08\u5982\u5206\u6790\u4ee3\u7801\uff09\u4f18\u5148\u52a0\u8f7d
\n2. \u5173\u952eCSS\u901a\u8fc7“\u9884\u52a0\u8f7d
\n3. \u975e\u5fc5\u8981\u8d44\u6e90\u4f7f\u7528`async`\/`defer`\u5c5e\u6027
\n\u4f18\u5316\u540e\u67d0\u91d1\u878d\u5e73\u53f0LCP\uff08 Largest Contentful Paint\uff09\u6307\u6807\u63d0\u5347\u81f31.8\u79d2\u4ee5\u5185\u3002<\/p>\n
2.3 \u79bb\u7ebf\u7f13\u5b58\u7b56\u7565\u5b9e\u65bd
\n\u901a\u8fc7Service Worker\u7f13\u5b58\u5173\u952e\u8d44\u6e90\uff1a
\n“`javascript
\nself.addEventListener(‘fetch’, event => {
\n if (event.request.url.startsWith(‘https:\/\/example\/js\/’)) {
\n event.respondWith(caches.match(event.request)
\n .then(response => response || fetch(event.request)));
\n }
\n});
\n“`
\n\u914d\u5408“\u58f0\u660e\uff0c\u6838\u5fc3\u8d44\u6e90\u7f13\u5b58\u547d\u4e2d\u7387\u53ef\u8fbe92%\u3002<\/p>\n
\u4e09\u3001\u670d\u52a1\u5668\u7aef\u6027\u80fdNginx\u914d\u7f6e\u4e0eCDN\u6df1\u5ea6\u6574\u5408
\n 3.1 Nginx\u7f13\u5b58\u914d\u7f6e\u4f18\u5316
\n\u6838\u5fc3\u914d\u7f6e\u8c03\u6574\uff1a
\n“`nginx
\nhttp {
\n server {
\n listen 80;
\n server_name example .example;<\/p>\n
location \/ {
\n root \/var\/\/html;
\n try_files $uri $uri\/ \/index.html;<\/p>\n
add_header Cache-Control “public, max-age=31536000, immutable”;<\/p>\n
proxy_pass http:\/\/backend;
\n proxy_set_header Host $host;
\n proxy_set_header X-Real-IP $remote_addr;
\n }
\n }
\n}
\n“`
\n\u5b9e\u65bd\u540e\u67d0\u89c6\u9891\u7f51\u7ad9CDN\u8bf7\u6c42\u54cd\u5e94\u65f6\u95f4\u964d\u4f4e\u81f3150ms\u4ee5\u5185\u3002<\/p>\n
3.2 \u54c8\u5e0c\u8def\u5f84\u751f\u6210\u65b9\u6848
\n\u901a\u8fc7Rewrite\u6a21\u5757\u751f\u6210\u552f\u4e00\u54c8\u5e0c\u8def\u5f84\uff1a
\n“`nginx
\nlocation ~* .(js|css|png|jpg)$ {
\n rewrite ^\/(images\/[^\/]+)\/[^\/]+.([a-z]+)$ $1\/$2.jpg last;
\n rewrite ^\/(styles\/[^\/]+)\/[^\/]+.css$ $1\/$2.css last;
\n}
\n“`
\n\u8be5\u914d\u7f6e\u4f7f\u9759\u6001\u8d44\u6e90\u7248\u672c\u63a7\u5236\u66f4\u7075\u6d3b\uff0c\u67d0\u8d44\u8baf\u5e73\u53f0404\u9519\u8bef\u7387\u4e0b\u964d37%\u3002<\/p>\n
3.3 \u8d1f\u8f7d\u5747\u8861\u7b56\u7565\u4f18\u5316
\n\u91c7\u7528Nginx+Keepalived\u5b9e\u73b0\uff1a
\n– \u5065\u5eb7\u68c0\u67e5\u95f4\u9694\uff1a60\u79d2\/\u6b21
\n– \u964d\u7ea7\u9608\u503c\uff1a\u9519\u8bef\u7387\u226530%\u89e6\u53d1
\n– \u8d1f\u8f7d\u6743\u91cd\u52a8\u6001\u8c03\u6574
\n\u67d0\u7535\u5546\u5927\u4fc3\u671f\u95f4\u6210\u529f\u5e94\u5bf9500\u4e07PV\u6d41\u91cf\uff0c\u670d\u52a1\u5668\u54cd\u5e94\u4fdd\u6301<500ms\u3002<\/p>\n
\u56db\u3001\u79fb\u52a8\u7aef\u4e13\u9879\u9002\u914d\u7387\u4e0e\u6027\u80fd\u5e73\u8861\u65b9\u6848
\n 4.1 \u79fb\u52a8\u89c6\u53e3\u9002\u914d\u4f18\u5316
\n\u9075\u5faaGoogle Mobile-Friendly Test\u6807\u51c6\uff1a
\n– \u6839\u5143\u7d20\u8bbe\u7f6e`meta viewport`\u6807\u7b7e
\n– \u7981\u7528\u5185\u8054\u6837\u5f0f\u52a0\u8f7d\uff08\u4f7f\u7528\u5916\u90e8CSS\uff09
\n– \u6838\u5fc3\u8d44\u6e90\u538b\u7f29\u6bd4\u63a7\u5236\u572835%-45%
\n\u67d0\u793e\u4ea4App\u5b9e\u65bd\u540e\u79fb\u52a8\u7aefLCP\u6307\u6807\u63d0\u5347\u81f31.5\u79d2\uff0c\u6d41\u91cf\u589e\u957f23%\u3002<\/p>\n
4.2 \u79fb\u52a8\u7aef\u56fe\u7247\u4f18\u5316\u65b9\u6848
\n\u91c7\u7528srcset\u8bed\u6cd5\u5b9e\u73b0\uff1a
\n“`html
\n<img
\n srcset=”logo@1x.png 1x, logo@2x.png 2x”
\n sizes=”(max-width: 768px) 100vw, 33vw”
\n src=”logo@1x.png”
\n\/>
\n“`
\n\u67d0\u5de5\u5177\u7c7bApp\u56fe\u7247\u4f53\u79ef\u51cf\u5c1158%\uff0c\u79fb\u52a8\u7aef\u52a0\u8f7d\u65f6\u95f4\u7f29\u77ed2.1\u79d2\u3002<\/p>\n
4.3 \u79fb\u52a8\u7f51\u7edc\u4f18\u5316\u7b56\u7565
\n\u914d\u7f6eBrotli\u538b\u7f29\uff08Nginx>=1.8.0\uff09\uff1a
\n“`nginx
\ngzip on;
\ngzip_types text\/plain application\/json;
\ngzip_min_length 1024;
\ngzip_comp_level 6;
\nadd_header Accept-Encoding “gzip,brotli”;
\n“`
\n\u67d0\u8d44\u8baf\u5e73\u53f0\u79fb\u52a8\u7aef\u538b\u7f29\u7387\u63d0\u5347\u81f375%\uff0c\u6d41\u91cf\u6d88\u8017\u51cf\u5c1140%\u3002<\/p>\n
\u4e94\u3001\u6548\u679c\u8bc4\u4f30\u4e0e\u6301\u7eed\u4f18\u5316\u673a\u5236
\n 5.1 \u6838\u5fc3\u6307\u6807\u76d1\u6d4b\u4f53\u7cfb
\n\u5efa\u7acb\u5305\u542b\u4ee5\u4e0b\u7ef4\u5ea6\u7684\u76d1\u63a7\u77e9\u9635\uff1a
\n– \u52a0\u8f7d\u6027\u80fd\uff1aFCP\/LCP\/TTFB
\n– \u7528\u6237\u884c\u4e3a\uff1aBounce Rate\/Time on Page
\n– \u6280\u672f\u6307\u6807\uff1aHTTP 2x\/3x\u542f\u7528\u7387
\n– \u7ade\u54c1\u5bf9\u6bd4\uff1aGoogle PageSpeed Insights\u8bc4\u5206<\/p>\n
5.2 A\/B\u6d4b\u8bd5\u65b9\u6cd5\u8bba
\n\u5b9e\u65bd\u591a\u53d8\u91cf\u6d4b\u8bd5\u65b9\u6848\uff1a
\n1. \u51c6\u5907\u671f\uff1a\u9009\u62e93\u7ec4\u5bf9\u6bd4\u6837\u672c
\n2. \u8fd0\u884c\u671f\uff1a\u6301\u7eed30\u5929\u6570\u636e\u6536\u96c6
\n3. \u5206\u6790\u671f\uff1a\u4f7f\u7528Google Optimize\u8fdb\u884c\u65b9\u5dee\u68c0\u9a8c
\n\u67d0\u7535\u5546\u901a\u8fc7A\/B\u6d4b\u8bd5\u786e\u5b9a\u6700\u4f73\u56fe\u7247\u538b\u7f29\u65b9\u6848\uff0c\u8f6c\u5316\u7387\u63d0\u53479.8%\u3002<\/p>\n
5.3 \u6301\u7eed\u4f18\u5316\u6d41\u7a0b
\n\u5efa\u7acbPDCA\u5faa\u73af\uff1a
\n– Plan\uff1a\u5b63\u5ea6\u4f18\u5316\u8def\u7ebf\u56fe
\n– Do\uff1a\u5206\u9636\u6bb5\u5b9e\u65bd\u6539\u8fdb
\n– Check\uff1a\u6708\u5ea6\u6570\u636e\u590d\u76d8
\n– Act\uff1a\u6301\u7eed\u8fed\u4ee3\u4f18\u5316
\n\u67d0\u4f01\u4e1a\u5b98\u7f51\u901a\u8fc7\u8be5\u673a\u5236\uff0c6\u4e2a\u6708\u5185\u5c06PageSpeed\u8bc4\u5206\u4ece42\u63d0\u5347\u81f389\u3002<\/p>\n
\u516d\u3001\u5e38\u89c1\u8bef\u533a\u4e0e\u89c4\u907f\u6307\u5357
\n 6.1 \u8fc7\u5ea6\u538b\u7f29\u7684\u4e34\u754c\u70b9
\n\u5f53PSNR\u503c\u4f4e\u4e8e36dB\u65f6\u4f1a\u51fa\u73b0\u89c6\u89c9 artifacts\uff0c\u5efa\u8bae\u4f7f\u7528SSIM\u7b97\u6cd5\u8f85\u52a9\u8bc4\u4f30\uff1a
\n“`python
\nfrom skimagetrics import structural_similarity
\nssim = structural_similarity(img1, img2)
\nif ssim < 0.85:
\n print(“\u5efa\u8bae\u91cd\u65b0\u538b\u7f29”)
\n“`<\/p>\n
6.2 CDN\u914d\u7f6e\u4e09\u5927\u9677\u9631
\n1. \u672a\u542f\u7528HTTP\/2\u5bfc\u81f4\u6027\u80fd\u635f\u5931
\n2. \u7f13\u5b58\u8fc7\u671f\u65f6\u95f4\u8bbe\u7f6e\u4e0d\u5408\u7406
\n3. \u672a\u914d\u7f6eSSL\u8bc1\u4e66\u5f71\u54cd\u5b89\u5168\u8bc4\u5206<\/p>\n
6.3 \u79fb\u52a8\u7aef\u9002\u914d\u7684\u5e73\u8861\u70b9
\n\u5173\u952e\u8d44\u6e90\u4f53\u79ef\u4e0e\u52a0\u8f7d\u65f6\u95f4\u7684\u9ec4\u91d1\u5206\u5272\u7ebf\uff1a
\n– 1MB\u4ee5\u5185\uff1a\u52a0\u8f7d\u65f6\u95f4<2\u79d2
\n– 2-5MB\uff1a\u52a0\u8f7d\u65f6\u95f4<3\u79d2
\n– 5MB\u4ee5\u4e0a\uff1a\u9700\u542f\u7528\u9884\u52a0\u8f7d\u7b56\u7565<\/p>\n
\uff1a\u6784\u5efa\u53ef\u6301\u7eed\u4f18\u5316\u7684\u6280\u672f\u4f53\u7cfb
\n\u6e05\u6670\u5ea6\u4f18\u5316\u662f\u7cfb\u7edf\u5de5\u7a0b\uff0c\u9700\u8981\u524d\u7aef\u6280\u672f\u3001\u670d\u52a1\u5668\u67b6\u6784\u3001\u8bbe\u8ba1\u89c4\u8303\u7684\u534f\u540c\u6539\u8fdb\u3002\u5efa\u8bae\u4f01\u4e1a\u5efa\u7acb\u5305\u542b\u6027\u80fd\u76d1\u63a7\u3001\u6570\u636e\u5206\u6790\u548c\u6301\u7eed\u8fed\u4ee3\u7684\u5b8c\u6574\u4f18\u5316\u4f53\u7cfb\uff0c\u5b9a\u671f\u8fdb\u884c\u6280\u672f\u67b6\u6784\u5ba1\u8ba1\u3002\u901a\u8fc7\u672c\u6587\u63d0\u4f9b\u7684\u5177\u4f53\u65b9\u6848\uff0c\u7ed3\u5408\u81ea\u8eab\u4e1a\u52a1\u573a\u666f\u8fdb\u884c\u9488\u5bf9\u6027\u4f18\u5316\uff0c\u53ef\u57283-6\u4e2a\u6708\u5185\u5b9e\u73b0\u663e\u8457\u6027\u80fd\u63d0\u5347\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\uff1a\u6e05\u6670\u5ea6\u4f18\u5316\u5bf9SEO\u7684\u4ef7\u503c \u5728\u767e\u5ea6\u641c\u7d22\u6392\u540d\u7b97\u6cd5\u4e2d\uff0c\u7f51\u7ad9\u52a0\u8f7d\u901f\u5ea6\u548c\u9875\u9762\u6e05\u6670\u5ea6\u76f4\u63a5\u5f71\u54cd\u7528\u6237\u4f53\u9a8c\u8bc4\u5206\u3002\u6570\u636e\u663e\u793a\uff0c\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u8d85\u8fc73\u79d2\u4f1a\u5bfc\u81f440%\u7684\u7528\u6237\u6d41\u5931\uff0c\u800c\u6e05\u6670\u5ea6\u4e0d […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[324,303,1530,523,304],"class_list":["post-1753","post","type-post","status-publish","format-standard","hentry","category-20","tag-css","tag-event","tag-gzip","tag-header","tag-request"],"_links":{"self":[{"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/posts\/1753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/comments?post=1753"}],"version-history":[{"count":0,"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/posts\/1753\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/media?parent=1753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/categories?post=1753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.topklus.com\/seo\/wp-json\/wp\/v2\/tags?post=1753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}