Tumblr 포트폴리오는 매우 느립니다
우선 저는 개발자가 아닙니다. 이해가되도록 최선을 다하겠습니다.
텀블러 플랫폼을 사용하여 포트폴리오를 만들었습니다. 그것이 가장 위대한 팔트 폼일 수도 아닐 수도 있지만, 저는이 방식을 좋아하고 유지하고 싶습니다. 업데이트하기 쉽기 때문입니다.
1 ~ 2 개월 이후로 내 페이지가 매우 느리게로드되기 때문에 지금 어려움을 겪고 있습니다. 5 ~ 30 초 정도 걸릴 수 있습니다! 속도에 영향을 미칠 수있는 Youtube 동영상을 표시하고 있지만 페이지 로딩이 완료 되기 전에 동영상이 재생 (소리를들을 수 있음) 하기 때문에 최적화 문제가 있다고 생각합니다. 좋은 기능보다 성가신 것)
직접 확인할 수 있습니다. https://greatorex.fr
파이어 폭스에서 인스펙터를 사용하여로드 할 때 무슨 일이 일어나는지 확인했습니다. 몇 가지 오류가 있지만 어떻게 해석해야할지 모르겠습니다.
La ressource à l’adresse « https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)
로드하는 동안 Firefox의 왼쪽 하단에서이 리소스에 오래 머무르는 것을 볼 수 있습니다. 사용 된 글꼴을 변경했지만이 단계에는 영향을주지 않습니다.
Content Security Policy: Les paramètres de la page ont empêché le chargement d’une ressource à inline (« script-src »). Un rapport CSP est en cours d’envoi.
(프랑스 인에게는 미안합니다. 번역 할 수 없습니다.)
템플릿의 소스 코드에서 약간의 편집을 수행했지만 HTML 및 CSS 수정 (아주 약간) 만 수행했기 때문에 이것이 페이지로드에 영향을 미치는 이유를 잘 모르겠습니다.
귀하의 의견에 감사드립니다. 매우 감사하겠습니다.
좋은 하루 되세요.
답변
파이어 폭스에서 인스펙터를 사용하여로드 할 때 무슨 일이 일어나는지 확인했습니다. 몇 가지 오류가 있지만 어떻게 해석해야할지 모르겠습니다.
La ressource à l' adresse« https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic »a été bloquée en raison d' un type MIME («text / html») invalid (X-Content-Type-Options : nosniff)
콘텐츠 보안 정책 : Les paramètres de la page ont empêché le chargement d' une ressource à inline («script-src»). Unrapport CSP est en cours d' envoi.
위의 오류를 완전히 무시할 수 있습니다. 이는로드 페이지 속도에 영향을주지 않습니다.
- 콘텐츠 보안 정책은 텀블러 플랫폼에서보고 전용 모드로 게시하므로 아무것도하지 않습니다.
- fonts.googleapis.com (X-Content-Type-Options : nosniff) 오류가 여기 에 공통적으로 설명되어 있습니다 . 어쨌든 Google의 글꼴 서버를 방해 할 수 없으며 글꼴이 있는지 확인하십시오.
언뜻보기에 애니메이션 GIF 이미지 (GIFV from https://64.media.tumblr.com/....gifv) 또는 이와 유사한 내용은 Google의 테스트를 참조하십시오 . 를 사용할 때 <img src='animated.GIF'>브라우저는 이러한 모든 이미지를 완전히로드 할 때까지 페이지를 표시하지 않습니다.
이러한 애니메이션을 비디오 형식으로 변환하고 대신 태그를 사용하는 것이 좋습니다 <img>.
<video>태그는 동영상의 나머지 부분이로드되는 동안 콘텐츠를 한 번에 표시하기 시작했습니다.
로드 속도를 늦추는 요소를 확인하여 타사 서비스를 사용할 수 있는지 확인한 다음 최적화 방법과 대상을 결정할 수 있습니다.
https://developers.google.com/speed/pagespeed/insights/ -이 서비스는 컴퓨터 및 모바일 장치에서 페이지를로드하는 속도를 측정 할뿐만 아니라 사이트 속도를 높이기위한 자세한 권장 사항을 제공하여 약점을 지적합니다.
https://www.pingdom.com/ -강력한 도구, 유료이지만 14 일 동안 평가판이 있습니다.
https://developers.google.com/web/tools/chrome-devtools#network 과 https://developers.google.com/web/tools/chrome-devtools#performance(이미 Firefox 개발자 콘솔에 익숙하기 때문에 Google의 콘솔에 오신 것을 환영합니다)-Google Chrome 브라우저에서 바로 다운로드 속도를 빠르게 측정 할 수 있습니다. F12 키를 누르고 네트워크 탭으로 이동하여 페이지를 새로 고칩니다.
https://www.dareboost.com/fr -많은 매개 변수를 분석하고 실용적인 권장 사항을 제공
https://tools.keycdn.com/speed -페이지로드 중 발생한 요청 수와 각 요청의 크기를 보여줍니다.
https://performance.sucuri.net/-테스트는 웹 사이트 또는 한 페이지에 연결하는 데 걸리는 시간을 측정합니다. 중요한 것은 페이지를 시작하기 위해 콘텐츠가 브라우저로 전송되는 데 걸린 시간에 대한 정보를 제공하는 "첫 바이트까지의 시간"입니다.
https://www.site24x7.com/ -쿼리 별 콘텐츠 분류 및 크기별 콘텐츠 분류와 함께 차트 요약을 표시합니다.
페이지의 접근성을 확인하는 추가 도구 :
https://gtmetrix.com/ -서버 지역을 선택하여 지구의 다른 지역에서 페이지로드 속도를 확인할 수 있습니다.
https://www.dotcom-tools.com/website-speed-test.aspx -전 세계 25 곳의 실제 브라우저에서 웹 사이트 속도를 확인합니다.
https://www.webpagetest.org/ -페이지를 두 번로드하여 캐싱을 테스트 할 수 있습니다.