ì‚¬ì—…ì£¼ì˜ ê²½ìš°, 웹사ì´íŠ¸ê°€ ë¹ ë¥´ê²Œ 로드ë˜ëŠ”ì§€ 확ì¸í•˜ëŠ” ê²ƒì€ ì¶©ì„±ë„ ë†’ì€ ê³ ê°ì„ 확보하ëŠëƒ, 아니면 ìž ìž¬ì ì¸ ë§¤ì¶œì„ ë†“ì¹˜ëŠëƒì˜ ì°¨ì´ë¥¼ ì˜ë¯¸í• 수 있습니다.
ì˜¤ëŠ˜ë‚ ì˜ ì˜¨ë¼ì¸ 쇼핑ê°ë“¤ì€ ì„ íƒí• 수 있는 ì˜µì…˜ì´ ë„ˆë¬´ 많아서 ëŠë¦° 페ì´ì§€ë¥¼ 기다리지 않습니다. ê·¸ë“¤ì€ ì¦‰ê°ì ì¸ ë§Œì¡±ì„ ê¸°ëŒ€í•˜ë©°, ê·€í•˜ì˜ ì‚¬ì´íŠ¸ê°€ ë§Œì¡±ì„ ì£¼ì§€ 못하면 ë§Œì¡±ì„ ì£¼ëŠ” 사ì´íŠ¸ë¡œ 넘어갈 것입니다.
ì´ë¡œ ì¸í•´ 우리는 시급한 ì§ˆë¬¸ì¸ '웹 페ì´ì§€ 로딩 ì†ë„를 어떻게 ë†’ì¼ ìˆ˜ 있ì„까?'ì— ì§ë©´í•˜ê²Œ ë©ë‹ˆë‹¤.
ì´ ë¸”ë¡œê·¸ 게시물ì—서는 웹사ì´íЏ ì†ë„ì— ëŒ€í•œ í•„ìš”ì„±ì„ ì‚´íŽ´ë³´ê³ ë¡œë”© ì‹œê°„ì„ í™•ì¸í•˜ëŠ” 방법과 로딩 ì†ë„를 ì €í•˜ì‹œí‚¤ëŠ” ìš”ì¸ì„ 파악하는 ë°©ë²•ì„ ì•Œë ¤ë“œë¦½ë‹ˆë‹¤.
사ì´íЏ ì†ë„ê°€ 중요한 ì´ìœ 는 무엇입니까?
웹사ì´íŠ¸ë¥¼ í´ë¦í–ˆëŠ”ë° íŽ˜ì´ì§€ê°€ 로드ë˜ëŠ” ë° ì˜ì›í•œ ì‹œê°„ì´ ê±¸ë¦° 것 ê°™ì€ ëŠë‚Œì´ 들어본 ì ì´ ìžˆë‚˜ìš”? ì§œì¦ë‚˜ì§€ 않나요? ì´ì œ ìž ìž¬ ê³ ê°ì—게 ì´ëŸ° ìƒí™©ì´ ì¼ì–´ë‚œë‹¤ê³ ìƒìƒí•´ë³´ì„¸ìš”.
ê³ ê°ì€ ì†ë„를 기대하며, ì´ëŸ¬í•œ ê¸°ëŒ€ì— ë¶€ì‘하지 못하면 수ìµì— 심ê°í•œ ì˜í–¥ì„ ë¯¸ì¹ ìˆ˜ 있습니다.
ìˆ˜ë§Žì€ ì—°êµ¬ ê²°ê³¼ì— ë”°ë¥´ë©´ 사ì´íЏ ì†ë„는 ì „í™˜ìœ¨ê³¼ ë§¤ì¶œì— ìƒë‹¹í•œ ì˜í–¥ì„ 미친다는 ì‚¬ì‹¤ì´ ìž…ì¦ë˜ì—ˆìŠµë‹ˆë‹¤.
예를 들어 27,000ê°œ ì´ìƒì˜ 페ì´ì§€ì—서 B2C ì „ìžìƒê±°ëž˜ 웹사ì´íŠ¸ì˜ ì „í™˜ìœ¨ê³¼ 사ì´íЏ ì†ë„를 비êµí–ˆìŠµë‹ˆë‹¤. ê²°ê³¼ì— ë”°ë¥´ë©´ 1ì´ˆ ë§Œì— ë¡œë”©ë˜ëŠ” 사ì´íŠ¸ëŠ” ì „í™˜ìœ¨ 2.5ë°° ë” ë†’ìŒ ë¡œë“œí•˜ëŠ” ë° 5초가 걸리는 것보다 ë” ë§Žì€ ì‹œê°„ì´ ê±¸ë¦½ë‹ˆë‹¤.
마찬가지로 B2B 웹사ì´íŠ¸ì˜ ê²½ìš° 1ì´ˆ ì•ˆì— ë¡œë“œë˜ëŠ” 사ì´íŠ¸ëŠ” ì „í™˜ìœ¨ 3ë°° ë” ë†’ìŒ ì‚¬ì´íŠ¸ë³´ë‹¤&²Ô²ú²õ±è;
페ì´ì§€ 로드 ì‹œê°„ì€ ì‚¬ìš©ìž ê²½í—˜ì— ì§ì ‘ì ì¸ ì˜í–¥ì„ 미칩니다. 사ì´íЏ ë¡œë“œì— ë„ˆë¬´ 오랜 ì‹œê°„ì´ ê±¸ë¦¬ë©´ 사용ìžëŠ” ì°¸ì„ì„±ì„ ìžƒê³
Googleì€ ì•Œê³ ë¦¬ì¦˜ì˜ ìš”ì†Œ 중 하나로 페ì´ì§€ 로드 ì‹œê°„ì„ ì‚¬ìš©í•˜ëŠ”ë°, ì´ëŠ” ë” ë¹ ë¥¸ 사ì´íŠ¸ê°€ 검색 ê²°ê³¼ì—서 ë” ë†’ì€ ìˆœìœ„ì— ë‚˜íƒ€ë‚ ê°€ëŠ¥ì„±ì´ ë” ë†’ë‹¤ëŠ” ê²ƒì„ ì˜ë¯¸í•©ë‹ˆë‹¤. ë”°ë¼ì„œ ì „ìžìƒê±°ëž˜ 웹사ì´íЏ ì†ë„ 최ì 화는 íŒë§¤ì— ì˜í–¥ì„ ë¯¸ì¹ ë¿ë§Œ ì•„ë‹ˆë¼ ì˜¨ë¼ì¸ ê°€ì‹œì„±ë„ í–¥ìƒì‹œí‚µë‹ˆë‹¤.

ë¡œë”©ì€ Googleì´ ê²€ìƒ‰ ê²°ê³¼ì—서 웹 페ì´ì§€ì˜ 순위를 매기는 ë° ì‚¬ìš©í•˜ëŠ” ì§€í‘œì¸ Core Web Vitalsì˜ í•µì‹¬ 구성 요소입니다(출처: )
페ì´ì§€ 로딩 ì‹œê°„ì€ ë¬´ì—‡ì— ë”°ë¼ ë‹¬ë¼ì§€ë‚˜ìš”?
웹사ì´íЏ 로딩 ì‹œê°„ì— ì˜í–¥ì„ 미치는 요소를 ì´í•´í•˜ëŠ” ê²ƒì´ ê°œì„ ì„ ìœ„í•œ 첫 번째 단계입니다. ë„¤íŠ¸ì›Œí¬ ë° ì„œë²„ 시간, 브ë¼ìš°ì € ì‹œê°„ì„ í¬í•¨í•˜ì—¬ 페ì´ì§€ê°€ 얼마나 빨리 로딩ë˜ëŠ”ì§€ì— ì˜í–¥ì„ 미치는 여러 요소가 있습니다.
ë„¤íŠ¸ì›Œí¬ ë° ì„œë²„ ì‹œê°„ì€ ì¸í„°ë„· ì—°ê²° ì†ë„와 ì´ë¯¸ì§€, íŒŒì¼ ë“±ì˜ ì •ì ìžì‚°ì´ 얼마나 빨리 ì œê³µë˜ëŠ”ì§€ì— ë”°ë¼ ë‹¬ë¼ì§‘니다.
브ë¼ìš°ì € 시간ì´ëž€ 브ë¼ìš°ì €ê°€ 페ì´ì§€ë¥¼ 구문 ë¶„ì„í•˜ê³ ì‹¤í–‰í•˜ê³ ë Œë”ë§í•˜ëŠ” ë° ê±¸ë¦¬ëŠ” 시간입니다. 간단히 ë§í•´ì„œ 브ë¼ìš°ì €ê°€ 사ì´íŠ¸ì˜ ì½˜í…ì¸ ë¥¼ 얼마나 빨리 ì´í•´í•˜ê³ í‘œì‹œí• ìˆ˜ 있는지를 ì˜ë¯¸í•©ë‹ˆë‹¤.
브ë¼ìš°ì €, 플랫í¼, 심지어 지리ì 위치가 다르면 ê°™ì€ ì›¹ 페ì´ì§€ì— 대한 로드 ì‹œê°„ì´ ë‹¬ë¼ì§ˆ 수 있습니다. 예를 들어, ëª¨ë°”ì¼ ê¸°ê¸°ì—서 사ì´íŠ¸ì— ì•¡ì„¸ìŠ¤í•˜ëŠ” 사용ìžëŠ” ë°ìФí¬í†±ì„ 사용하는 사용ìžì™€ 다른 ì†ë„를 ê²½í—˜í• ìˆ˜ 있습니다.
마찬가지로 ê·€í•˜ì˜ ì›¹ì‚¬ì´íŠ¸ê°€ 미êµì— 위치한 ì„œë²„ì— í˜¸ìŠ¤íŒ…ëœ ê²½ìš°, 해외 사용ìžëŠ” 로드 ì‹œê°„ì´ ë” ê¸¸ì–´ì§ˆ 수 있습니다.
ì „ìžìƒê±°ëž˜ 사ì´íЏ ì†ë„ì— ì˜í–¥ì„ 미치는 다른 요소는 다ìŒê³¼ 같습니다.
ë†’ì€ í•´ìƒë„ ì´ë¯¸ì§€ì™€ 비디오. ì¼ë°˜ì 으로 ì´ëŸ¬í•œ 파ì¼ì€ ë” í° ê²½í–¥ì´ ìžˆìœ¼ë©° 페ì´ì§€ 로드 ì†ë„를 늦출 수 있습니다.ì œ 3 ìž ì•±, í”ŒëŸ¬ê·¸ì¸ ë° ì‚¬ìš©ìž ì •ì˜. ë¼ì´ë¸Œ 채팅,íŒ ì—…, ê·¸ë¦¬ê³ ë‹¤ë¥¸ ì‚¬ìš©ìž ì •ì˜ëŠ” 서비스ì—서 ê°€ì ¸ì˜¤ëŠ” ì •ë³´ì— ë”°ë¼ ì²˜ë¦¬í•˜ëŠ” ë° ì•½ê°„ì˜ ì‹œê°„ì´ ê±¸ë¦´ 수 있으며 ì´ëŠ” 페ì´ì§€ 로드 ì†ë„ì— ì˜í–¥ì„ ë¯¸ì¹ ìˆ˜ 있습니다.- 웹사ì´íЏ 테마/템플릿. 사ì´íЏ í…Œë§ˆì— ì§€ì €ë¶„í•˜ê±°ë‚˜ 불필요한 코드가 많으면 페ì´ì§€ 로딩 ì‹œê°„ì´ ëŠë ¤ì§ˆ 수 있습니다.
- 웹사ì´íЏ íŠ¸ëž˜í”½ì´ ë§ŽìŠµë‹ˆë‹¤. ì „ìžìƒê±°ëž˜ 웹사ì´íŠ¸ì— í•œ ë²ˆì— ë§Žì€ ìˆ˜ì˜ ë°©ë¬¸ìžê°€ 들어오면 서버 ì‘답 ì‹œê°„ì— ì˜í–¥ì„ 미칩니다.
사ì´íЏ ì†ë„를 확ì¸í•˜ëŠ” 방법
웹사ì´íЏ ì†ë„를 ê°œì„ í•˜ê¸° ì „ì—, 웹사ì´íŠ¸ì˜ í˜„ìž¬ ìƒíƒœë¥¼ 알아야 합니다. 여러 온ë¼ì¸ ë„구를 사용하면 웹사ì´íЏ ì†ë„ 테스트를 ì‹¤í–‰í•˜ê³ ê°œì„ í• ì˜ì—ì„ ì‹ë³„하는 ë° ë„ì›€ì´ ë 수 있습니다.
Google PageSpeed ​​Insights, GTmetrix, Pingdomê³¼ ê°™ì€ ë„구는 로딩 시간, 페ì´ì§€ í¬ê¸°, ìš”ì² ìˆ˜ì™€ ê°™ì€ ì¤‘ìš”í•œ ì¸¡ì • í•ëª©ì„ ê°•ì¡°í•˜ì—¬ 사ì´íЏ ì„±ëŠ¥ì— ëŒ€í•œ ìžì„¸í•œ ë³´ê³ ì„œë¥¼ ì œê³µí•©ë‹ˆë‹¤.

GTmetrix ë³´ê³ ì„œì˜ ì„±ëŠ¥ ì 수는 페ì´ì§€ê°€ 로드ë˜ëŠ” ì†ë„를 í¬í•¨í•˜ì—¬ ì‚¬ìš©ìž ê´€ì ì—서 페ì´ì§€ ì„±ëŠ¥ì´ ì–¼ë§ˆë‚˜ 좋ì€ì§€ ë³´ì—¬ì¤ë‹ˆë‹¤.
ì´ëŸ¬í•œ ë„구를 ì‚¬ìš©í•˜ë ¤ë©´ 웹사ì´íЏ URLì„ ìž…ë ¥í•˜ê³ í…ŒìŠ¤íŠ¸ë¥¼ 실행하기만 하면 ë©ë‹ˆë‹¤. 결과는 사ì´íŠ¸ì˜ í˜„ìž¬ ì†ë„ì— ëŒ€í•œ í†µì°°ë ¥ì„ ì œê³µí•˜ê³ ìµœì 화를 위한 권장 사í•ì„ ì œê³µí•©ë‹ˆë‹¤.
ì •ê¸°ì 으로 사ì´íЏ ì†ë„를 확ì¸í•˜ë©´ ë°œìƒí• 수 있는 ë¬¸ì œë¥¼ 미리 íŒŒì•…í•˜ê³ ì§€ì†ì 으로 ê°œì„ í• ìˆ˜ 있습니다.
ì¢‹ì€ íŽ˜ì´ì§€ 로딩 시간ì´ëž€?
ì „ìžìƒê±°ëž˜ 웹사ì´íЏ 최ì í™”ì— ëŒ€í•´ 알아보기 ì „ì—, ì´ìƒì ì¸ íŽ˜ì´ì§€ 로드 시간ì´ëž€ 무엇ì¸ì§€ ê¶ê¸ˆí• 것입니다.
ê·¸ ì§ˆë¬¸ì— ë‹µí•˜ê¸° 위해 다ìŒì— 대해 ì´ì•¼ê¸°í•´ ë³´ê² ìŠµë‹ˆë‹¤. ì´ëŠ” Googleì´ ì¤‘ìš”í•œ 웹 성능 ì¸¡ë©´ì„ ì¸¡ì •í•˜ëŠ” ë° ì‚¬ìš©í•˜ëŠ” ì¼ë ¨ì˜ ì¸¡ì • í•목입니다.
핵심 웹 ë°”ì´íƒˆ 중 하나는 페ì´ì§€ì˜ 로딩 ì„±ëŠ¥ì„ ì¸¡ì •í•˜ëŠ” 가장 í° ì½˜í…ì¸ íŽ˜ì¸íŠ¸ìž…ë‹ˆë‹¤. Googleì€ ë‹¤ìŒì„ 목표로 ì œì•ˆí•©ë‹ˆë‹¤. .
하지만 ë¹ ë¥¼ìˆ˜ë¡ ì¢‹ìŠµë‹ˆë‹¤. 가장 ì¢‹ì€ ë°©ë²•ì€ 2ì´ˆ ë¯¸ë§Œì˜ íŽ˜ì´ì§€ 로드 ì‹œê°„ì„ ëª©í‘œë¡œ 하는 것입니다. ì´ ë²¤ì¹˜ë§ˆí¬ë¥¼ 달성하면 ì‚¬ìš©ìž ê²½í—˜ì„ í¬ê²Œ í–¥ìƒì‹œí‚¤ê³ 사ì´íŠ¸ì˜ ê²€ìƒ‰ 엔진 순위를 ê°œì„ í• ìˆ˜ 있습니다.
기억하세요, ìž‘ì€ ê°œì„ ì´ë¼ë„ í° ì˜í–¥ì„ ë¯¸ì¹ ìˆ˜ 있습니다. 페ì´ì§€ 로드 ì‹œê°„ì„ ë‹¨ 1초만 ë‹¨ì¶•í•´ë„ ì „í™˜ìœ¨ì´ ë†’ì•„ì§€ê³ ê³ ê° ë§Œì¡±ë„ê°€ 높아질 수 있습니다. 목표는 매ë„럽ê³
사ì´íЏ ì†ë„를 ê°œì„ í•˜ëŠ” 방법
ì´ì œ 웹사ì´íЏ ì†ë„ì˜ ì¤‘ìš”ì„±ê³¼ ì´ë¥¼ 확ì¸í•˜ëŠ” ë°©ë²•ì„ ì´í•´í–ˆìœ¼ë‹ˆ, ì´ë¥¼ ê°œì„ í•˜ê¸° 위한 ì‹¤ì œì ì¸ ë‹¨ê³„ë¥¼ ì‚´íŽ´ë³´ê² ìŠµë‹ˆë‹¤.
웹사ì´íЏ ì†ë„ 최ì 화를 위한 효과ì ì¸ ê¸°ìˆ ì€ ë‹¤ìŒê³¼ 같습니다.
플랫í¼ì„ ì„ íƒí• 때 조사를 하세요
ì ì ˆí•œ 플랫í¼ì„ 사용하면 웹 페ì´ì§€ 로딩 ì‹œê°„ì„ ë‹¨ì¶•í•˜ëŠ” ë°©ë²•ì— ëŒ€í•´ ê±±ì •í• í•„ìš”ê°€ ì—†ì„ ê²ƒìž…ë‹ˆë‹¤.
비즈니스를 위한 사ì´íЏ 빌ë”나 ì „ìžìƒê±°ëž˜ 플랫í¼ì„ ì„ íƒí• 때는 성능 ì—ëŸ‰ì„ ê³ ë ¤í•´ì•¼ 합니다. 웹사ì´íЏ 로딩 ì†ë„ì— ëŒ€í•œ 리뷰와 ì •ë³´ë¥¼ 찾아 ë¹„ì¦ˆë‹ˆìŠ¤ì— ê°€ìž¥ ì 합한 ì˜µì…˜ì„ ì„ íƒí•˜ì„¸ìš”.
예를 들어 ë¼ì´íŠ¸ìŠ¤í”¼ë“œì˜ ì—위드, 우리는 대ì—í ì œí•œ ì—†ì´ ë¹ ë¥´ê³ ì „ 세계ì 으로 ë¶„ì‚°ëœ ì„œë²„ì—서 온ë¼ì¸ ë§¤ìž¥ì„ í˜¸ìŠ¤íŒ…í•©ë‹ˆë‹¤. 게다가, 우리는 ì§€ì†ì 으로 코드와 ì¸í”„ë¼ë¥¼ ê°œì„ í•˜ì—¬ ë” ë¹ ë¥¸ 서버 ì‘ë‹µì— ê¸°ì—¬í•©ë‹ˆë‹¤(요약하ìžë©´, ì´ëŠ” 서버가 ì •ë³´ë¥¼ ì „ë‹¬í•˜ëŠ” ì†ë„를 ë§í•©ë‹ˆë‹¤).
사ì´íЏ 테마나 템플릿ì—ë„ ë§ˆì°¬ê°€ì§€ìž…ë‹ˆë‹¤. 51ÊÓÆµì˜ ì¸ìŠ¤í„´íŠ¸ 사ì´íЏ 템플릿 ê°„ì†Œí™”ëœ í”„ë ˆìž„ì›Œí¬ë¡œ ì‹œìž‘í• ì¤€ë¹„ê°€ ë˜ì—ˆìŠµë‹ˆë‹¤. WordPress나 Wix와 ê°™ì€ ë‹¤ë¥¸ 플랫í¼ì—서 사ì´íŠ¸ë¥¼ 호스팅하는 경우 최ì í™”ëœ í…Œë§ˆë¥¼ ì„ íƒí•˜ì„¸ìš”.

51ÊÓÆµ Instant 사ì´íЏ í…œí”Œë¦¿ì€ ê³ ê°ì˜ ë¹ ë¥¸ 쇼핑 ê²½í—˜ì„ ìœ„í•´ 최ì í™”ë˜ì—ˆìŠµë‹ˆë‹¤.
ì´ë¯¸ì§€ 최ì í™”
대용량 ì´ë¯¸ì§€ 파ì¼ì€ 페ì´ì§€ 로드 ì‹œê°„ì„ ëŠë¦¬ê²Œ 만드는 주범 중 하나입니다.
í’ˆì§ˆì„ í¬ìƒí•˜ì§€ ì•Šê³ ì´ë¯¸ì§€ë¥¼ 압축하여 최ì 화하세요.
- ì‚¬ì§„ì€ JPEG, ë°°ê²½ì´ íˆ¬ëª…í•œ ê·¸ëž˜í”½ì€ PNG와 ê°™ì€ í˜•ì‹ì„ 사용하세요.
- TinyPNG ë° ImageOptimê³¼ ê°™ì€ ë„구를 사용하면 ì´ë¯¸ì§€ë¥¼ ì†ì‰½ê²Œ ì••ì¶•í• ìˆ˜ 있습니다.
그런ë°, 51ÊÓÆµëŠ” ìžë™ìœ¼ë¡œ ì œí’ˆ ì´ë¯¸ì§€ë¥¼ 압축하므로 ë§¤ìž¥ì´ ë¹ ë¥´ê²Œ 로드ë˜ê³ ë°ìФí¬í†±ê³¼ 모바ì¼ì—서 ëª¨ë‘ ë©‹ì§€ê²Œ 보입니다. 웹사ì´íЏ í…Œë§ˆì— ê°€ë²¼ìš´ ì‚¬ì§„ì„ ì‚¬ìš©í•˜ê³ ìžˆëŠ”ì§€ 확ì¸í•˜ì„¸ìš”.
ì œí’ˆ ë ˆì´ì•„웃 최ì í™”
ë©”ì¸ íŽ˜ì´ì§€ì— ëª¨ë“ ì œí’ˆì„ í‘œì‹œí•˜ëŠ” ëŒ€ì‹ , ìŠ¤í† ì–´í”„ëŸ°íŠ¸ì— í‘œì‹œí•˜ëŠ” ì œí’ˆì˜ ìˆ˜ë¥¼ 줄ì´ë©´ 사ì´íЏ ì†ë„를 ê°œì„ í•˜ëŠ” ë° ë„ì›€ì´ ë©ë‹ˆë‹¤.
ì¹´í…Œê³ ë¦¬ë¥¼ ì¶•ì†Œí•˜ê³ ìŠ¤í† ì–´í”„ëŸ°íŠ¸ 페ì´ì§€ì— ë” ì ì€ ì œí’ˆì„ í‘œì‹œí•˜ë©´ 호스팅 서버ì—서 콘í…ì¸ ë‹¤ìš´ë¡œë“œ ì†ë„를 높ì´ëŠ” ë° ë„ì›€ì´ ë 수 있습니다. 다ìŒì€ .
수를 ì œí•œí•˜ë‹¤ 탶Ä사 앱
ë‹¹ì‹ ì€ ëª‡ 가지를 ì„¤ì¹˜í–ˆì„ ìˆ˜ 있습니다
ê¼ í•„ìˆ˜ì ì¸ ê²ƒë§Œ 사용하세요
ë¦¬ë””ë ‰ì…˜ 최소화
ë¦¬ë””ë ‰ì…˜ì€ ì›¹ 페ì´ì§€ë¥¼ ë°©ë¬¸í•˜ë ¤ê³ í–ˆì§€ë§Œ 다른 페ì´ì§€ë¡œ ì´ë™í•˜ê²Œ ë˜ëŠ” 경우 ë°œìƒí•©ë‹ˆë‹¤. ë¦¬ë””ë ‰ì…˜ì€ ì•½ê°„ì˜
ë¦¬ë””ë ‰ì…˜ì€ ë•Œë•Œë¡œ í”¼í• ìˆ˜ 없는 ì¼ì¸ë°, 예를 들어 ì¤‘ë‹¨ëœ ì œí’ˆì—서 새로운 ì œí’ˆìœ¼ë¡œ 방문ìžë¥¼ ì „ë‹¬í•´ì•¼ í• ë•Œìž…ë‹ˆë‹¤. 하지만 조심하세요. ë¦¬ë””ë ‰ì…˜ì€ íŠ¹ížˆ 여러 ì‚¬ëžŒì´ ê´€ë¦¬í•˜ëŠ” 대규모 사ì´íЏì—서 ê³¼ë„하게 사용ë 수 있으며 ì‹œê°„ì´ ì§€ë‚¨ì— ë”°ë¼ ìŒ“ì¼ ìˆ˜ 있습니다.
사ì´íЏ ì†Œìœ ìžë¡œì„œ ë¦¬ë””ë ‰ì…˜ ì‚¬ìš©ì— ëŒ€í•œ 명확한 ì§€ì¹¨ì„ ì„¤ì •í•˜ê³ ë¶ˆí•„ìš”í•œ ë¦¬ë””ë ‰ì…˜ì´ ìžˆëŠ”ì§€ 주요 페ì´ì§€ë¥¼ ì •ê¸°ì 으로 확ì¸í•˜ì„¸ìš”. ê·¸ë¦¬ê³ 51ÊÓÆµ Instant Siteì— ëŒ€í•œ ë¦¬ë””ë ‰ì…˜ì„ ë§Œë“¤ì–´ì•¼ 하는 경우 다ìŒì„ 참조하세요. .
ìœ„ì˜ ëª¨ë“ ê²ƒì„ ì‹œë„했지만 ì—¬ì „ížˆ 웹사ì´íЏ ì†ë„를 최ì 화하는 ë°©ë²•ì„ ê¶ê¸ˆí•´í•œë‹¤ë©´ 개발ìžì˜ ë„ì›€ì´ í•„ìš”í• ìˆ˜ 있습니다. 앞서 언급한 íŒì€ 구현하기 충분히 간단하지만,
브ë¼ìš°ì € ìºì‹± 사용
브ë¼ìš°ì € ìºì‹±ì€ ì •ì 파ì¼ì„ 사용ìžì˜ ê¸°ê¸°ì— ì €ìž¥í•˜ë¯€ë¡œ 사용ìžê°€ 사ì´íŠ¸ë¥¼ ë°©ë¬¸í• ë•Œë§ˆë‹¤ 다시 ë¡œë“œí• í•„ìš”ê°€ 없습니다. ì´ë ‡ê²Œ 하면 방문ìžì˜ 로드 ì‹œê°„ì„ í¬ê²Œ ì¤„ì¼ ìˆ˜ 있습니다.
개발ìžì—게 ìºì‹œëœ ë¦¬ì†ŒìŠ¤ì˜ ë§Œë£Œì¼ì„ ì„¤ì •í•˜ë„ë¡ ì„œë²„ë¥¼ 구성해 달ë¼ê³ ìš”ì²í•˜ì—¬ 사용ìžê°€ 불필요한 지연 ì—†ì´ ì‚¬ì´íŠ¸ì˜ ìµœì‹ ë²„ì „ì„ ì‚¬ìš©í• ìˆ˜ 있ë„ë¡ í•©ë‹ˆë‹¤. 개발ìžëŠ” 브ë¼ìš°ì €ì— ìžì£¼ 변경ë˜ì§€ 않는 웹페ì´ì§€ 요소를 ìºì‹œí•˜ë„ë¡ ì§€ì‹œí• ìˆ˜ë„ ìžˆìŠµë‹ˆë‹¤.
콘í…ì¸ ì „ì†¡ ë„¤íŠ¸ì›Œí¬ ì‚¬ìš©
CDN ë˜ëŠ” 콘í…ì¸ ì „ì†¡ 네트워í¬ëŠ” 사ì´íŠ¸ì˜ ì •ì ìžì‚°ì„ ì „ 세계 여러 ë°ì´í„° ì„¼í„°ì— ë¶„ì‚°í•©ë‹ˆë‹¤. 사용ìžê°€ 사ì´íŠ¸ì— ì•¡ì„¸ìŠ¤í•˜ë©´ CDNì€ ê°€ìž¥ 가까운 ë°ì´í„° 센터ì—서 ìžì‚°ì„ ì œê³µí•˜ì—¬ 로드 ì‹œê°„ì„ ì¤„ìž…ë‹ˆë‹¤. ì¸ê¸° 있는 CDN 공급업체로는 Cloudflare, Akamai, Gcore, Amazon CloudFrontê°€ 있습니다.
CDNì„ ì‚¬ìš©í•˜ë©´ 해외 방문ìžì˜ 로딩 ì‹œê°„ì„ í¬ê²Œ ì¤„ì¼ ìˆ˜ 있으므로 글로벌 ê³ ê°ì„ 대ìƒìœ¼ë¡œ 하는 기업ì—게는 ì 합합니다.
Accelerated Mobile Pages 구현
Accelerated Mobile Pages ë˜ëŠ” AMP는 ëª¨ë°”ì¼ íŽ˜ì´ì§€ê°€ ë” ë¹¨ë¦¬ 로드ë˜ë„ë¡ ì„¤ê³„ëœ í”„ë ˆìž„ì›Œí¬ìž…니다. AMP를 사용하면 ëª¨ë°”ì¼ íŽ˜ì´ì§€ì˜ 로드 ì‹œê°„ì„ í¬ê²Œ ê°œì„ í•˜ì—¬ ëª¨ë°”ì¼ ë°©ë¬¸ìžì˜ ì‚¬ìš©ìž ê²½í—˜ì„ í–¥ìƒì‹œí‚¬ 수 있습니다.
HTTP ìš”ì² ìµœì†Œí™”
ëŒ€ë¶€ë¶„ì˜ ì›¹íŽ˜ì´ì§€ëŠ” ì´ë¯¸ì§€, 스í¬ë¦½íЏ, CSS 파ì¼ê³¼ ê°™ì€ ë‹¤ì–‘í•œ ìžì‚°ì— 대한 여러 HTTP ìš”ì²ì„ 하기 위해 브ë¼ìš°ì €ê°€ 필요합니다. 사실, ì¼ë¶€ 페ì´ì§€ëŠ” ìˆ˜ì‹ ê°œì˜ ì´ëŸ¬í•œ ìš”ì²ì„ 필요로 합니다. ê° ìš”ì²ì€ 리소스를 호스팅하는 ì„œë²„ì™€ì˜ ì™•ë³µì„ ì˜ë¯¸í•˜ë©°, ì´ëŠ” 웹페ì´ì§€ì˜ ì „ì²´ 로드 ì‹œê°„ì„ ëŠ¦ì¶œ 수 있습니다.
ì´ëŸ¬í•œ ìž ìž¬ì ì¸ ë¬¸ì œ ë•Œë¬¸ì— ê° íŽ˜ì´ì§€ê°€ 로드해야 하는 ìžì‚°ì˜ 수를 최소한으로 ìœ ì§€í•˜ëŠ” ê²ƒì´ ê°€ìž¥ 좋습니다. ì†ë„ 테스트를 실행하면 ì–´ë–¤ HTTP ìš”ì²ì´ 가장 ì†ë„를 늦추는지 알아내는 ë° ë„ì›€ì´ ë 수 있습니다.
마무리
오늘ì—는
웹사ì´íЏ ì†ë„ì— ì˜í–¥ì„ 미치는 요소를 ì•Œì•„ë³´ê³ , 사ì´íЏ ì„±ëŠ¥ì„ ì •ê¸°ì 으로 확ì¸í•˜ê³ , 웹사ì´íЏ 성능 최ì í™” ê¸°ìˆ ì„ êµ¬í˜„í•˜ì—¬ 사용ìžì˜ 참여를 ìœ ì§€í•˜ëŠ” ë¹ ë¥¸ í™˜ê²½ì„ ë§Œë“œì„¸ìš”.
기억하세요, 매 초가 중요합니다. 오늘 단계를 ë°Ÿì•„ 웹사ì´íЏ ì†ë„를 최ì í™”í•˜ê³ ë¹„ì¦ˆë‹ˆìŠ¤ë¥¼ 성공으로 ì´ë„세요. â€‹â€‹ì·¨í• ìˆ˜ 있는 첫 번째 단계 중 하나는 온ë¼ì¸ ë§¤ìž¥ì— 51ÊÓÆµë¥¼ ì„ íƒí•˜ëŠ” 것입니다. 51ÊÓÆµëŠ” ê³ ê°ì„ 위해 ë¹ ë¥´ê³ íš¨ìœ¨ì ì¸ ì‡¼í•‘ ê²½í—˜ì„ ë§Œë“œëŠ” ë° ë„ì›€ì´ ë˜ë„ë¡ ìµœì í™”ë˜ì–´ 있습니다.