优化第三方小部件的交付 - TripAdvisor

Question

我正在开发一个网站，该网站使用小部件显示来自 TripAdvisor 网站的评论等。然而，根据谷歌的页面速度分析，它们正在损害我网站的性能。具体来说，CSS 和 JavaScript 都没有被缩小，图像也没有被优化。在这种情况下（据我所知）不能使用诸如CSSNano 之类的构建工具，因为它们来自第三方。通常，根据我的经验，当从 CDN 或类似文件加载第三方脚本时，可以使用缩小版本，但我不认为在这种情况下会出现这种情况。我查看了服务器的 Google's Page Speed Module，但我有 IIS，我不确定它是否会起作用（因为脚本是从 TripAdvisor 提取的，而不是托管在我的服务器上）。

作为参考，小部件呈现如下：

    <!-- TripAdvisor sidebar -->

<div class="col-md-3 hidden-sm hidden-xs"><div id="TA_selfserveprop522" class="TA_selfserveprop"><div id="CDSWIDSSP" class="widSSP widSSPnarrow" style="width: 240px;"> <div class="widSSPData"> <div class="widSSPBranding"> <dl> <dt> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"></a> </dt> <dt class="widSSPTagline">Know better. Book better. Go better.</dt> </dl> </div><!--/ cdsBranding--> <div class="widSSPComponent"> <div class="widSSPSummary"> <dl> <a target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink(11900,this);return true;" rel="nofollow"> <dt class="widSSPH18">Hampton Inn &amp; Suites St. Louis/South I-55</dt> </a> </dl> </div><!--/ cdsSummary--> </div><!--/ cdsComponent--> <div class="widSSPComponent widSSPOptional"> <div class="widSSPTrvlRtng"> <dl> <dt class="widSSPH11">TripAdvisor Traveler Rating</dt> <dd> <div class="widSSPOverall"> <span class="ui_bubble_rating bubble_50"></span> <div>Based on <b>1,291</b> traveler reviews</div> </div><!--/ overall --> </dd> </dl> </div> </div><!--/ cdsComponent --> <div class="widSSPWrap widSSPOptional"> <div class="widSSPInformation"> <div class="widSSPWrap"> <div class="widSSPPopIdx widSSPSingle"> <b>TripAdvisor Ranking</b> <span class="widSSPPopIdxData"> <span class="widSSPPopIdxData widSSPPopIdxNumbers"> <sup>#</sup>1 of 2 </span> hotels in Mehlville </span> </div><!--/ popIdx--> </div><!--/ cdsWrap--> </div><!--/ cdsInformation--> </div><!--/ cdsWrap--> <div class="widSSPComponent widSSPOptional"> <dl class="widSSPReviews"> <dt class="widSSPH11">Most Recent Traveler Reviews</dt> <dd class="widSSPOneReview"> <ul class="widSSPBullet"> <li> <span class="widSSPDate">Jun 28, 2017:</span> <span class="widSSPQuote">“Hampton Inn &amp; Suites was GREAT!!!!”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“We Are Family!”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“A Great Experience in a Time of...”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“St Louis attractions trip”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“Too Pricey, Not So Nicey”</span> </li> </ul><!--/ bullet--> </dd><!--/ hReview--> </dl> </div> <div class="widSSPAll"> <ul class="widSSPReadReview"> <li><a href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" id="allreviews" onclick="ta.cds.handleTALink(11900,this);window.open(this.href, 'newTAWindow', 'toolbar=1,resizable=1,menubar=1,location=1,status=1,scrollbars=1,width=800,height=600'); return false" rel="nofollow">Read reviews</a></li> </ul> <ul class="widSSPWriteReview"> <li><a href="https://www.tripadvisor.com/UserReview-g2271346-d1845701-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" id="writereview" onclick="ta.cds.handleTALink(11900,this);window.open(this.href, 'newTAWindow', 'toolbar=1,resizable=1,menubar=1,location=1,status=1,scrollbars=1,width=800,height=600'); return false" rel="nofollow">Write a review</a></li> </ul> </div><!--/ cdsAll--> <div class="widSSPLegal">© 2017 TripAdvisor LLC</div><!--/ cdsLegal--> </div><!--/ cdsData--> </div><!--/ CDSPOP.cdsBx--> <img id="ta_tracking_selfserveprop_google" style="height:1px;width:1px;border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020463497/?value=0&amp;guid=ON&amp;script=0&amp;data=POS%3Den_US%3Bmobile%3DN%3Bhrental_id%3D1845701%3BPropId%3D1845701%3Btravel_destid%3D2271346%3Bservlet%3DWidget%3Bwidget_name%3Dselfserveprop"><img id="ta_tracking_selfserveprop_criteo" style="height:1px;width:1px;border-style:none;" src="//widget.criteo.com/event?a=an%3Dweb-widget-tripadvisor.com%26cn%3Dus%26ln%3Den&amp;v=4.1.0&amp;p0=e%3Dce%26widget_type%3Dselfserveprop&amp;p1=e%3Dexd%26site_type%3Dd&amp;p2=e%3Dvp%26p%3D1845701&amp;p3=e%3Ddis%26a%3D%255Ban%25253Dweb-widget-tripadvisor.com%252526cn%25253Dus%252526ln%25253Den%255D&amp;rt=gif"></div><script src="https://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=522&amp;locationId=1845701&amp;lang=en_US&amp;rating=true&amp;nreviews=5&amp;writereviewlink=true&amp;popIdx=true&amp;iswide=false&amp;border=false&amp;display_version=2"></script><script src="https://www.tripadvisor.com/WidgetEmbed-selfserveprop?border=false&amp;popIdx=true&amp;iswide=false&amp;locationId=1845701&amp;display_version=2&amp;uniq=522&amp;rating=true&amp;lang=en_US&amp;nreviews=5&amp;writereviewlink=true"></script></div>
<div class="col-sm-12  visible-sm visible-xs hidden-lg hidden-md"><div id="TA_cdsratingsonlywide284" class="TA_cdsratingsonlywide"><div id="CDSRATINGWIDGET284" class="cdsROW white  shadow   border   wide " style="width: 1px;"> <div id="CDSROWCONTAINER284" class="cdsROWContainer" style="width: auto;"> <!--[if lte IE 7]>       <table border="0" cellspacing="0">         <tr>           <td>    <div id="CDSROWLOGO284" class="cdsComponent logo">                                            <a target="_blank" href="https://www.tripadvisor.com/"><img  src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>   </div> </td>           <td>  <div id="CDSROWLOC284" class="cdsComponent cdsLocName">     <a id="CDSLOCINNER" target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Hampton Inn & Suites St. Louis/South I-55</a>   </div> </td>           <td>  <div id="CDSROWRATING284" class="cdsComponent cdsRating">     <span class="ui_bubble_rating bubble_50"></span>         <span>       1,291 Reviews     </span>   </div> </td>         </tr>       </table>       <![endif]--> <!--[if gte IE 8]><!--> <div id="CDSROWLOGO284" class="cdsComponent logo"> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"></a> </div> <div id="CDSROWLOC284" class="cdsComponent cdsLocName" style="max-width: 1px;"> <a id="CDSLOCINNER" target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;" rel="nofollow">Hampton Inn &amp; Suites St. Louis/South I-55</a> </div> <div id="CDSROWRATING284" class="cdsComponent cdsRating"> <span class="ui_bubble_rating bubble_50"></span> <span> 1,291 Reviews </span> </div> <!--<![endif]--> </div> </div>  <img id="ta_tracking_cdsratingsonlywide_google" style="height:1px;width:1px;border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020463497/?value=0&amp;guid=ON&amp;script=0&amp;data=POS%3Den_US%3Bmobile%3DN%3Bhrental_id%3D1845701%3BPropId%3D1845701%3Btravel_destid%3D2271346%3Bservlet%3DWidget%3Bwidget_name%3Dcdsratingsonlywide"><img id="ta_tracking_cdsratingsonlywide_criteo" style="height:1px;width:1px;border-style:none;" src="//widget.criteo.com/event?a=an%3Dweb-widget-tripadvisor.com%26cn%3Dus%26ln%3Den&amp;v=4.1.0&amp;p0=e%3Dce%26widget_type%3Dcdsratingsonlywide&amp;p1=e%3Dexd%26site_type%3Dd&amp;p2=e%3Dvp%26p%3D1845701&amp;p3=e%3Ddis%26a%3D%255Ban%25253Dweb-widget-tripadvisor.com%252526cn%25253Dus%252526ln%25253Den%255D&amp;rt=gif"></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlywide&amp;uniq=284&amp;locationId=1845701&amp;lang=en_US&amp;border=true&amp;shadow=true&amp;display_version=2"></script><script src="https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlywide?border=true&amp;shadow=true&amp;locationId=1845701&amp;display_version=2&amp;uniq=284&amp;lang=en_US"></script></div>


</div>

我开始认为优化小部件是不可能的。但是，它们似乎确实对网站造成了显着影响，所以我想看看是否有人对这些小部件或类似的东西有相关经验。

谢谢。

Answer 1

我现在正在处理这个问题。从站点中删除小部件会导致站点速度提高 60%。您无法以任何有意义的方式更改他们的小部件代码来改进它，因此最好定期截取其当前呈现的视图并将其裁剪为您放置在网站上的小 .png。无论如何，它是否为人们提供了如此多的信誉价值，这一点还不清楚。