Skip to content

Commit d155ce4

Browse files
girishpanchal30girishpanchal30
committed
Improve script performance Codeinwp/visualizer-pro#315 
1 parent b5c2ee8 commit d155ce4

File tree

5 files changed

+119
-21
lines changed

5 files changed

+119
-21
lines changed

‎classes/Visualizer/Module/Chart.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,7 @@ public function renderChartPages() {
528528
}
529529

530530
$_POST['save_chart_image'] = isset( $_POST['save_chart_image'] ) && 'yes' === $_POST['save_chart_image'] ? true : false;
531+
$_POST['lazy_load_chart'] = isset( $_POST['lazy_load_chart'] ) && 'yes' === $_POST['lazy_load_chart'] ? true : false;
531532

532533
if ( isset( $_POST['chart-img'] ) && ! empty( $_POST['chart-img'] ) ) {
533534
$attachment_id = $this->save_chart_image( $_POST['chart-img'], $chart_id, $_POST['save_chart_image'] );

‎classes/Visualizer/Module/Frontend.php

Lines changed: 79 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
4141
*/
4242
private $_charts = array();
4343

44+
/**
45+
* Lazy render script.
46+
*
47+
* @access private
48+
* @var bool
49+
*/
50+
private $lazy_render_script = false;
51+
4452
/**
4553
* Constructor.
4654
*
@@ -53,6 +61,7 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
5361
public function __construct( Visualizer_Plugin $plugin ) {
5462
parent::__construct( $plugin );
5563

64+
$this->_addAction( 'wp_print_footer_scripts', 'printFooterScripts' );
5665
$this->_addAction( 'wp_enqueue_scripts', 'enqueueScripts' );
5766
$this->_addAction( 'load-index.php', 'enqueueScripts' );
5867
$this->_addAction( 'visualizer_enqueue_scripts', 'enqueueScripts' );
@@ -81,14 +90,32 @@ function script_loader_tag( $tag, $handle, $src ) {
8190
if ( is_admin() ) {
8291
return $tag;
8392
}
84-
85-
$scripts = array( 'google-jsapi', 'visualizer-render-google-lib', 'visualizer-render-google' );
86-
87-
foreach ( $scripts as $async ) {
93+
// Async scripts.
94+
$async_scripts = array( 'google-jsapi', 'chartjs', 'visualizer-datatables' );
95+
foreach ( $async_scripts as $async ) {
8896
if ( $async === $handle ) {
89-
$tag = str_replace( ' src', ' defer="defer" src', $tag );
97+
$tag = str_replace( ' src', ' async src', $tag );
98+
break;
99+
}
100+
};
101+
102+
// Async scripts.
103+
$scripts = array( 'dom-to-image' );
104+
foreach ( array( 'async', 'defer' ) as $attr ) {
105+
if ( wp_scripts()->get_data( $handle, $attr ) ) {
106+
break;
107+
}
108+
if ( in_array( $handle, $async_scripts, true ) || false === strpos( $handle, 'visualizer-' ) ) {
90109
break;
91110
}
111+
if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
112+
$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
113+
if ( $this->lazy_render_script ) {
114+
$tag = str_replace( ' src', ' data-visualizer-script', $tag );
115+
}
116+
}
117+
// Only allow async or defer, not both.
118+
break;
92119
}
93120
return $tag;
94121
}
@@ -329,6 +356,14 @@ public function renderChart( $atts ) {
329356
// handle settings filter hooks
330357
$settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $settings, $chart->ID, $type );
331358

359+
$lazy_load = isset( $settings['lazy_load_chart'] ) ? $settings['lazy_load_chart'] : false;
360+
$lazy_load = apply_filters( 'visualizer_lazy_load_chart', $lazy_load, $chart->ID );
361+
$container_class = 'visualizer-front-container';
362+
if ( $lazy_load ) {
363+
$this->lazy_render_script = true;
364+
$container_class .= ' visualizer-lazy-render';
365+
}
366+
332367
// handle data filter hooks
333368
$data = self::get_chart_data( $chart, $type );
334369

@@ -438,7 +473,7 @@ public function renderChart( $atts ) {
438473
wp_enqueue_style( 'visualizer-front' );
439474

440475
// return placeholder div
441-
return $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID );
476+
return '<div class="' . $container_class . '">' . $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID ) . '</div>';
442477
}
443478

444479
/**
@@ -608,4 +643,42 @@ private function getChartData( $cache_key = '', $chart_id = 0 ) {
608643

609644
return false;
610645
}
646+
647+
/**
648+
* Print footer script.
649+
*/
650+
public function printFooterScripts() {
651+
if ( $this->lazy_render_script ) {
652+
?>
653+
<script type="text/javascript">
654+
var visualizerUserInteractionEvents = [
655+
"mouseover",
656+
"keydown",
657+
"touchmove",
658+
"touchstart"
659+
];
660+
661+
visualizerUserInteractionEvents.forEach(function(event) {
662+
window.addEventListener(event, visualizerTriggerScriptLoader, { passive: true });
663+
});
664+
665+
function visualizerTriggerScriptLoader() {
666+
visualizerLoadScripts();
667+
visualizerUserInteractionEvents.forEach(function(event) {
668+
window.removeEventListener(event, visualizerTriggerScriptLoader, { passive: true });
669+
});
670+
}
671+
672+
function visualizerLoadScripts() {
673+
document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
674+
jQuery.getScript( elem.getAttribute("data-visualizer-script"), function() {
675+
elem.setAttribute("src", elem.getAttribute("data-visualizer-script"));
676+
elem.removeAttribute("data-visualizer-script");
677+
} );
678+
});
679+
}
680+
</script>
681+
<?php
682+
}
683+
}
611684
}

‎classes/Visualizer/Render/Sidebar.php

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -517,19 +517,38 @@ protected function load_dependent_assets( $libs ) {
517517
* @access protected
518518
*/
519519
protected function _renderChartImageSettings() {
520-
// Default enable if amp is active.
521-
$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
522-
$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
523-
524-
self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
525-
self::_renderCheckboxItem(
526-
esc_html__( 'Save inside media library?', 'visualizer' ),
527-
'save_chart_image',
528-
$this->save_chart_image ? true : false,
529-
'yes',
530-
esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
531-
false
532-
);
533-
self::_renderSectionEnd();
520+
// Default enable if amp is active.
521+
$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
522+
$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
523+
524+
$is_create_chart = true;
525+
if ( filter_input( INPUT_GET, 'library', FILTER_VALIDATE_BOOLEAN ) ) {
526+
if ( filter_input( INPUT_GET, 'action' ) === Visualizer_Plugin::ACTION_EDIT_CHART ) {
527+
$is_create_chart = false;
528+
}
529+
}
530+
$this->lazy_load_chart = null === $this->lazy_load_chart && $is_create_chart ? true : $this->lazy_load_chart;
531+
532+
self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
533+
self::_renderCheckboxItem(
534+
esc_html__( 'Save inside media library?', 'visualizer' ),
535+
'save_chart_image',
536+
$this->save_chart_image ? true : false,
537+
'yes',
538+
esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
539+
false
540+
);
541+
self::_renderSectionEnd();
542+
543+
self::_renderSectionStart( esc_html__( 'Lazy rendering of chart', 'visualizer' ), false );
544+
self::_renderCheckboxItem(
545+
esc_html__( 'Enable lazy rendering of chart?', 'visualizer' ),
546+
'lazy_load_chart',
547+
$this->lazy_load_chart ? true : false,
548+
'yes',
549+
esc_html__( 'To enable lazy chart rendering.', 'visualizer' ),
550+
false
551+
);
552+
self::_renderSectionEnd();
534553
}
535554
}

‎css/front.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@
2424
/* datatables */
2525
.dt-button {
2626
display: none !important;
27-
}
27+
}
28+
29+
.visualizer-front-container.visualizer-lazy-render {
30+
content-visibility: auto;
31+
}

‎js/render-facade.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@
128128

129129
function displayChartsOnFrontEnd() {
130130
// display all charts that are NOT to be lazy-loaded.
131+
$( 'div.viz-facade-loaded:not(.visualizer-lazy):empty' ).removeClass( 'viz-facade-loaded' );
131132
$('div.visualizer-front:not(.visualizer-lazy):not(.viz-facade-loaded)').each(function(index, element){
132133
var id = $(element).addClass('viz-facade-loaded').attr('id');
133134
showChart(id);

0 commit comments

Comments
 (0)