빠른 페이지 로딩은 검색 엔진 순위, 웹사이트 전환율 및 전반적인 사용자 경험을 향상시키는 데 매우 중요합니다. 웹사이트 페이지의 로딩 속도 역시 웹사이트 성능을 측정하는 중요한 요소입니다.
웹사이트가 최고 성능으로 실행되지 않는 경우 로딩 속도가 느리면 순위가 낮고 검색 트래픽 비용이 더 많이 발생합니다. 페이지 로딩 속도는 사용자 행동과 전환율에 큰 영향을 미칠 수 있습니다.
그럼요? 로딩 속도를 최적화하는 간단한 방법은 무엇입니까?
1. 이미지 최적화
우선, 웹사이트 속도를 조금이라도 높이려면 웹사이트의 이미지를 최적화해야 합니다. 원본 이미지에서 추가 주석, 불필요한 공간 및 불필요한 색상을 제거하고 이미지를 JPEG 형식으로 저장하면 공간을 덜 차지하더라도 고품질이 보장됩니다.
WordPress 웹사이트의 경우 smush.it 플러그인을 사용하여 웹사이트 이미지를 자동으로 최적화하는 것이 좋습니다. 이미지가 PNG 형식인 경우tinypng를 사용하여 이미지를 최적화하고 이미지 품질을 향상시킬 수 있습니다.
2. GZip 압축 켜기
GZip 압축은 복잡해 보이지만 실제로는 매우 간단합니다. HTTP 요청의 크기를 줄이고 응답 시간을 단축하는 데 사용됩니다. 이를 통해 HTML 파일 대신 GZip 압축 파일을 브라우저에 보낼 수 있으므로 페이지 대기 시간과 로드 시간이 단축됩니다. Apache 서버의 경우 .htaccess 파일에 다음 코드를 추가하여 GZip 압축을 활성화할 수 있습니다.
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>
위 코드가 GZip 압축을 활성화하지 않는 경우 해당 코드를 삭제하고 다음 코드를 사용하세요.
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension: <files *.html> SetOutputFilter DEFLATE </files>
또는 HTML/PHP 상단에 다음 PHP 코드를 추가하세요. 파일:
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>3. 서버 응답 시간
웹사이트가 최적화되더라도 서버 응답 시간이 아주 빠르지 않으면 큰 효과는 없습니다. 웹사이트 속도 향상에 있어 서버 응답 시간은 중요한 역할을 합니다. 다음은 서버 응답 시간을 개선하기 위한 몇 가지 제안 사항입니다.
공유/호스팅 서버를 선택하는 대신 전용 서버를 사용하세요.
웹 서버의 품질을 향상시키세요.
불필요한 플러그인을 제거하세요. 필요한 플러그인만 항상 활성화되어 있어야 합니다.
4. 브라우저 캐시
브라우저에는 지정된 파일을 저장하고 HTTP 요청을 줄여 웹 사이트의 로딩 속도를 향상시킬 수 있는 캐시 기능이 있습니다. .htaccess 파일에서 만료 헤더를 설정하여 브라우저 캐싱을 활성화할 수 있습니다.
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING ##
참고: 만료 시간이 파일에 연결된 경우 파일을 변경하는 경우 브라우저가 새로 추가된 코드를 검색할 수 있도록 먼저 파일 이름을 바꿔야 합니다.
5. 긴 연결 켜기(Keep-Alive)
Keep-Alive 헤더는 브라우저와 서버 간의 분산 요청 지연 시간을 줄이는 데 매우 중요합니다. 사용자가 브라우저를 통해 웹페이지를 요청하면 브라우저는 서버에서 보낸 특정 HTML 파일을 읽습니다. 요청한 페이지에 외부 CSS 및 JavaScript 파일이 포함되어 있으면 브라우저는 해당 파일을 얻기 위해 별도의 요청을 다시 보냅니다. 상상할 수 있듯이 이로 인해 페이지 로드 시간이 늘어납니다.
브라우저가 서버에서 이 페이지와 관련된 모든 리소스를 얻을 때까지 연결을 유지하려면 Keep-Alive 헤더를 사용하세요. 이 기능을 활성화하려면 .htaccess 파일에 다음 코드를 추가하세요.
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
6. CDN 사용
内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
7、压缩CSS、JavaScript和HTML文件
通过删除所有不必要的空格和注释，从而减小文件大小，提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具，非常有用。
CSS Minifier
Avivo
HTML Compressor
8、避免重定向
重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家，却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间，降低加载速度。
9、指定字符集
指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
10、避免错误请求
当用户在网站上搜索时，收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此，建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接，清除它们，改善用户体验。
11、丢弃跟踪代码、嵌入视频的元素和分享按钮
很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验，实际上这只会给网站增加更多的服务请求。例如，一个iframe会请求一个新页面，这会自动降低网站的加载速度。所以，丢弃这些跟踪代码，可以提高网站加载速度，提升用户体验。
12、异步脚本
还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中，脚本是在后台下载的，不会影响浏览器对页面的渲染和加载。
<script async src="http://www.yoursite.com/script.js"></script>
13、样式表置顶，脚本置底
将样式表放在顶部有利于页面迅速加载，因为这样可以使得页面慢慢呈现。一般来说，在同一时间，大部分浏览器支持并行下载两个组件（图像、样式和脚本）。但是通常而言，脚本会在并行下载时会阻止其他的下载，直到脚本下载完毕。
14、JavaScript的延迟解析
为了加载网页，浏览器必须解析所有的标记内容，从而增加了网站的加载时间。通过延迟解析脚本，那么就可以减少初始网站的加载时间了。
15. JavaScript 및 CSS 차단을 피하세요
브라우저가 웹 페이지를 렌더링하기 전에 먼저 HTML 마크업 언어를 구문 분석하여 DOM 트리를 구축해야 합니다. 이 프로세스 중에 스크립트가 발견되면 프로세스가 중단되고 원래 활동을 계속하기 전에 스크립트가 실행됩니다. 따라서 JavaScript, 특히 외부 스크립트를 차단하지 않는 것이 좋습니다.
JavaScript를 차단하면 웹사이트가 지연될 수도 있습니다. 따라서 중요하지 않은 JavaScript 로드를 연기하거나 비동기적으로 로드하는 것이 좋습니다. 또 다른 옵션은 이러한 HTML 코드를 웹사이트에 삽입하여 CSS가 최적화되었는지 확인하는 것입니다.
16. 코드 최적화: 인라인 CSS를 사용하지 마세요.
인라인 스타일은 디자인과 콘텐츠를 명확하게 구분할 수 없습니다. 동시에 많은 유지 관리 작업이 필요하여 웹 사이트 관리자에게 다양한 불편을 초래하고 웹 페이지 크기가 더욱 커질 수 있습니다.
17. 파일 분리
웹사이트 파일은 CSS, JavaScript, 이미지로 나눌 수 있습니다. 파일 분리가 웹사이트 로딩 시간을 직접적으로 개선하지는 않습니다. 그러나 이렇게 하면 특히 웹 사이트 트래픽이 갑자기 급증할 때 서버 안정성이 향상될 수 있습니다. 하위 도메인을 사용하여 파일을 호스팅할 수도 있으므로 병렬 다운로드 수가 늘어납니다.
18. HTTP 요청을 최대한 줄입니다.
웹 페이지 속도를 최적화하는 또 다른 간단한 방법은 HTTP 요청을 줄이는 것입니다. 웹 사이트가 한 번에 너무 많은 HTTP 요청을 받으면 방문자는 응답 시간이 지연되어 CPU 사용량이 늘어날 뿐만 아니라 페이지 로드 시간도 늘어납니다. 그렇다면 HTTP 요청을 줄이는 방법은 무엇입니까? 아래 단계를 참조하세요.
사이트의 개체 수를 줄이세요.
웹사이트의 리디렉션 수를 최소화하세요.
CSS Sprites 기술을 사용합니다(이미지 콘텐츠 중 필요한 부분만).
JavaScript와 CSS 파일을 병합합니다.
참고 기사
페이지 속도를 향상시키는 12가지 실행 가능한 방법
웹사이트의 페이지 속도를 최적화하는 13가지 이상의 방법
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
