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

时间:2017-07-06 13:45:17

标签: javascript widget tripadvisor

我正在开发一个网站,该网站使用小部件来显示来自TripAdvisor网站的评论等。但是,根据Google的Page Speed Analytics,他们正在损害我网站的性能。具体来说,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>

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

感谢。

1 个答案:

答案 0 :(得分:0)

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