- 12
- Hanam09
- 조회 수 358
팀원들이 WIX로 홈페이지 하나 만들겠다고 해서 만들었는데 엄청 느리고 최적화가 답이없어서 제가 다시 밑바닥부터 만들었습니다
제 최초로 팀원들을 위해 NProgress 라이브러리 하나 사용하고 스크립트,CSS,HTML,PHP 짜네서 올리고
테스트하니 저런결과 나오네요. ㄸ
최적화하나를 위해서 코드를 진짜 쥐어 짰는데, 와... 이런결과가 나오다니 감동입니다.
HTML은 최대한 가독성있게 짜올리고 JS부분에서는 PJAX를 이용하여 극적인 속도 향상을, PHP부분에서는 AJAX로 요청하는지 판단하여 AJAX일경우 본문만,
아닐경우 본문을 포함한 HTML소스코드 전체를 반환합니다. 또한 브라우져가 크로미움 기반일때는 이미지 파일은 webp형식으로 보내어 용량을 절감하고 속도를 향상시킵니다. 아닐경우 첫 요청때 png 파일형식으로 보내고 webp지원여부를 JS로 다시 확인하여 쿠키로 지원여부를 저장해서 다음연결부터 webp로 보내집니다. .htaccess부분에서는 캐시를 담당(폰트 이미지 파일 캐싱)합니다. CSS는 로컬에 폰트가 있는지 확인하고 없으면 서버에서 내려받아 사용합니다.
이런점수를 받아 기분이 좋았습니다.
추천인 1
작성자
댓글 12
신고
"joyfuI님의 댓글"
이 댓글을 신고 하시겠습니까?
제 사이트는 모바일 12점 데스크톱 53점 나오네요...
신고
"제르엘님의 댓글"
이 댓글을 신고 하시겠습니까?
wix하고 맞먹네요..
wix로 할때는 모바일 17 17점 데스크톱 51점 나왔습니다.
신고
"Hanam09님의 댓글"
이 댓글을 신고 하시겠습니까?
그리고 제르님 사이트를 다시한번 측정해보니 이미지 파일 형식만 바꿔도 8초가량 더 빠른 로드를 기대할 수 있습니다
https://wordpress.org/plugins/search/convert+webp/
이 플러그인을 참고하세요!
신고
"Hanam09님의 댓글"
이 댓글을 신고 하시겠습니까?
오, 그렇다면 나중에 WebP 형식을 시범 적용해봐야겠네요.
신고
"제르엘님의 댓글"
이 댓글을 신고 하시겠습니까?
오오 최적화...!
신고
"BVC_Liper_Okbul님의 댓글"
이 댓글을 신고 하시겠습니까?
대단하네요
신고
"MySQL님의 댓글"
이 댓글을 신고 하시겠습니까?
감사합니다!
신고
"Hanam09님의 댓글"
이 댓글을 신고 하시겠습니까?
NUBE 
진짜 대박이네요 bb
신고
"NUBE님의 댓글"
이 댓글을 신고 하시겠습니까?
오오~ 축하드립니다!
저같은 사람은 흉내도 내지 못할 점수인데 정말 ㅎㄷㄷ 하네요! ^^
아미나 자체 캐쉬 사용하고 이미지 많지 않고 다른 부분은 건드리지 않은 아미나로 제작한 사이트가 40점대 나왔던 것으로 기억하는데요.
SEO도 100점 받으셨는데 혹시 SEO 최적화를 위하여 prerendering 같은 것도 함께 사용하시는지 여쭤봐도 될까요??
구글봇은 서버 렌더링이 필요없다는 얘기도 있던데 PJAX 사용해보시니 정말 그런가요??
저도 조만간에 낮은 스펙의 VPS로 억지로 커뮤니티 하나를 짜내야 되는데 벌써부터 골치부터 아프네요 ㅠㅠ
태풍이 소멸했다고 하던데 그래도 비 조심하세요~!
신고
"이니스프리님의 댓글"
이 댓글을 신고 하시겠습니까?
일단 구글은 Ajax만으로 이루어진 SPA페이지도 읽어들일 수 있습니다.
아마 Python 의 Selenium같은걸로 크롤링 하나 봅니다.
저같은 경우는 미리랜더링 시스템은 이용하지 않았습니다.
하지만 서버쪽 랜더링은 부분적으로 사용했습니다.
Ajax로 요청하면 PHP에서 Ajax인것을 판단하여 본문만 반환하고,
Ajax없이 직접 링크타고 들어가면 페이지 HTML전체를 반환합니다.
일반적으론 SPA페이지에 접속했을때,
서버쪽 랜더링으로 기본 Page 골격구조와 Ajax가공방식 Script파일 받아오고 또다시 그 페이지의 본문을 받기위하여 1번의 Ajax요청을 해야합니다. 이런 경우 일부 검색엔진에대해 SEO점수가 낮아질 수 있고 또 HTTP요청이 한번 더 발생하기 때문에 저는 Ajax구별해서 응답하도록 했습니다.
이 경우 SEO, 속도, 데이터소비량을 모두 잡을 수 있기때문이죠.
신고
"Hanam09님의 댓글"
이 댓글을 신고 하시겠습니까?
옙 상세히 답변해주셔서 번번이 감사합니다!
서버 쪽 렌더링을 하는 것보다 Ajax 구별하여 응답하는 것이 SEO 측면에서나 효율성 측면에서나 장점이 있군요!
그나저나 역시 구글봇은 똑똑하네요~
Lynx처럼 자바스크립트는 지원하지만 이미지나 멀티미디어 파일은 열 수 없는 브라우저와 유사하겠네요 ㅋㅋ
말씀하신대로 구현을 하면 네이버나 다음봇을 비롯한 다른 봇들도 문제가 없겠네요 ^^
제가 그동안은 너무나 당연히 Ajax가 정상적으로 작동하는 것을 전제로 코드를 작성해왔고
if (window.XMLHttpRequest) ~ else로 브라우저 또는 봇이 Ajax를 지원하는지 여부를 확인해본 것이 전부인 수준이라서
좀 더 공부를 해서 설명해주신 방법대로 구현해보겠습니다~
그럼 굿밤되세요 :)
다시 한 번 감사드립니다!
신고
"이니스프리님의 댓글"
이 댓글을 신고 하시겠습니까?
도다
에듀
하루살이
온갖 최적화 기법을 사용하셨군요..ㄷㄷ