@extends('frontend.master')

@section('title', $data_seo->seo_title)
@section('description', $data_seo->seo_description)
@section('keywords', $data_seo->keywords)
@if ($data_seo->seo_indexed == 0)
    @section('robots', 'noindex,nofollow')
@endif
@section('content')
    <style>
        h3 {
            font-size: 16px;
            font-style: italic;
        }
    </style>
    <div class="websiteTest main-content">
        <div id="websiteTest">
            <div class="row">
                <div class='col-12'>
                    @include(
                        'frontend.layouts.components.breadcrumb',
                        $breadcrumb = [0 => ['link' => '#', 'name' => 'Website test']]
                    )
                    <h1 class="text-center bold">Website test</h1>
                    <div class='all_step first_step first_step_title'>
                        <div class='website_title'>
                            {{ __('messages.enter_your_website_url_below') }}<br />{{ __('messages.analyze_page_speed') }}
                        </div>
                        <div class='website_title_note'>{{ __('messages.the_tool_indenties_performance') }}</div>
                    </div>
                    <div class='website_search'>
                        <div class="input-group">
                            <input type="text" class="form-control analyze_input_box"
                                placeholder="{{ __('messages.enter_your_url_address') }}" autocomplete="url" name='url'>
                            <div class="input-group-append">
                                <button class="btn website_search_btn analyze_btn">{{ __('messages.analyze') }}</button>
                            </div>
                        </div>
                        <div class='website_error text-center display_none'>{{ __('messages.something_went_wrong') }}</div>
                    </div>
					<div class="ads_ngang text-center" style="clear: both; padding-top: 10px; width: 100%;">
						@if (!App\Helpers\Helper::isMobileDev())
							<script type="text/javascript">
								atOptions = {
									'key': '9857892dec2b6de4e93dcc9c9d406a95',
									'format': 'iframe',
									'height': 90,
									'width': 728,
									'params': {}
								};
								document.write('<scr' +
									'ipt type="text/javascript" src="//www.topcreativeformat.com/9857892dec2b6de4e93dcc9c9d406a95/invoke.js"></scr' +
									'ipt>');
							</script>
						@else
							<script type="text/javascript">
								atOptions = {
									'key': 'dfceb917c52920d372f6cd3c67912061',
									'format': 'iframe',
									'height': 50,
									'width': 320,
									'params': {}
								};
								document.write('<scr' +
									'ipt type="text/javascript" src="//www.topcreativeformat.com/dfceb917c52920d372f6cd3c67912061/invoke.js"></scr' +
									'ipt>');
							</script>
						@endif
					</div>
                    <div>@include('frontend.layouts.ads.banner-1')</div>
                    <div class='all_step first_step'>
                        <div class='website_intro'>
                            <div class="row webiste_item">
                                <div class="col-lg-6">
                                    <div style="height:60px" class='d-none d-lg-block'></div>
                                    <h2 class='website_sub_title'>
                                        Check Website Test Performance Most Accurately
                                    </h2>
                                    <div class='website_sub_title_note'>
                                        MySpeed offers an installation-free, single-click service to check website test
                                        performance at a high level of accuracy.<br>
                                        Equipped with a suite of amazing features and options, our test analyzes your
                                        website performance on an elemental level to detect quality and loading time
                                        issues.<br>
                                        What’s more, you can also get recommendations on how to optimize your site for
                                        better performance.
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div style="height:30px" class='d-lg-none'></div>
                                    <div class='website_img'>
                                        <img class="lazy" src="/" data-src='/frontend/images/img1_webtest.svg'
                                            alt="img1_webtest" />
                                        <h3>Run website speed test</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row webiste_item">
                                <div class="col-lg-6">
                                    <div class='website_img'>
                                        <img class="lazy" src="/" data-src='/frontend/images/img2_webtest.svg'
                                            alt="img2_webtest" />
                                        <h3>Test performance of website</h3>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div style="height:30px" class='d-lg-none'></div>
                                    <div style="height:60px" class='d-none d-lg-block'></div>
                                    <h2 class='website_sub_title'>
                                        Track Your Loading Website Test Results Over Time
                                    </h2>
                                    <div class='website_sub_title_note'>
                                        We will test the loading speed of your site on a schedule and keep track of how it
                                        is doing.<br>
                                        The performance of your website may get worse than it should be due to a variety of
                                        factors, and it is best to be aware of this before it hurts the user experience of
                                        your website, leading to complaints from visitors and even revenue loss.<br>
                                        It’s worth noting that if your site takes more than 3-5 seconds to load, it might be
                                        considered not having the optimal performance.
                                    </div>
                                </div>
                            </div>
                            <div class="row webiste_item">
                                <div class="col-12">@include('frontend.layouts.ads.banner-2')</div>
                                <div class="col-lg-6">
                                    <div style="height:30px" class='d-lg-none'></div>
                                    <div style="height:60px" class='d-none d-lg-block'></div>
                                    <h2 class='website_sub_title'>
                                        Website performance monitoring tools
                                    </h2>
                                    <div class='website_sub_title_note'>
                                        A website includes many elements and each is needed to optimize for the website to
                                        work well. Thus keeping control over your web performance is not an easy job.
                                        Every day, the performance of these elements such as images, contents, SEO, etc
                                        should be consistent and kept at the best status.<br>
                                        MySpeed allows you to check website test performance any time, anywhere along with a
                                        summary of website test results.<br>
                                        Thanks to that, you can update changes in your website performance, identify
                                        problems, and then finding optimal ways to improve it.
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div style="height:30px" class='d-lg-none'></div>
                                    <div class='website_img'>
                                        <img class="lazy" src="/" data-src='/frontend/images/img3_webtest.svg'
                                            alt="img3_webtest" />
                                        <h3>Web performance measurement</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row webiste_item">
                                <div class="col-lg-6">
                                    <div class='website_img'>
                                        <img class="lazy" src="/" data-src='/frontend/images/img4_webtest.svg'
                                            alt="img4_webtest" />
                                        <h3>Check website on different devices</h3>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div style="height:30px" class='d-lg-none'></div>
                                    <div style="height:60px" class='d-none d-lg-block'></div>
                                    <h2 class='website_sub_title'>
                                        Website test on different devices
                                    </h2>
                                    <div class='website_sub_title_note'>
                                        MySpeed- website test allows users to conduct a website test performance on both
                                        Mobile and Desktop.<br>
                                        Users can reach MySpeed on a variety of different devices and screen resolutions.
                                        You just hop on to the website https://gospeedcheck.com/website-test and paste your
                                        website's link.<br>
                                        A detailed analysis report of your website will be shown clearly on the screen.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='all_step thirth_step display_none'>
                        <div class='website_switch_tab text-center'>
                            <span class='website_switch_tab_item website_switch_mobile' ref='mobile'><i
                                    class="fas fa-mobile-alt"></i>{{ __('messages.mobile') }}</span>
                            <span class='website_switch_tab_item website_switch_desktop' ref='desktop'><i
                                    class="fas fa-desktop"></i>{{ __('messages.desktop') }}</span>
                        </div>
                    </div>
                    <div class='all_step second_step thirth_step display_none'>
                        <div class="clearfix">@include('frontend.layouts.ads.banner-2')</div>
                        <div class='website_title'><b>{{ __('messages.lastest_performance_report_for') }}</b></div>
                        <div class='website_link'><big><a class='replace_url' ref='test_url' target='_blank'></a></big>
                        </div>
                    </div>
                    <div class='all_step second_step thirth_step display_none'>
                        <div class='website_process'>
                            <div class='row'>
                                <div class='col-lg-6'>
                                    <div class='website_process_first_col'>
                                        <div class='website_test_thumb_box'>
                                            <img width='100%' class='website_test_thumb'
                                                src='/frontend/images/working.gif'/ alt="working">
                                            <img height='220px' class='website_test_thumb_result' alt="working" />
                                        </div>
                                    </div>
                                </div>
                                <div class='col-lg-6'>
                                    <div class='all_step second_step website_process_second_col'>
                                        <div class='website_current_step'></div>
                                        <div class='website_step_image'>
                                            <img class='website_step_1' src='/frontend/images/step1_active.svg'
                                                alt="website_step_1">
                                            <img class='website_step_2' src='/frontend/images/step2_inactive.svg'
                                                alt="website_step_2">
                                            <img class='website_step_3' src='/frontend/images/step3_inactive.svg'
                                                alt="website_step_3">
                                            <img class='website_step_4' src='/frontend/images/step4_inactive.svg'
                                                alt="website_step_4">
                                            <img class='website_step_5' src='/frontend/images/step5_inactive.svg'
                                                alt="website_step_5">
                                        </div>
                                        <div class='progress_container display_none'>
                                            <div class="progress">
                                                <div class="progress-bar" role="progressbar" style="width: 0%;"
                                                    aria-valuemin="0" aria-valuemax="100"><span
                                                        class='progress_percent'>0%</span></div>
                                            </div>
                                            <div><a class='clickable website_cancel_btn'
                                                    onClick="cancelWebsiteTest()">{{ __('messages.cancel') }}</a></div>
                                        </div>
                                    </div>
                                    <div class='all_step thirth_step'>
                                        <div class='percent_circle_container'>
                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                style="display: none;">
                                                <symbol id="wave">
                                                    <path
                                                        d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z">
                                                    </path>
                                                    <path
                                                        d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z">
                                                    </path>
                                                    <path
                                                        d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z">
                                                    </path>
                                                    <path
                                                        d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z">
                                                    </path>
                                                </symbol>
                                            </svg>
                                            <div class='website_box_percent_inner_circle'>
                                                <div class="website_box_percent_inner">
                                                    <div class="percent">
                                                        <div class="percentNum" id="count">0</div>
                                                        <div class="percentB">%</div>
                                                    </div>
                                                    <div id="water" class="water">
                                                        <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
                                                            <use xlink:href="#wave"></use>
                                                        </svg>
                                                        <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
                                                            <use xlink:href="#wave"></use>
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class='website_average'>{{ __('messages.average') }} <a
                                                    href='https://developers.google.com/web/tools/lighthouse/v3/scoring'
                                                    target='_blank'><i class="fas fa-info-circle"
                                                        title='Lighthouse Scoring Guide'></i></a></div>
                                        </div>
                                        <div class='website_color_note'>
                                            <span
                                                class='website_color_circle website_color_red_circle'><span></span>0-49</span>
                                            <span
                                                class='website_color_circle website_color_yellow_circle'><span></span>50-89</span>
                                            <span
                                                class='website_color_circle website_color_green_circle'><span></span>90-100</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='all_step thirth_step display_none'>
                        <div class='website_switch_box'>
                            <div class='website_tab_list'>
                                <span class='website_tab_item website_tab_item_field_data'
                                    ref='field_data'>{{ __('messages.field_data') }}</span>
                                <span class='website_tab_item website_tab_item_origin_summary'
                                    ref='origin_summary'>{{ __('messages.origin_summary') }}</span>
                                <span class='website_tab_item website_tab_item_lab_data'
                                    ref='lab_data'>{{ __('messages.lab_data') }}</span>
                                <span class='website_tab_item website_tab_item_opportunities'
                                    ref='opportunities'>{{ __('messages.opportunities') }}</span>
                                <span class='website_tab_item website_tab_item_diagnostics'
                                    ref='diagnostics'>{{ __('messages.diagnostics') }}</span>
                                <span class='website_tab_item website_tab_item_pass_audit'
                                    ref='pass_audit'>{{ __('messages.pass_audit') }}</span>
                            </div>
                            <div class='website_tab_content website_tab_content_field_data'>
                                <div class='website_tab_content_note'>
                                    {{ __('messages.field_data_note_over_the_last_30_days') }}</div>
                                <div class='row'>
                                    <div class='col-lg-6'>
                                        <div class='website_tab_field_data_box w_box1'>
                                            <div class='website_tab_header'>
                                                <div class='float-left'>{{ __('messages.first_contentful_paint_fcp') }}
                                                </div>
                                                <div class='float-right w_time'>0 s</div>
                                                <div class='clearfix'></div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_green progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_green'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_fast') }} (&#60; 1s)
                                                </div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_yellow progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_yellow'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_moderate') }} (1s ~ 3s)
                                                </div>
                                            </div>
                                            <div class='custom_progress_box last_custom_progress_box'>
                                                <div class="custom_progress progress_red progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_red'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_slow') }} (&#62; 3s)
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-6'>
                                        <div class='website_tab_field_data_box w_box2'>
                                            <div class='website_tab_header'>
                                                <div class='float-left'>{{ __('messages.first_input_delay_fid') }}</div>
                                                <div class='float-right w_time'>0 s</div>
                                                <div class='clearfix'></div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_green progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_green'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_fast') }} (&#60; 100ms)
                                                </div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_yellow progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_yellow'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_moderate') }} (100ms ~
                                                    300ms)</div>
                                            </div>
                                            <div class='custom_progress_box last_custom_progress_box'>
                                                <div class="custom_progress progress_red progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_red'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_slow') }} (&#62; 300ms)
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='website_tab_content website_tab_content_origin_summary'>
                                <div class='website_tab_content_note'>
                                    {{ __('messages.origin_summary_note_all_pages_served_from_this_origin') }}</div>
                                <div class='row'>
                                    <div class='col-lg-6'>
                                        <div class='website_tab_field_data_box w_box1'>
                                            <div class='website_tab_header'>
                                                <div class='float-left'>{{ __('messages.first_contentful_paint_fcp') }}
                                                </div>
                                                <div class='float-right w_time'>0 s</div>
                                                <div class='clearfix'></div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_green progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_green'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_fast') }} (&#60; 1s)
                                                </div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_yellow progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_yellow'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_moderate') }} (1s ~ 3s)
                                                </div>
                                            </div>
                                            <div class='custom_progress_box last_custom_progress_box'>
                                                <div class="custom_progress progress_red progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_red'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_slow') }} (&#62; 3s)
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-6'>
                                        <div class='website_tab_field_data_box w_box2'>
                                            <div class='website_tab_header'>
                                                <div class='float-left'>{{ __('messages.first_input_delay_fid') }}</div>
                                                <div class='float-right w_time'>0 s</div>
                                                <div class='clearfix'></div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_green progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_green'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_fast') }} (&#60; 100ms)
                                                </div>
                                            </div>
                                            <div class='custom_progress_box'>
                                                <div class="custom_progress progress_yellow progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_yellow'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_moderate') }} (100ms ~
                                                    300ms)</div>
                                            </div>
                                            <div class='custom_progress_box last_custom_progress_box'>
                                                <div class="custom_progress progress_red progress">
                                                    <div class="progress-bar" style='width:20%;'>0%</div>
                                                </div>
                                                <div><span class='percent_red'>0%</span>
                                                    {{ __('messages.of_loads_for_this_page_have_a_slow') }} (&#62; 300ms)
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class='website_tab_content website_tab_content_lab_data'>
                                <div class='row'>
                                    <div class='col-lg-6'>
                                        <div class='w_box w_box1'>
                                            <div class='w_box_title'>
                                                <div class='float-left'>
                                                    {{ __('messages.first_contentful_paint') }}
                                                </div>
                                                <div class='float-right'>
                                                    <span class='w_time'>0 s</span>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                            </div>
                                            <div class='clearfix'></div>
                                            <div class='w_box_content'>
                                                {{ __('messages.first_contentful_paint_marks_the_time') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-6'>
                                        <div class='w_box w_box2'>
                                            <div class='w_box_title'>
                                                <div class='float-left'>
                                                    {{ __('messages.first_meaningful_paint') }}
                                                </div>
                                                <div class='float-right'>
                                                    <span class='w_time'>0 s</span>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                            </div>
                                            <div class='clearfix'></div>
                                            <div class='w_box_content'>
                                                {{ __('messages.first_meaningful_paint_measures_when') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-6'>
                                        <div class='w_box w_box3'>
                                            <div class='w_box_title'>
                                                <div class='float-left'>
                                                    {{ __('messages.speed_index') }}
                                                </div>
                                                <div class='float-right'>
                                                    <span class='w_time'>0 s</span>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                            </div>
                                            <div class='clearfix'></div>
                                            <div class='w_box_content'>
                                                {{ __('messages.speed_index_shows_how_quickly') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-6'>
                                        <div class='w_box w_box4'>
                                            <div class='w_box_title'>
                                                <div class='float-left'>
                                                    {{ __('messages.first_cpu_idle') }}
                                                </div>
                                                <div class='float-right'>
                                                    <span class='w_time'>0 s</span>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                            </div>
                                            <div class='clearfix'></div>
                                            <div class='w_box_content'>
                                                {{ __('messages.first_cpu_idle_marks_the_first_time') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-6'>
                                        <div class='w_box w_box5'>
                                            <div class='w_box_title'>
                                                <div class='float-left'>
                                                    {{ __('messages.time_to_interactive') }}
                                                </div>
                                                <div class='float-right'>
                                                    <span class='w_time'>0 s</span>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                            </div>
                                            <div class='clearfix'></div>
                                            <div class='w_box_content'>
                                                {{ __('messages.time_to_interactive_is_the_amount') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-6'>
                                        <div class='w_box w_box6'>
                                            <div class='w_box_title'>
                                                <div class='float-left'>
                                                    {{ __('messages.max_potential_first_input_delay') }}
                                                </div>
                                                <div class='float-right'>
                                                    <span class='w_time'>0 s</span>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                            </div>
                                            <div class='clearfix'></div>
                                            <div class='w_box_content'>
                                                {{ __('messages.the_maximum_potential_first_input_delay') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class='col-lg-12'>
                                        <div class='w_box_image row'></div>
                                    </div>
                                </div>
                            </div>
                            <div class='website_tab_content website_tab_content_opportunities'>
                                <div class='table-responsive'>
                                    <table style='width:100%;' class='table website_opportunities_html'></table>
                                </div>
                            </div>
                            <div class='website_tab_content website_tab_content_diagnostics'>
                                <div class='table-responsive'>
                                    <table style='width:100%;' class='table website_diagnostics_html'></table>
                                </div>
                            </div>
                            <div class='website_tab_content website_tab_content_pass_audit'>
                                <div class='table-responsive'>
                                    <table style='width:100%;' class='table website_pass_audit_html'></table>
                                </div>
                            </div>
                        </div>
                        <div class='website_time_box'>
                            <div class='text-center'>
                                <p>
                                <div><a class='website_hyperlink'>MySpeed</a>
                                    {{ __('messages.based_on_experimental_data_analyzed_by') }} <a
                                        class='website_hyperlink'>Lighthouse</a></div>
                                <div>{{ __('messages.time_of_analysis') }}: <span class='website_report_time'></span>
                                </div>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                @if (count($tags) > 0)
                    <div class="col-12 box-tags">
                        Tags
                        @foreach ($tags as $value)
                            <a href="{{ route('client.show-tag-article', ['slug' => $value->slug]) }}" rel="tag">•
                                {{ $value->name }}</a>
                        @endforeach
                    </div>
                @endif
                <div class="col-12">@include('frontend.layouts.ads.banner-3')</div>
            </div>
        </div>
    </div>
    <script>
        @if (!\App\Helpers\Helper::isMobile())
            var website_current_switch_tab = 'desktop';
        @else
            var website_current_switch_tab = 'mobile';
        @endif

        var setting_obj = {
            'unit-time-layout': '12h',
            'unit-date-layout': 'mm/dd/yyyy',
            'unit-distance-layout': 'kilometers',
            'unit-speed-layout': 'Mbps',
            'unit-server-layout': 0,
        };
        var website_test_step_texts = [
            "{{ __('messages.field_data') }}",
            "{{ __('messages.lab_data') }}",
            "{{ __('messages.opportunities') }}",
            "{{ __('messages.diagnostics') }}",
            "{{ __('messages.pass_audit') }}",
        ];
        var website_test_locale = 'en';
        var website_test_is_running = false;
        var website_test_api_xhr_desktop = false;
        var website_test_api_xhr_mobile = false;
        var website_mobile_json = false;
        var website_desktop_json = false;
        var website_mobile_show_first_time = false;
        var website_desktop_show_first_time = false;
        var website_current_percent = 0;

        function runWebsiteTest() {
            if (website_test_is_running === false) {
                var url = $('.analyze_input_box').val();
                url = url ? url.trim() : url;
                $('.website_error').hide();
                if (url) {
                    if (url.toString().indexOf('http://') === -1 && url.toString().indexOf('https://') === -1) {
                        url = 'http://' + url;
                    }
                    if (validURL(url)) {
                        replaceWebsiteTestLink(url);
                        $('.analyze_input_box').val(url);
                        $('.website_test_thumb').show();
                        $('.website_test_thumb_result').hide();
                        $('.all_step').hide();
                        $('.second_step').show();
                        $(".replace_url[ref=test_url]").attr('href', url);
                        $(".replace_url[ref=test_url]").html(url);
                        // initMinHeightFooterMaster();

                        //Start demo data
                        //var json_data = getDemoJsonForWebsiteTest();
                        //website_mobile_json = json_data;
                        //website_desktop_json = json_data;
                        //selectSwitchTab(website_current_switch_tab, true);
                        //return;

                        showWebsiteTestProgress(0, 'normal', function() {});
                        callWebsiteTestApi(url, website_test_locale, function(mobile_json, desktop_json, status) {
                            if (status == 'abort') {
                                endWesiteTestProgress(false);
                                $('.all_step').hide();
                                $('.first_step').show();
                                // initMinHeightFooterMaster();
                            } else if (status === true && mobile_json !== false && desktop_json !== false) {
                                website_mobile_json = mobile_json;
                                website_desktop_json = desktop_json;
                                endWesiteTestProgress(function() {
                                    selectSwitchTab(website_current_switch_tab, true);
                                    // initMinHeightFooterMaster();
                                });
                            } else {
                                endWesiteTestProgress(false);
                                $('.all_step').hide();
                                $('.first_step').show();
                                $('.website_error').show();
                                // initMinHeightFooterMaster();
                            }
                        });
                    } else {
                        Swal.fire({
                            type: 'warning',
                            text: "{{ __('messages.please_enter_valid_url') }}",
                            confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        });
                    }
                } else {
                    Swal.fire({
                        type: 'warning',
                        text: "{{ __('messages.please_enter_your_website_url') }}",
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                    });
                }
            }
        }

        function replaceWebsiteTestLink(url) {
            var cur_url = window.location.href;
            var query = window.location.search.substring(1);
            var base_url = cur_url.toString().replace('?' + query, '');
            var new_url = base_url + '?url=' + encodeURIComponent(url);
            window.history.pushState('page2', 'Title', new_url);
        }

        function callWebsiteTestApi(url, locale, callback) {
            //https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed
            var called_request = 2;
            var done_request = 0;
            var desktop_json = false;
            var mobile_json = false;
            var cur_url_desktop = getWebsiteTestUrl(url, locale, 'desktop');
            var cur_url_mobile = getWebsiteTestUrl(url, locale, 'mobile');

            website_test_api_xhr_desktop = $.ajax({
                type: "GET",
                url: cur_url_desktop,
                success: function(response) {
                    done_request++;
                    desktop_json = response;
                    if (done_request >= called_request) {
                        callback(mobile_json, desktop_json, true);
                    }
                },
                error: function(jqXHR, status, error) {
                    done_request++;
                    desktop_json = false;
                    if (done_request >= called_request) {
                        callback(mobile_json, desktop_json, status);
                    }
                }
            });
            website_test_api_xhr_mobile = $.ajax({
                type: "GET",
                url: cur_url_mobile,
                success: function(response) {
                    done_request++;
                    mobile_json = response;
                    if (done_request >= called_request) {
                        callback(mobile_json, desktop_json, true);
                    }
                },
                error: function(jqXHR, status, error) {
                    done_request++;
                    if (done_request >= called_request) {
                        callback(mobile_json, desktop_json, status);
                    }
                }
            });
        }

        function getWebsiteTestUrl(url, locale, strategy) {
            const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
            const parameters = {
                url: encodeURIComponent(url),
                locale: locale,
                strategy: strategy,
            };
            let query = api + '?';
            let query_param = '';
            for (key in parameters) {
                query_param += (query_param ? '&' : '') + key + '=' + parameters[key];
            }
            return query + query_param + '&key=AIzaSyCtGU8UxHGjEw6BMccQeO7lIB93ypBRB00';
        }

        function getDemoJsonForWebsiteTest() {
            return {};
        }

        function setPercentData(percent) {
            $('.progress_container').show();
            $('.website_process .progress-bar').css('width', formatPercent(percent, '%'));
            $('.website_process .progress_percent').text(formatPercent(percent, '%'));
            var cur_step = parseInt(percent / 20);
            cur_step = cur_step != 5 ? cur_step + 1 : cur_step;
            $('.website_current_step').html(website_test_step_texts[cur_step - 1] + '...');
            cur_step = percent >= 95 ? cur_step + 1 : cur_step;
            for (var i = 1; i <= cur_step - 1; i++) {
                $('.website_step_' + i).attr('src', '/frontend/images/step' + i + '_active.svg');
            }
            for (var i = cur_step; i <= 5; i++) {
                $('.website_step_' + i).attr('src', '/frontend/images/step' + i + '_inactive.svg');
            }
        }

        function showWebsiteTestProgress(percent, type, callback) {
            if (type === 'end') {
                website_current_percent = percent;
                setPercentData(percent);
                if (percent >= 100) {
                    callback();
                } else {
                    if (percent >= 95) {
                        setTimeout(function() {
                            showWebsiteTestProgress(percent + 1, type, callback);
                        }, 250);
                    } else {
                        setTimeout(function() {
                            showWebsiteTestProgress(percent + 1, type, callback);
                        }, 100);
                    }
                }
            } else {
                website_current_percent = percent;
                if (percent == 0) {
                    website_test_is_running = true;
                    $('.analyze_input_box').attr('readonly', true);
                    $('.analyze_input_box').blur();
                }
                if (website_test_is_running) {
                    setPercentData(percent);
                    if (percent < 50) {
                        setTimeout(function() {
                            showWebsiteTestProgress(percent + 1, type, callback);
                        }, 50);
                    } else if (percent < 70) {
                        setTimeout(function() {
                            showWebsiteTestProgress(percent + 1, type, callback);
                        }, 300);
                    } else if (percent < 99) {
                        setTimeout(function() {
                            showWebsiteTestProgress(percent + 1, type, callback);
                        }, 1000);
                    }
                }
            }
        }

        function endWesiteTestProgress(callback) {
            website_test_is_running = false;
            if (callback !== false) {
                showWebsiteTestProgress(website_current_percent, 'end', function() {
                    $('.progress_container').hide();
                    $('.analyze_input_box').removeAttr('readonly');
                    callback();
                });
            } else {
                $('.progress_container').hide();
                $('.analyze_input_box').removeAttr('readonly');
            }
        }

        function cancelWebsiteTest() {
            if (website_test_api_xhr_desktop) {
                website_test_api_xhr_desktop.abort();
            }
            if (website_test_api_xhr_mobile) {
                website_test_api_xhr_mobile.abort();
            }
        }

        function clearWebsiteTestResult() {
            $('.website_test_content').hide();
        }

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable && variable !== '') {
                    variable = pair[1];
                    return variable;
                }
            }
            return false;
        }

        function getColorBySecondAndType(type, number) {
            if (type == 'second') {
                if (number < 1) {
                    return '#32c24d';
                } else if (number <= 3) {
                    return '#ff9a03';
                } else {
                    return '#ff031c';
                }
            } else {
                if (number < 100) {
                    return '#32c24d';
                } else if (number <= 300) {
                    return '#ff9a03';
                } else {
                    return '#ff031c';
                }
            }
        }

        function getColorByPercent(percent) {
            if (percent <= 49) {
                return '#FF031C';
            } else if (percent <= 89) {
                return '#ff9a03';
            } else {
                return '#32c24d';
            }
        }

        function getColorTypeByPercent(percent) {
            if (percent == null) {
                return 'white';
            } else if (percent <= 49) {
                return 'red';
            } else if (percent <= 89) {
                return 'yellow';
            } else {
                return 'green';
            }
        }

        function getBackColorTypeByPercent(percent) {
            if (percent == null) {
                return '#A80011';
            } else if (percent <= 49) {
                return '#A80011';
            } else if (percent <= 89) {
                return '#CE7B00';
            } else {
                return '#1D9A34';
            }
        }

        function selectWebsiteTab(data) {
            $('.website_tab_item').removeClass('website_tab_item_active');
            $('.website_tab_item_' + data).addClass('website_tab_item_active');
            $('.website_tab_content').hide();
            $('.website_tab_content_' + data).show();
        }

        function selectSwitchTab(type, first_time) {
            if (first_time) {
                website_mobile_show_first_time = true;
                website_desktop_show_first_time = true;
            }
            $('.website_switch_tab_item').removeClass('website_switch_tab_item_active');
            $('.website_switch_' + type).addClass('website_switch_tab_item_active');
            $('.all_step').hide();
            $('.thirth_step').show();
            if (type == 'mobile') {
                if (website_mobile_json === false) {
                    return;
                }
                var json = website_mobile_json;
                fillGlobalData(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillFieldData(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillOriginSummary(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillLabData(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillOpportunities(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillDiagnostics(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillPassAudit(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                $('.website_report_time').html(formatDateTime(new Date(json.analysisUTCTimestamp)));
                initAuditEvent(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});

                if (website_desktop_show_first_time) {
                    website_desktop_show_first_time = false;
                    if (json.loadingExperience && json.loadingExperience.hasOwnProperty('metrics')) {
                        selectWebsiteTab('field_data');
                    } else {
                        selectWebsiteTab('lab_data');
                    }
                }
            } else {
                if (website_desktop_json === false) {
                    return;
                }
                var json = website_desktop_json;
                fillGlobalData(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillFieldData(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillOriginSummary(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillLabData(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillOpportunities(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillDiagnostics(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                fillPassAudit(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});
                $('.website_report_time').html(formatDateTime(new Date(json.analysisUTCTimestamp)));
                initAuditEvent(json, json.hasOwnProperty('lighthouseResult') ? json.lighthouseResult : {});

                if (website_mobile_show_first_time) {
                    website_mobile_show_first_time = false;
                    if (json.loadingExperience && json.loadingExperience.hasOwnProperty('metrics')) {
                        selectWebsiteTab('field_data');
                    } else {
                        selectWebsiteTab('lab_data');
                    }
                }
            }
        }

        function escapeHtml(string) {
            var entityMap = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;',
                '/': '&#x2F;',
                '`': '&#x60;',
            '=': '&#x3D;'
        };
        return String(string).replace(/[&<>"'`=\/]/g, function(s) {
                return entityMap[s];
            });
        }

        function sortByKey(data, key, desc) {
            function keysrt(key, desc) {
                return function(a, b) {
                    if (a[key] < b[key]) {
                        return desc ? -1 : 1;
                    } else if (a[key] > b[key]) {
                        return desc ? 1 : -1;
                    }
                    return 0;
                }
            }
            return data.sort(keysrt(key, desc));
        }

        function getObjLength(obj) {
            var size = 0,
                key;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        }

        function validURL(str) {
            str = str.toString().toLowerCase();
            regexp =
                /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
            if (regexp.test(str)) {
                return true;
            } else {
                return false;
            }
        }

        function websiteCutUrl(url) {
            if (url) {
                var end_pos = url.toString().indexOf('\?');
                end_pos = end_pos > 0 ? end_pos + 10 : url.toString().length;
                var start_pos = end_pos - 25;
                start_pos = start_pos > 0 ? start_pos : 0;
                var new_url = url.toString().substring(start_pos, end_pos);
                if (start_pos > 0) {
                    new_url = '...' + new_url;
                }
                if (end_pos < url.toString().length) {
                    new_url = new_url + '...';
                }
                return new_url;
            } else {
                return url;
            }
        }

        function formatNumber(number, append, appends) {
            if (number > 1) {
                number = number.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
                return number + ' ' + appends;
            } else {
                number = number.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
                return number + ' ' + append;
            }
        }

        function convertCacheTime(time) {
            var days = Math.round(time / (24 * 60 * 60));
            if (days > 0) {
                return days + " {{ __('messages.unit_days') }}";
            } else {
                var hours = time / (60 * 60);
                if (hours > 0) {
                    return hours + " {{ __('messages.unit_hours') }}";
                } else {
                    var minutes = time / 60;
                    return minutes + " {{ __('messages.unit_minutes') }}";
                }
            }
        }

        function formatMSecond(ms) {
            return formatNumber(Math.round(ms), 'ms', 'ms');
        }

        function formatSecond(second) {
            if (second <= 0) {
                return '';
            } else {
                if (second < 100) {
                    return formatNumber(second.toFixed(3), 's', 's');
                } else {
                    return formatNumber(second.toFixed(2), 's', 's');
                }
            }
        }

        function formatPercent(percent, append) {
            percent = Math.round(percent);
            return append ? (percent + append) : percent;
        }

        function formatDateTime(date) {
            var convert;
            if (setting_obj['unit-time-layout'] == '12h') {
                if (setting_obj['unit-date-layout'] == 'mm/dd/yyyy') {
                    convert = $.format.date(date, 'MM/dd/yyyy hh:mm:ss a');
                }
                if (setting_obj['unit-date-layout'] == 'dd.mm.yyyy') {
                    convert = $.format.date(date, 'dd.MM.yyyy hh:mm:ss a');
                }
                if (setting_obj['unit-date-layout'] == 'yyyy-mm-dd') {
                    convert = $.format.date(date, 'yyyy-MM-dd hh:mm:ss a');
                }
            } else {
                if (setting_obj['unit-date-layout'] == 'mm/dd/yyyy') {
                    convert = $.format.date(date, 'MM/dd/yyyy HH:mm:ss');
                }
                if (setting_obj['unit-date-layout'] == 'dd.mm.yyyy') {
                    convert = $.format.date(date, 'dd.MM.yyyy HH:mm:ss');
                }
                if (setting_obj['unit-date-layout'] == 'yyyy-mm-dd') {
                    convert = $.format.date(date, 'yyyy-MM-dd HH:mm:ss');
                }
            }
            return convert;
        }

        function formatKB(kb) {
            return formatNumber(Math.round(kb / 1024), 'KB', 'KB');
        }

        function fillGlobalData(json, result_obj) {
            var percent = result_obj.categories.performance.score * 100;
            $(".replace_url[ref=test_url]").attr('href', json.id);
            $(".replace_url[ref=test_url]").html(json.id);
            $('.website_test_thumb').hide();
            $('.website_test_thumb_result').attr('src', result_obj.audits['final-screenshot'].details.data);
            $('.website_test_thumb_result').show();
            setWebsitePercent(formatPercent(percent, false));
        }

        function fillFieldData(json, result_obj) {
            if (json.loadingExperience && json.loadingExperience.hasOwnProperty('metrics')) {
                $('.website_tab_content_field_data .w_box1 .w_time').html(formatSecond(json.loadingExperience.metrics
                    .FIRST_CONTENTFUL_PAINT_MS.percentile / 1000));
                $('.website_tab_content_field_data .w_box2 .w_time').html(formatMSecond(json.loadingExperience.metrics
                    .FIRST_INPUT_DELAY_MS.percentile));
                $('.website_tab_content_field_data .w_box1 .w_time').css('color', getColorBySecondAndType('second', json
                    .loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.percentile / 1000));
                $('.website_tab_content_field_data .w_box2 .w_time').css('color', getColorBySecondAndType('milisecond', json
                    .loadingExperience.metrics.FIRST_INPUT_DELAY_MS.percentile));

                var percent = (json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.distributions[0].proportion * 100);
                $('.website_tab_content_field_data .w_box1 .progress_green  .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_field_data .w_box1 .progress_green  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_field_data .w_box1 .percent_green').html(formatPercent(percent, '%'));

                var percent = (json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.distributions[1].proportion * 100);
                $('.website_tab_content_field_data .w_box1 .progress_yellow .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_field_data .w_box1 .progress_yellow  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_field_data .w_box1 .percent_yellow').html(formatPercent(percent, '%'));

                var percent = (json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.distributions[2].proportion * 100);
                $('.website_tab_content_field_data .w_box1 .progress_red .progress-bar').html(formatPercent(percent, '%'));
                $('.website_tab_content_field_data .w_box1 .progress_red  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_field_data .w_box1 .percent_red').html(formatPercent(percent, '%'));

                var percent = (json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.distributions[0].proportion * 100);
                $('.website_tab_content_field_data .w_box2 .progress_green  .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_field_data .w_box2 .progress_green  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_field_data .w_box2 .percent_green').html(formatPercent(percent, '%'));

                var percent = (json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.distributions[1].proportion * 100);
                $('.website_tab_content_field_data .w_box2 .progress_yellow .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_field_data .w_box2 .progress_yellow  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_field_data .w_box2 .percent_yellow').html(formatPercent(percent, '%'));

                var percent = (json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.distributions[2].proportion * 100);
                $('.website_tab_content_field_data .w_box2 .progress_red .progress-bar').html(formatPercent(percent, '%'));
                $('.website_tab_content_field_data .w_box2 .progress_red  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_field_data .w_box2 .percent_red').html(formatPercent(percent, '%'));

                $('.website_tab_item_field_data').show();
                selectWebsiteTab('field_data');
            } else {
                $('.website_tab_item_field_data').hide();
            }
        }

        function fillOriginSummary(json, result_obj) {
            if (json.originLoadingExperience && json.originLoadingExperience.hasOwnProperty('metrics')) {
                $('.website_tab_content_origin_summary .w_box1 .w_time').html(formatSecond(json.originLoadingExperience
                    .metrics.FIRST_CONTENTFUL_PAINT_MS.percentile / 1000));
                $('.website_tab_content_origin_summary .w_box2 .w_time').html(formatMSecond(json.originLoadingExperience
                    .metrics.FIRST_INPUT_DELAY_MS.percentile));
                $('.website_tab_content_origin_summary .w_box1 .w_time').css('color', getColorBySecondAndType('second', json
                    .originLoadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.percentile / 1000));
                $('.website_tab_content_origin_summary .w_box2 .w_time').css('color', getColorBySecondAndType('milisecond',
                    json.originLoadingExperience.metrics.FIRST_INPUT_DELAY_MS.percentile));

                var percent = (json.originLoadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.distributions[0].proportion *
                    100);
                $('.website_tab_content_origin_summary .w_box1 .progress_green  .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_origin_summary .w_box1 .progress_green  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_origin_summary .w_box1 .percent_green').html(formatPercent(percent, '%'));

                var percent = (json.originLoadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.distributions[1].proportion *
                    100);
                $('.website_tab_content_origin_summary .w_box1 .progress_yellow .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_origin_summary .w_box1 .progress_yellow  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_origin_summary .w_box1 .percent_yellow').html(formatPercent(percent, '%'));

                var percent = (json.originLoadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.distributions[2].proportion *
                    100);
                $('.website_tab_content_origin_summary .w_box1 .progress_red .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_origin_summary .w_box1 .progress_red  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_origin_summary .w_box1 .percent_red').html(formatPercent(percent, '%'));

                var percent = (json.originLoadingExperience.metrics.FIRST_INPUT_DELAY_MS.distributions[0].proportion * 100);
                $('.website_tab_content_origin_summary .w_box2 .progress_green  .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_origin_summary .w_box2 .progress_green  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_origin_summary .w_box2 .percent_green').html(formatPercent(percent, '%'));

                var percent = (json.originLoadingExperience.metrics.FIRST_INPUT_DELAY_MS.distributions[1].proportion * 100);
                $('.website_tab_content_origin_summary .w_box2 .progress_yellow .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_origin_summary .w_box2 .progress_yellow  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_origin_summary .w_box2 .percent_yellow').html(formatPercent(percent, '%'));

                var percent = (json.originLoadingExperience.metrics.FIRST_INPUT_DELAY_MS.distributions[2].proportion * 100);
                $('.website_tab_content_origin_summary .w_box2 .progress_red .progress-bar').html(formatPercent(percent,
                    '%'));
                $('.website_tab_content_origin_summary .w_box2 .progress_red  .progress-bar').css('width', formatPercent(
                    percent, '%'));
                $('.website_tab_content_origin_summary .w_box2 .percent_red').html(formatPercent(percent, '%'));

                $('.website_tab_item_origin_summary').show();
            } else {
                $('.website_tab_item_origin_summary').hide();
            }
        }

        function fillLabData(json, result_obj) {
            var percent = result_obj.audits['first-contentful-paint'].score * 100;
            var time = (result_obj.audits['first-contentful-paint'].numericValue / 1000);
            $('.website_tab_content_lab_data .w_box1 .w_time').html(formatSecond(time));
            $('.website_tab_content_lab_data .w_box1 .w_time').css('color', getColorByPercent(percent));

            var percent = result_obj.audits['first-meaningful-paint'].score * 100;
            var time = (result_obj.audits['first-meaningful-paint'].numericValue / 1000);
            $('.website_tab_content_lab_data .w_box2 .w_time').html(formatSecond(time));
            $('.website_tab_content_lab_data .w_box2 .w_time').css('color', getColorByPercent(percent));

            var percent = result_obj.audits['speed-index'].score * 100;
            var time = (result_obj.audits['speed-index'].numericValue / 1000);
            $('.website_tab_content_lab_data .w_box3 .w_time').html(formatSecond(time));
            $('.website_tab_content_lab_data .w_box3 .w_time').css('color', getColorByPercent(percent));

            var percent = result_obj.audits['first-cpu-idle'].score * 100;
            var time = (result_obj.audits['first-cpu-idle'].numericValue / 1000);
            $('.website_tab_content_lab_data .w_box4 .w_time').html(formatSecond(time));
            $('.website_tab_content_lab_data .w_box4 .w_time').css('color', getColorByPercent(percent));

            var percent = result_obj.audits['interactive'].score * 100;
            var time = (result_obj.audits['interactive'].numericValue / 1000);
            $('.website_tab_content_lab_data .w_box5 .w_time').html(formatSecond(time));
            $('.website_tab_content_lab_data .w_box5 .w_time').css('color', getColorByPercent(percent));

            var percent = result_obj.audits['max-potential-fid'].score * 100;
            var time = (result_obj.audits['max-potential-fid'].numericValue / 1000);
            $('.website_tab_content_lab_data .w_box6 .w_time').html(formatSecond(time));
            $('.website_tab_content_lab_data .w_box6 .w_time').css('color', getColorByPercent(percent));

            var image_html = '';
            for (var i = 0; i < result_obj.audits['screenshot-thumbnails'].details.items.length; i++) {
                var cur_class = 'lab_image_thumbnail';
                if (result_obj.audits['screenshot-thumbnails'].details.items.length - 1 == i) {
                    cur_class += ' lab_image_last_thumbnail';
                }
                image_html += '<div class="' + cur_class + '">';
                image_html += '<div><img class="lazy" data-src="' + result_obj.audits['screenshot-thumbnails'].details
                    .items[i].data + '"/></div>';
                image_html += '</div>';
            }
            $('.website_tab_content_lab_data .w_box_image').html(image_html);
        }

        function fillOpportunities(json, result_obj) {
            var cur_html = '';
            var list_datas = [];
            var list_zeros = [];
            for (var i = 0; i < result_obj.categories.performance.auditRefs.length; i++) {
                var cur_id = result_obj.categories.performance.auditRefs[i].id;
                var group_id = result_obj.categories.performance.auditRefs[i].group;
                if (group_id == 'load-opportunities') {
                    var cur_id = result_obj.categories.performance.auditRefs[i].id;
                    if (result_obj.audits[cur_id] && result_obj.audits[cur_id].score == null) {
                        list_zeros.push(result_obj.audits[cur_id]);
                    }
                    if (result_obj.audits[cur_id] && result_obj.audits[cur_id].score < 0.9 && result_obj.audits[cur_id]
                        .score != null) {
                        list_datas.push(result_obj.audits[cur_id]);
                    }
                }
            }
            list_datas = sortByKey(list_datas, 'score', true);
            list_datas = $.merge(list_datas, list_zeros);
            for (var i = 0; i < list_datas.length; i++) {
                cur_html += getFillData(list_datas[i], 'opportunities');
            }

            var append_cur_html = '<tr class="audit_main_row">';
            append_cur_html += '<th>';
            append_cur_html += "{{ __('messages.opportunity') }}";
            append_cur_html += '</th>';
            append_cur_html += '<th class="text-right">';
            append_cur_html += "{{ __('messages.the_time_saved_is_estimated') }}";
            append_cur_html += '</th>';
            append_cur_html += '</tr>';
            $(".website_opportunities_html").html(append_cur_html + cur_html);
        }

        function fillDiagnostics(json, result_obj) {
            var cur_html = '';
            var list_datas = [];
            var list_zeros = [];
            for (var i = 0; i < result_obj.categories.performance.auditRefs.length; i++) {
                var cur_id = result_obj.categories.performance.auditRefs[i].id;
                var group_id = result_obj.categories.performance.auditRefs[i].group;
                if (group_id == 'diagnostics') {
                    var cur_id = result_obj.categories.performance.auditRefs[i].id;
                    if (result_obj.audits[cur_id] && result_obj.audits[cur_id].score == null) {
                        list_zeros.push(result_obj.audits[cur_id]);
                    }
                    if (result_obj.audits[cur_id] && result_obj.audits[cur_id].score < 0.9 && result_obj.audits[cur_id]
                        .score != null) {
                        list_datas.push(result_obj.audits[cur_id]);
                    }
                }
            }
            list_datas = sortByKey(list_datas, 'score', true);
            list_datas = $.merge(list_datas, list_zeros);
            for (var i = 0; i < list_datas.length; i++) {
                cur_html += getFillData(list_datas[i], 'diagnostics');
            }

            var append_cur_html = '<tr class="audit_main_row">';
            append_cur_html += '<th>';
            append_cur_html += "{{ __('messages.diagnostics') }}";
            append_cur_html += '</th>';
            append_cur_html += '<th class="text-right">';
            append_cur_html += "{{ __('messages.estimated') }}";
            append_cur_html += '</th>';
            append_cur_html += '</tr>';
            $(".website_diagnostics_html").html(append_cur_html + cur_html);
        }

        function fillPassAudit(json, result_obj) {
            var cur_html = '';
            var list_datas = [];
            var list_zeros = [];
            for (var i = 0; i < result_obj.categories.performance.auditRefs.length; i++) {
                var cur_id = result_obj.categories.performance.auditRefs[i].id;
                var group_id = result_obj.categories.performance.auditRefs[i].group;
                if (group_id == 'load-opportunities' || group_id == 'diagnostics') {
                    var cur_id = result_obj.categories.performance.auditRefs[i].id;
                    if (result_obj.audits[cur_id] && result_obj.audits[cur_id].score == null) {
                        list_zeros.push(result_obj.audits[cur_id]);
                    }
                    if (result_obj.audits[cur_id] && result_obj.audits[cur_id].score >= 0.9 && result_obj.audits[cur_id]
                        .score != null) {
                        list_datas.push(result_obj.audits[cur_id]);
                    }
                }
            }
            list_datas = sortByKey(list_datas, 'score', true);
            for (var i = 0; i < list_datas.length; i++) {
                cur_html += getFillData(list_datas[i], 'pass_audit');
            }
            $(".website_pass_audit_html").html(cur_html);
        }

        function setWebsitePercent(percent) {
            var cnt = document.getElementById("count");
            var water = document.getElementById("water");
            cnt.innerHTML = percent;
            water.style.transform = 'translate(0' + ',' + (100 - percent) + '%)';
            var cur_color = getColorByPercent(percent);
            $('.website_box_percent_inner_circle').css('border-color', cur_color);
            $('.website_box_percent_inner .water').css('background-color', cur_color);
            $('.website_box_percent_inner .water_wave_front').css('fill', cur_color);

            var back_color = getBackColorTypeByPercent(percent);
            $('.website_box_percent_inner .water_wave_back').css('fill', back_color);
        }

        function initAuditEvent(json, result_obj) {
            $('.audit_content').hide();
            $('.audit_item').click(function() {
                var cur_content = $(this).closest('tr').next('tr');
                if ($(cur_content).css('display') !== 'none') {
                    $(cur_content).hide();
                    $(cur_content).removeClass('audit_content_active');
                    $(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
                    $(this).removeClass('audit_item_active');
                } else {
                    $(cur_content).show();
                    $(cur_content).addClass('audit_content_active');
                    $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
                    $(this).addClass('audit_item_active');
                }
            });
            viewTree(json, result_obj);
        }

        function viewTree(json, result_obj) {
            if (result_obj.audits['critical-request-chains']) {
                var json = [{
                    'text': 'Initial Navigation',
                    'nodes': []
                }];
                var cur_chain_obj = result_obj.audits['critical-request-chains'];
                for (var key in cur_chain_obj.details.chains) {
                    if (cur_chain_obj.details.chains[key].request && cur_chain_obj.details.chains[key].children) {
                        var chain_url = cur_chain_obj.details.chains[key].request.url;
                        json[json.length - 1].nodes.push({
                            'text': '<a href="' + chain_url + '" target="_blank">' + chain_url + "</a>",
                            'nodes': []
                        });
                        for (var chain_child in cur_chain_obj.details.chains[key].children) {
                            var child_url = cur_chain_obj.details.chains[key].children[chain_child].request.url;
                            var child_ms = formatSecond((cur_chain_obj.details.chains[key].children[chain_child].request
                                .endTime - cur_chain_obj.details.chains[key].children[chain_child].request.startTime
                                ) * 1000);
                            var child_mb = formatKB(cur_chain_obj.details.chains[key].children[chain_child].request
                                .transferSize);
                            json[json.length - 1].nodes[json[json.length - 1].nodes.length - 1].nodes.push({
                                'text': '<a href="' + child_url + '" target="_blank">' + websiteCutUrl(child_url) +
                                    "</a>" + ' - ' + child_ms + ',  ' + child_mb,
                                'icon': 'fas fa-circle fa-xs'
                            });
                        }
                    }
                }
                $('#tree').bstreeview({
                    data: JSON.stringify(json)
                });
            }
        }

        function getFillData(obj, type) {
            var cur_html = '';
            try {
                var score = obj.score == null ? null : obj.score * 100;

                if (obj.id == 'unminified-css') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.minify_css') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.details
                        .overallSavingsBytes > 0 ? ((type == 'pass_audit' ? (
                            "{{ __('messages.potential_savings_of') }} " + formatKB(obj.details
                                .overallSavingsBytes)) : (formatSecond(obj.numericValue / 1000)))) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.minifying_css_files_can_reduce') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'unminified-javascript') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.minify_javascript') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.details
                        .overallSavingsBytes > 0 ? ((type == 'pass_audit' ? (
                            "{{ __('messages.potential_savings_of') }} " + formatKB(obj.details
                                .overallSavingsBytes)) : (formatSecond(obj.numericValue / 1000)))) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.minify_javascript_files_can_reduce') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'unused-css-rules') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.remove_unused_css') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.details
                        .overallSavingsBytes > 0 ? ((type == 'pass_audit' ? (
                            "{{ __('messages.potential_savings_of') }} " + formatKB(obj.details
                                .overallSavingsBytes)) : (formatSecond(obj.numericValue / 1000)))) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.remove_dead_rules_from_stylesheets') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'uses-optimized-images') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.efficiently_encode_images') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.details
                        .overallSavingsBytes > 0 ? ((type == 'pass_audit' ? (
                            "{{ __('messages.potential_savings_of') }} " + formatKB(obj.details
                                .overallSavingsBytes)) : (formatSecond(obj.numericValue / 1000)))) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.optimized_images_load_faster_and_cónume') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<img class="lazy" data-src="' + cur_item.url +
                                '" width="50px" height="50px" style="margin-right:10px;"/>' + '<a href="' + cur_item.url +
                                '" target="_blank" title="' + cur_item.url + '">' + websiteCutUrl(cur_item.url) +
                                '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'uses-text-compression') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.enable_text_compression') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.details
                        .overallSavingsBytes > 0 ? ((type == 'pass_audit' ? (
                            "{{ __('messages.potential_savings_of') }} " + formatKB(obj.details
                                .overallSavingsBytes)) : (formatSecond(obj.numericValue / 1000)))) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.text_based_resources_should_be_served_with_compression') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'uses-rel-preconnect') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.preconnect_to_required_origins') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.numericValue > 0 ? (
                        (type == 'pass_audit' ? "{{ __('messages.potential_savings_of') }} " : '') + formatSecond(
                            obj.numericValue / 1000)) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.consider_adding_preconnect_or_dns_prefetch') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.wastedMs) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'time-to-first-byte') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.server_response_times_are_low_ttfb') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.numericValue > 0 ? (
                        (type == 'pass_audit' ? "{{ __('messages.potential_savings_of') }} " : '') + formatSecond(
                            obj.numericValue / 1000)) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.time_to_first_byte_indentifies_the_time') }}" + '</div>';
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'redirects') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.avoid_multiple_page_redirects') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.numericValue > 0 ? (
                        (type == 'pass_audit' ? "{{ __('messages.potential_savings_of') }} " : '') + formatSecond(
                            obj.numericValue / 1000)) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.redirect_introduce_additional_delay') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.time_spent') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            if (cur_item.url.toString().indexOf('http://') === 0 || cur_item.url.toString().indexOf(
                                    'https://') === 0) {
                                cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item
                                    .url + '">' + cur_item.url + '</a></td>';
                            } else {
                                cur_html += '<td>' + cur_item.url + '</a></td>';
                            }
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.wastedMs) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'uses-rel-preload') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.preload_key_requests') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.numericValue > 0 ? (
                        (type == 'pass_audit' ? "{{ __('messages.potential_savings_of') }} " : '') + formatSecond(
                            obj.numericValue / 1000)) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' + "{{ __('messages.consider_using') }}" +
                        " '<link rel=preload>' " + "{{ __('messages.to_prioritize_fetching_resources') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.time_spent') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.wastedMs) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }

                if (obj.id == 'user-timings') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.user_timing_marks_and_measures') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    if (obj.details.items.length > 0) {
                        cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatNumber(obj
                            .details.items.length, 'user timing', 'user timings') + '</span>';
                    }
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.consider_instrumenting_your_app_with_the') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.name') }}" + '</th>';
                        cur_html += '<th>' + "{{ __('messages.type') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.start_time') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.duration') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + cur_item.name + '</td>';
                            cur_html += '<td>' + cur_item.timingType + '</td>';
                            cur_html += '<td class="text-right">' + formatSecond(cur_item.startTime / 1000) + '</td>';
                            cur_html += '<td class="text-right"></td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'third-party-summary') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.minimize_third_party_usage') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.details.summary
                        .wastedMs > 0 ? ((type == 'pass_audit' ? "{{ __('messages.potential_savings_of') }} " : '') +
                            formatSecond(obj.details.summary.wastedMs / 1000)) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.third_party_code_can_significantly_impact_load_performance') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.third_party') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.main_thread_blocking_time') }}" +
                        '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            if (cur_item.entity.url) {
                                cur_html += '<td><a href="' + cur_item.entity.url + '" target="_blank">' + cur_item.entity
                                    .text + '</a></td>';
                            } else {
                                cur_html += '<td>' + cur_item.entity.text + '</td>';
                            }
                            cur_html += '<td class="text-right">' + formatKB(cur_item.transferSize) + '</td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.blockingTime) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }

                if (obj.id == 'font-display') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.ensure_text_remains_visible_during_webfont_load') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    if (obj.numericValue) {
                        cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatSecond(obj
                            .numericValue / 1000) + '</span>';
                    }
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.leverage_the_font_display_css_feature_to_ensure') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.wastedMs) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'uses-long-cache-ttl') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.serve_static_assets_with_an_efficient_cache_policy') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    if (obj.details.items.length > 0) {
                        cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatNumber(obj
                            .details.items.length, "{{ __('messages.resource_found') }}",
                            "{{ __('messages.resources_found') }}") + '</span>';
                    }
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.a_long_cache_lifetime_can_speed_up_repeat_visits_to_your_page') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.cache_ttl') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + convertCacheTime(cur_item.cacheLifetimeMs) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'mainthread-work-breakdown') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.minimize_main_thread_work') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatSecond(obj
                        .numericValue / 1000) + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.consider_reducing_the_time_spent_parsing') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.category') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.time_spent') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + cur_item.groupLabel + '</td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.duration) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'dom-size') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.avoid_an_excessive_dom_size') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatNumber(obj
                            .numericValue, "{{ __('messages.unit_element') }}", "{{ __('messages.unit_elements') }}") +
                        '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.a_large_dom_will_increase_memory_usage') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.statistic') }}" + '</th>';
                        cur_html += '<th>' + "{{ __('messages.element') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.value') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + cur_item.statistic + '</td>';
                            if (cur_item.element) {
                                cur_html += '<td>' + escapeHtml(cur_item.element.value) + '</td>';
                            } else {
                                cur_html += '<td></td>';
                            }
                            cur_html += '<td class="text-right">' + formatNumber(cur_item.value, '', '') + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'total-byte-weight') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.avoid_enormous_network_payloads') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' +
                        "{{ __('messages.total_size_was') }} " + formatKB(obj.numericValue) + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.large_network_payloads_cost_users_real_money') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'bootup-time') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.reduce_javascript_execution_time') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.numericValue > 0 ? (
                        (type == 'pass_audit' ? "{{ __('messages.potential_savings_of') }} " : '') + formatSecond(
                            obj.numericValue / 1000)) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.consider_reducing_the_time_spent_parsing') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.total_cpu_time') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.script_evaluation') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.script_parse') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.total) + '</td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.scripting) + '</td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.scriptParseCompile) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'critical-request-chains') {
                    var total_chain = 0;
                    for (var chain_key in obj.details.chains) {
                        if (obj.details.chains[chain_key].children) {
                            total_chain += getObjLength(obj.details.chains[chain_key].children);
                        }
                    }

                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.avoid_chaining_critical_requests') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatNumber(total_chain,
                        "{{ __('messages.chain_found') }}", "{{ __('messages.chains_found') }}") + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.the_critical_request_chains_below_show_you_what_resources') }}" + '</div>';
                    cur_html += '<div>' + "{{ __('messages.maximum_critical_path_latency') }}" + ': ' + formatSecond(obj
                        .details.longestChain.duration / 1000) + '</div>';
                    cur_html += '<div id="tree"></div>';
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'resource-summary') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.keep_request_counts_low_and_transfer_sizes_small') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    if (obj.details.items.length > 0) {
                        cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatNumber(obj
                            .details.items[0].requestCount, " {{ __('messages.unit_request') }}",
                            " {{ __('messages.unit_requests') }}") + ' - ' + formatKB(obj.details.items[0]
                            .transferSize) + '</span>';
                    }
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.to_set_budgets_for_the_quantity_and_size') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.resource_type') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.request') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.transfer_size') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + cur_item.label + '</td>';
                            cur_html += '<td class="text-right">' + formatNumber(cur_item.requestCount, '', '') + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.transferSize) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }

                if (obj.id == 'offscreen-images') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.defer_offscreen_images') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatSecond(obj
                        .numericValue / 1000) + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.consider_lazy_loading_offscreen_and_hidden_images') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<img class="lazy" data-src="' + cur_item.url +
                                '" width="50px" height="50px" style="margin-right:10px;"/>' + '<a href="' + cur_item.url +
                                '" target="_blank" title="' + cur_item.url + '">' + websiteCutUrl(cur_item.url) +
                                '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'uses-responsive-images') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.properly_size_images') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatSecond(obj
                        .numericValue / 1000) + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.serve_images_that_are_appropriately_sized') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<img class="lazy" data-src="' + cur_item.url +
                                '" width="50px" height="50px" style="margin-right:10px;"/>' + '<a href="' + cur_item.url +
                                '" target="_blank" title="' + cur_item.url + '">' + websiteCutUrl(cur_item.url) +
                                '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'uses-webp-images') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.serve_images_in_next_gen_formats') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatSecond(obj
                        .numericValue / 1000) + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.image_formats_like_jpeg_webp_often_provide_better_compression') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<img class="lazy" data-src="' + cur_item.url +
                                '" width="50px" height="50px" style="margin-right:10px;"/>' + '<a href="' + cur_item.url +
                                '" target="_blank" title="' + cur_item.url + '">' + websiteCutUrl(cur_item.url) +
                                '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'efficient-animated-content') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.use_video_formats_for_animated_content') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + (obj.numericValue > 0 ? (
                        (type == 'pass_audit' ? "{{ __('messages.potential_savings_of') }} " : '') + formatSecond(
                            obj.numericValue / 1000)) : '') + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.large_gifs_are_inefficient_for_delivering_animated_content') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th>' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th>' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td>' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td>' + formatKB(cur_item.wastedBytes) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }
                if (obj.id == 'render-blocking-resources') {
                    cur_html = '<tr class="audit_item">';
                    cur_html += '<td class="audit_title">';
                    cur_html += '<span class="audit_title_' + getColorTypeByPercent(score) + '"></span>' +
                        "{{ __('messages.eliminate_render_blocking_resources') }}";
                    cur_html += '</td>';
                    cur_html += '<td class="audit_action">';
                    cur_html += '<span class="audit_item_' + getColorTypeByPercent(score) + '">' + formatSecond(obj
                        .numericValue / 1000) + '</span>';
                    cur_html += '<i class="fas fa-angle-down"></i>';
                    cur_html += '</td>';
                    cur_html + '</tr>';
                    cur_html += '<tr class="audit_content">';
                    cur_html += '<td colspan="2">';
                    cur_html += '<div class="audit_content_note">' +
                        "{{ __('messages.resources_are_blocking_the_first_paint_of_your_page') }}" + '</div>';
                    if (obj.details.items.length > 0) {
                        cur_html += '<table style="width:100%">';
                        cur_html += '<tr>';
                        cur_html += '<th>' + "{{ __('messages.url') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.size') }}" + '</th>';
                        cur_html += '<th class="text-right">' + "{{ __('messages.potential_savings') }}" + '</th>';
                        cur_html += '</tr>';
                        for (var i = 0; i < obj.details.items.length; i++) {
                            var cur_item = obj.details.items[i];
                            cur_html += '<tr>';
                            cur_html += '<td>' + '<a href="' + cur_item.url + '" target="_blank" title="' + cur_item.url +
                                '">' + websiteCutUrl(cur_item.url) + '</a></td>';
                            cur_html += '<td class="text-right">' + formatKB(cur_item.totalBytes) + '</td>';
                            cur_html += '<td class="text-right">' + formatMSecond(cur_item.wastedMs) + '</td>';
                            cur_html += '</tr>';
                        }
                        cur_html += '</table>';
                    }
                    cur_html += '</td>';
                    cur_html += '</tr>';
                }

                return cur_html;
            } catch (err) {
                return cur_html;
            }
        }

        function read_setting_unit() {
            for (var key in setting_obj) {
                var cookie_setting_value = Cookies.get('cookie_common_' + key);
                if (cookie_setting_value) {
                    setting_obj[key] = cookie_setting_value;
                }
            }
        }

        $(document).ready(function() {
            read_setting_unit();

            //Init tab data
            selectWebsiteTab('field_data');
            $('.website_tab_item').click(function() {
                selectWebsiteTab($(this).attr('ref'));
            });

            //Init tab mobile - desktop
            $('.website_switch_tab_item').click(function() {
                var cur_tab = $(this).attr('ref');
                selectSwitchTab(cur_tab, false);
            });

            //Event for lab data
            $('.website_tab_content_lab_data .w_box_content').hide();
            $('.website_tab_content_lab_data .w_box_title').click(function() {
                var parent_content = $(this).parent().find('.w_box_content');
                if ($(parent_content).css('display') !== 'none') {
                    $(parent_content).hide();
                    $(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
                    $(this).parent().removeClass('w_box_active');
                } else {
                    $(parent_content).show();
                    $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
                    $(this).parent().addClass('w_box_active');
                }
            });

            //Analyze event
            $('.analyze_btn').click(function() {
                runWebsiteTest();
            });
            $('.analyze_input_box').keyup(function(e) {
                if (e.keyCode == 13) {
                    runWebsiteTest();
                }
            });
            if (getQueryVariable("url")) {
                $('.analyze_input_box').val(decodeURIComponent(getQueryVariable("url")));
                runWebsiteTest();
            }
        });
    </script>
    <link href="/frontend/css/bstreeview.css" rel="stylesheet">
    <script src="/frontend/js/bstreeview.js"></script>
@endsection