• 목록
  • 아래로
  • 위로
  • 12
  • Hanam09
  • 조회 수 358

팀원들이 WIX로 홈페이지 하나 만들겠다고 해서 만들었는데  엄청 느리고 최적화가 답이없어서 제가 다시 밑바닥부터 만들었습니다


제 최초로 팀원들을 위해  NProgress 라이브러리 하나 사용하고 스크립트,CSS,HTML,PHP 짜네서 올리고

테스트하니 저런결과 나오네요. ㄸ


최적화하나를 위해서 코드를 진짜 쥐어  짰는데, 와... 이런결과가 나오다니  감동입니다.


HTML은 최대한 가독성있게 짜올리고 JS부분에서는 PJAX를 이용하여 극적인 속도 향상을, PHP부분에서는 AJAX로 요청하는지 판단하여 AJAX일경우 본문만,

아닐경우 본문을 포함한 HTML소스코드 전체를 반환합니다. 또한 브라우져가 크로미움 기반일때는 이미지 파일은 webp형식으로 보내어 용량을 절감하고 속도를 향상시킵니다. 아닐경우 첫 요청때 png 파일형식으로 보내고 webp지원여부를 JS로 다시 확인하여  쿠키로 지원여부를 저장해서 다음연결부터 webp로 보내집니다. .htaccess부분에서는 캐시를 담당(폰트 이미지 파일 캐싱)합니다. CSS는 로컬에 폰트가 있는지 확인하고 없으면 서버에서 내려받아 사용합니다.

 

이런점수를 받아 기분이 좋았습니다.

포함 1명이 추천

추천인 1

작성자
Hanam09 36 Lv. (50%) 106610/109520EXP

 

안녕!

 

댓글 12

joyfuI
+1

온갖 최적화 기법을 사용하셨군요..ㄷㄷ

comment menu
2019.07.18. 09:45

신고

"joyfuI님의 댓글"

이 댓글을 신고 하시겠습니까?

제르엘
profile image

 

 

제 사이트는 모바일 12점 데스크톱 53점 나오네요...

comment menu
2019.07.18. 11:12

신고

"제르엘님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → 제르엘
profile image

wix하고 맞먹네요..

wix로 할때는 모바일 17 17점 데스크톱 51점 나왔습니다.

comment menu
2019.07.18. 11:56

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → Hanam09
profile image

그리고 제르님 사이트를 다시한번 측정해보니 이미지 파일 형식만 바꿔도 8초가량 더 빠른 로드를 기대할 수 있습니다

https://wordpress.org/plugins/search/convert+webp/

이 플러그인을 참고하세요!

comment menu
2019.07.18. 11:59

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

제르엘 → Hanam09
profile image

오, 그렇다면 나중에 WebP 형식을 시범 적용해봐야겠네요.

comment menu
2019.07.18. 13:05

신고

"제르엘님의 댓글"

이 댓글을 신고 하시겠습니까?

신고

"BVC_Liper_Okbul님의 댓글"

이 댓글을 신고 하시겠습니까?

MySQL
profile image

대단하네요

comment menu
2019.07.19. 18:21

신고

"MySQL님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → MySQL
profile image

감사합니다!

comment menu
2019.07.19. 18:26

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 크롬NUBE
profile image

진짜 대박이네요 bb

comment menu
2019.07.21. 00:29

신고

"NUBE님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리
profile image

오오~ 축하드립니다!

저같은 사람은 흉내도 내지 못할 점수인데 정말 ㅎㄷㄷ 하네요! ^^

아미나 자체 캐쉬 사용하고 이미지 많지 않고 다른 부분은 건드리지 않은 아미나로 제작한 사이트가 40점대 나왔던 것으로 기억하는데요.

 

SEO도 100점 받으셨는데 혹시 SEO 최적화를 위하여 prerendering 같은 것도 함께 사용하시는지 여쭤봐도 될까요??

구글봇은 서버 렌더링이 필요없다는 얘기도 있던데 PJAX 사용해보시니 정말 그런가요??

저도 조만간에 낮은 스펙의 VPS로 억지로 커뮤니티 하나를 짜내야 되는데 벌써부터 골치부터 아프네요 ㅠㅠ

태풍이 소멸했다고 하던데 그래도 비 조심하세요~!

comment menu
2019.08.07. 02:01

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → 이니스프리
profile image

일단 구글은 Ajax만으로 이루어진 SPA페이지도 읽어들일 수 있습니다.

아마 Python 의 Selenium같은걸로 크롤링 하나 봅니다.

 

저같은 경우는 미리랜더링 시스템은 이용하지 않았습니다.

 

하지만 서버쪽 랜더링은 부분적으로 사용했습니다.

 

Ajax로 요청하면 PHP에서 Ajax인것을 판단하여 본문만 반환하고,

Ajax없이 직접 링크타고 들어가면 페이지 HTML전체를 반환합니다.

 

일반적으론 SPA페이지에 접속했을때,

서버쪽 랜더링으로 기본 Page 골격구조와 Ajax가공방식 Script파일 받아오고 또다시 그 페이지의 본문을 받기위하여 1번의 Ajax요청을 해야합니다. 이런 경우 일부 검색엔진에대해 SEO점수가 낮아질 수 있고 또 HTTP요청이 한번 더 발생하기 때문에 저는 Ajax구별해서 응답하도록 했습니다.

 

이 경우 SEO, 속도, 데이터소비량을 모두 잡을 수 있기때문이죠.

comment menu
2019.08.07. 17:48

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 → Hanam09
profile image
+1

옙 상세히 답변해주셔서 번번이 감사합니다!

서버 쪽 렌더링을 하는 것보다 Ajax 구별하여 응답하는 것이 SEO 측면에서나 효율성 측면에서나 장점이 있군요!

 

그나저나 역시 구글봇은 똑똑하네요~

Lynx처럼 자바스크립트는 지원하지만 이미지나 멀티미디어 파일은 열 수 없는 브라우저와 유사하겠네요 ㅋㅋ

말씀하신대로 구현을 하면 네이버나 다음봇을 비롯한 다른 봇들도 문제가 없겠네요 ^^

 

제가 그동안은 너무나 당연히 Ajax가 정상적으로 작동하는 것을 전제로 코드를 작성해왔고

if (window.XMLHttpRequest) ~ else로 브라우저 또는 봇이 Ajax를 지원하는지 여부를 확인해본 것이 전부인 수준이라서

좀 더 공부를 해서 설명해주신 방법대로 구현해보겠습니다~

 

그럼 굿밤되세요 :)

다시 한 번 감사드립니다!

comment menu
2019.08.07. 23:03

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 마스터 24.02.11.17:21 367
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 4056
공지 낚시성 불법도박 홍보 게시글을 주의하세요. 9 image 네모 네모 22.08.09.18:13 458
공지 슬기로운 포인트 벌이를 하는 법 (22.10.11 업데이트) 64 네모 네모 18.06.17.20:25 15359
6327 내년에도 연초부터 백수각입니다. 6 국내산라이츄 국내산라이츄 22.12.19.00:26 294
6326 이야기네트워크의 부활? 5 image YJSoft YJSoft 22.12.13.15:54 1109
6325 대한민국이 16진출 이 어려운걸 또 해냈습니다 ㅋㅋ 2 랩퍼투혼 랩퍼투혼 22.12.03.10:12 2009
6324 와... 정말 대단합니다... image 제르엘 제르엘 22.12.03.02:46 1923
6323 탕진 1 image 대전댁 title: 은메달대전댁 22.11.30.09:46 1883
6322 적금 ~ 9 image 대전댁 title: 은메달대전댁 22.11.29.21:49 1150
6321 스터디포어스 비밀주소 ㅋㅋ 5 랩퍼투혼 랩퍼투혼 22.11.29.20:30 169
6320 월드컵때문에 주위가 시끌시끌하네요 5 하이빅스비 하이빅스비 22.11.28.22:30 81
6319 트래픽 2 image 대전댁 title: 은메달대전댁 22.11.28.22:30 66
6318 월드컵 기념 포인트 배팅 같은거 있으면 어떨까요? ㅎㅎ 5 image 그라페인 22.11.28.20:14 77
6317 근-황 5 image 국내산라이츄 국내산라이츄 22.11.28.00:41 81
6316 아이콘을 구매해보세요~~ 저처럼 보여용 3천냥 ㅋ 5 image 랩퍼투혼 랩퍼투혼 22.11.17.10:47 1150
6315 스티커를 사용하지못하는 슬픔 image 랩퍼투혼 랩퍼투혼 22.11.17.10:41 1084
6314 url 파싱이 잘되는 사이트가 최고!! ㅋ 사클된다!// 야다 - 이미슬픈사랑 1 랩퍼투혼 랩퍼투혼 22.11.17.10:22 1108
6313 국밥가격 ㄷㄷㄷ 8 그라페인 22.11.15.00:05 1192
6312 근(별)황 6 image 국내산라이츄 국내산라이츄 22.11.13.23:44 657
6311 굿노트 할인을 놓쳤네요 3 하이빅스비 하이빅스비 22.11.13.18:44 629
6310 벌써 여기온지 2년이나 되었군요 2 image 출사로 출사로 22.11.13.07:03 639
6309 여기는 리젠률이 얼마나 되나요? 2 anos 22.11.12.20:56 285
6308 질렀습니다. 4 anos 22.11.12.20:42 448