불필요한 파일 로드를 중지하고 웹사이트의 HTTP 요청을 줄이는 방법 – WordPress 최적화 팁
게시 됨: 2020-09-08
Crunchify에서는 언제든지 참조할 수 있도록 여러 속도 최적화 자습서를 게시했습니다.
MaxCDN을 콘텐츠 제공자로 사용합니다. 거의 4년이 흘렀고 지금까지 너무 잘 작동하고 있습니다. Genesis WordPress Framework와 MaxCDN은 최고의 조합입니다. 기본적으로 Genesis Framework에는 많은 최적화, Google 마크업 스키마, 모바일 친화적인 구조 등이 있습니다.
지난 주에 MaxCDN 계정을 보고 있었는데 갑자기 상위 다운로드 리소스를 발견했습니다. 위의 이미지에서 볼 수 있듯이 지난 주에 top 9 out of 10 resource files 는 ~ 5 millions 번 이상 다운로드되었습니다.
나는 놀랐고 그 자원이 정말 필요하다고 생각했습니다. 해당 파일을 별도로 로드해야 합니까? 사이트 로드에 절대적으로 필요한 style.css 파일을 제외하고 필요하지 않은 경우 해당 파일을 제거하는 방법.
간단한 트릭으로 9개의 파일을 모두 제거하는 방법을 시작하겠습니다.
모든 독자를 위한 것은 아닙니다.
이 단계는 모든 WordPress 독자를 위한 것은 아닙니다. Crunchify에서는 Crayon Syntax Highlighter 및 사용자 정의 테마별 이미지를 사용하므로 제한된 사용자에게만 적용됩니다.
1 단계
list all of those 9 files 보겠습니다. 두 번째 열은 다운로드 횟수를 보여줍니다.
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
2 단계
Crayon Syntax Highlighter Plugin 파일을 함께 그룹화합시다.
3개의 파일이 있습니다:
neon.css , crayon.min.css 및 crayon.min.js . 해당 파일을 제거하기 위한 총 7개의 세부 단계가 포함된 완전한 별도의 자습서를 작성했습니다. 친절하게 살펴보고 문제가 있으면 알려주세요.
3단계
이제 wp-embed-min.js . WordPress 4.4+에서 자동 포함 스크립트를 비활성화하는 방법 자습서를 방문하십시오. 프런트 엔드에서 포함 파일 로드를 중지합니다.
4단계
3 more .png 파일을 더 살펴보겠습니다.
bg-pattern.png
머리글과 바닥글 배경에서 이 이미지를 로드했습니다. 대신 색상 #333 을 사용하여 제거했습니다.
crunchify-sprite.png
사이드바에 소셜 팔로우 버튼을 표시하기 위해 이 스프라이트 이미지를 로드했습니다. fontawesome 폰트로 대체했습니다.
h3.png
일부 위치에 H3 게시물에 대한 체크 표시를 표시하기 위해 이것을 로드했습니다. fontawesome 폰트로 대체했습니다. 아래는 이에 상응하는 fontawesome입니다.
5단계
이제 2개의 파일만 남았습니다. crunchify-logo.png 및 bg.png , 유지하려고 생각했습니다. 그래서 이미지로 호출하는 대신 해당 파일에 해당하는 base64 이미지를 추가했습니다.
전에:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
후에:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
두 이미지를 모두 base64 이미지로 변환했습니다. 다른 연결을 열고 이미지에 대해 서버에 HTTP 요청을 할 필요가 없다는 이점이 있습니다.
더 적은 요청 = 더 나은 페이지 로드 시간
SVG (Scalable Vector Graphic) image 를 사용하면 이미지가 망막 디스플레이에서 멋지게 보이는 선명도(매우 작은 경우 제외)를 잃지 않고 모든 크기로 크기가 조정되므로 몇 가지 이점이 있습니다.
이러한 Data URIs 는 .png 또는 이미지에 국한되지 않고 모든 리소스에 사용됩니다. 다음은 온라인에서 사용한 간단한 .png에서 .svg로의 변환기 도구입니다.
요약
이 튜토리얼은 WordPress 속도를 높이고 성능을 높이는 방법 섹션의 일부입니다. 여기에서 모든 WordPress 최적화 트릭과 팁을 찾을 수 있습니다.
이 단계를 수행하여 10개 중 9개의 원하지 않는 리소스를 모두 제거했습니다. 즉, 각 페이지에 9개 적은 요청이 있으므로 내 페이지가 훨씬 빠르게 로드됩니다.
사이트 페이지 속도를 향상시킬 다른 팁이 있으면 알려주십시오. Crunchify에서 속도는 주요 기준이며 이것이 우리가 플러그인을 매우 적게 사용하는 이유입니다. 모든 페이지 within half a second 로드됩니다.
