Google지도 용 렌더링 차단 JavaScript를 제거하십시오
-
13-12-2019 - |
문제
PageSpeed Insights는 Google지도 JS의 렌더링 차단을 제거하는 것이 나에게 보여줍니다. CMS 콘텐츠가 추가되었으며 코드입니다.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myipcode">// <![CDATA[
// ]]></script>
<script type="text/javascript">// <![CDATA[
function initialize() {
var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
var mapOptions = {
zoom: 17,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Title'
});
}
.
google.maps.event.adddomlistener (창, '로드', 초기화); //]>
에 async="async"
를 추가하면 맵이로드되지 않지만 pageSpeed의 메시지가 켜집니다.내가 무엇을해야합니까?
해결책
다음을 시도하십시오
<div id="map"></div>
<script type="text/javascript">
function initializeMap() {
var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
var mapOptions = {
zoom: 17,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Title'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myipcode&callback=initializeMap"
async defer></script>
.
나머지 후에 외부 스크립트 태그를 배치하는 것이 중요하므로 콜백 할 것이 있습니다.또한, 비동기를 사용하면 콜백 메소드를 초기화 할 수 있도록 콜백 메소드를 추가해야합니다.
initialize
가 예쁜 일반적인 것처럼 메서드 이름으로 Advies를 조언하며 다른 곳에서 사용될 수 있습니다
제휴하지 않습니다 magento.stackexchange