웹사이트 성능보고 점수 F받았네;;

CSS/HTML으로만 구성된 정적웹사이트를 구성했다!!드디어 !!!

 

netlify로 배포하고 휴대폰으로 테스트해보는데

 

와... 느려도 이렇게 느려터질 수가 있나...세상에

 

너무 어이없어서 이 사이트에서 속도 테스트를 해봤다.

 

https://gtmetrix.com/

 

근데 F;;놀랍지도 않다.

 

내가 살면서 이렇게 오래걸리는 웹사이트는 처음봤다. 참나

 

베트남가서 인터넷했을때도 이렇게 느리진 않았다.. 아이고

 

 

 

웹사이트에 이미지를..다 고화질로 넣고싶은 욕심때문에 너무 무리했나보다.

 

빨리 이미지파일 손봐야지 흑흑

 

 

https://tinypng.com/

TinyPNG – Compress WebP, PNG and JPEG images intelligently

이 사이트를 이용하는데

 

이미지 한 개가 5MB가 넘어서 도저히..저 사이트에선 해결이 안됐따

 

그래서 여기로 갔다

https://www.iloveimg.com/ko

iLoveIMG | 쉽고 빠른 온라인 무료 이미지 편집 툴

 

저기에서 최대한 줄이고

 

또 줄이고...줄이고 줄이고 줄이고 줄여서....

 

겨우 !!! 겨우!!!!!!!! 받아냈다 

 

 

 

야호!

 

아 참

 

https://blog.outsider.ne.kr/223

제발 a href='#' 좀 쓰지 말자.... :: Outsider's Dev Story

짧게 요약한 이유 : 

나 처럼 href에 

#

이거만 덜렁 두는게 아니라

 

<a href="#title">제목으로 이동</a>
........중간내용.............
<h3 id="title">제목</h3>

//코드는  출처 위의 블로그

 

이렇게 하여 페이지 이동을하면 바로 상단으로올라가는 것이 아니라

해당 id로 이동하여 사용자들이 스크롤로 다시 내려와야 할 필요가 없기 때문!

 

 

https://rgy0409.tistory.com/2884

HTML 이미지에 ALT 태그 속성값을 반드시 넣어줘야 하는 이유

이 게시글도 많이 도움이 됐다..

 

코드 짤 때 부터 알아둘껄 뒤늦게 봐서 부랴부랴 수정했다. 

기억하자 

 

alt 태그 속성값과 href에 anchor(앵커) 기능 사용하기!!