[question] Admin to slow need some advice

[danyj]

This issue is pertaining to my own setup. I am about to finish the first theme options set and the way it is setup right now it looks great but it is to slow.

I have 50 option types, per style. You can kinda replicate the issue I see when you add one or 2 more tabs to scratch theme demo. Even as it is now it is slow. So if you change this https://github.com/ThemeFuse/Scratch-Theme/blob/master/scratch-parent/framework-customizations/theme/options/demo-box.php

To

<?php if ( ! defined( 'FW' ) ) {
    die( 'Forbidden' );
}

$options = array(
    'demo' => array(
        'title'   => __( 'Demo Options', 'unyson' ),
        'type'    => 'tab',
        'options' => array(
            'sub_tab_1' => array(
                'title'   => __( 'Without Box', 'unyson' ),
                'type'    => 'tab',
                'options' => array(
                    fw()->theme->get_options( 'demo-2' ),
                ),
            ),
            'sub_tab_2' => array(
                'title'   => __( 'With Box', 'unyson' ),
                'type'    => 'tab',
                'options' => array(
                    'demo_box' => array(
                        'title'   => __( 'Box', 'unyson' ),
                        'type'    => 'box',
                        'options' => array(
                            fw()->theme->get_options( 'demo' ),
                        ),
                    ),
                ),
            ),
            'sub_tab_3' => array(
                'title'   => __( 'With Box', 'unyson' ),
                'type'    => 'tab',
                'options' => array(
                    'demo_box' => array(
                        'title'   => __( 'Box', 'unyson' ),
                        'type'    => 'box',
                        'options' => array(
                            fw()->theme->get_options( 'demo' ),
                        ),
                    ),
                ),
            ),
            'sub_tab_4' => array(
                'title'   => __( 'With Box', 'unyson' ),
                'type'    => 'tab',
                'options' => array(
                    'demo_box' => array(
                        'title'   => __( 'Box', 'unyson' ),
                        'type'    => 'box',
                        'options' => array(
                            fw()->theme->get_options( 'demo' ),
                        ),
                    ),
                ),
            ),      

        ),
    ),
);

You will see the issue. I did my best to use smart separation and I used

 fw()->theme->get_options( 'options_set_1' )
 fw()->theme->get_options( 'options_set_2' )

Is there any way to speed this up ?

[danyj]

I cant blame it much on your options, well yes a bit :) the typography option is a speed killer, but I also cant blame the idea I have in mind for the theme itself.

So I either need a custom option that would handle the styles via ajax instead of preloading all 50 x number of styles options or a better way to do all of this.

[ghost]

Is there any way to speed this up ?

No.

the typography option is a speed killer

We will take a look to see if it can be improved.

[danyj]

Is anyone from your team available for custom NDA work for a option type?

[danyj]

What I also see that half of the loading time belongs to the fadein, how fast why and where is that fadein set ? To me it looks like it is somewhere between 2 and 4 sec. In one of the issues I saw that the fadein is there because you load your CSS files at the bottom of the page and dont want the user to see the unstyled admin until everything is rendered. This than comes back to #153. And something like this https://github.com/ThemeFuse/Unyson/issues/275#issuecomment-77034602 would save you loads of trouble and files loading in the wrong place.

My class adds everything you need in head https://github.com/YJSGframework/yjsg/blob/master/includes/yjsgcore/classes/yjsg.dochead.class.php and is easy to use and understand.

I am not saying you must use it but if the load time is contributed to these files http://prntscr.com/6esg3e than a second look in better approach would be worth it.

[ghost]

Is anyone from your team available for custom NDA work for a option type?

No I'm afraid we don't take custom work. We have our plates full with a lot of work, so we'll have to pass this oportunity.

how fast why and where is that fadein set ?

https://github.com/ThemeFuse/Unyson/blob/a64fb9109527fc761ef673db8e4a3a8aff387cad/framework/views/backend-tabs.php#L8

https://github.com/ThemeFuse/Unyson/blob/6429423f63d910802baaaf6fbffc38fdde0f6fb9/framework/static/js/backend-options.js#L100

My class adds everything you need in head

The options render starts in body after head was printed, so it's impossible add something in head.

[danyj]

Impossible. I hate to see that word in coding but have it your way.

[danyj]

Cant let it go , if these frameworks are able to follow semantics and load css where they should be , than we should not try to reinvent anything and we should follow coding guidelines.

http://prntscr.com/6f0c2h http://prntscr.com/6f0cxt http://prntscr.com/6f0dl5 http://prntscr.com/6f0dvm http://prntscr.com/6f0ekq

With current way we give the appearance that the admin is slow where in fact it is not and we do fadeins just to wait for the stylesheet.

[ghost]

@danyj My class adds everything you need in head

@moldcraft The options render starts in body after head was printed, so it's impossible add something in head.

Done. Test please.

[danyj]

:100: you see , I believed in you :)

Now what do I do with this one https://github.com/ThemeFuse/Unyson/pull/252#issuecomment-74381745

My custom style still loads at the bottom. What hook can I use now?

[danyj]

Now if we can find better way for google fonts and get rid of this http://prntscr.com/6f1aml the size is actually 3x that It would cut down the load by half

[danyj]

This works but do you think this is ok for my custom scripts

function _thz_admin_scripts() {

    global $pagenow;

    if ( $pagenow == 'post-new.php' || $pagenow == 'themes.php') {
        wp_enqueue_style('theme-custom-fw-settings-side-tabs',thz_theme_uri().'/admin/css/fw-settings-side-tabs.css');
        wp_enqueue_style( 'fw-font-awesome' );
        wp_enqueue_script( 'admin-plugins', thz_theme_uri() . '/admin/js/thz.admin.plugins.js', array('jquery') );
        wp_enqueue_script( 'thz-admin', thz_theme_uri() . '/admin/js/thz.admin.js', array('jquery') );   
    }
}
add_action( 'admin_enqueue_scripts', '_thz_admin_scripts', 10, 1 );

[ghost]

This works but do you think this is ok for my custom scripts

Use these actions

[danyj]

I am not able to get it tow work on those actions. Do you mind showing me an example?

[ghost]

I am not able to get it tow work

What is actually not working, the action is not called at all, or something else?

// file: functions.php or inc/hooks.php

function _action_test() {
    fw_print('Test');
    wp_enqueue_style('test', '//about:blank');
}
add_action('fw_admin_enqueue_scripts:settings', '_action_test');
add_action('fw_admin_enqueue_scripts:post', '_action_test');

[danyj]

These dont fire

fw_admin_enqueue_scripts:settings
fw_admin_enqueue_scripts:post

here is mine

function _thz_admin_scripts(){

    wp_enqueue_style('theme-custom-fw-settings-side-tabs',thz_theme_uri().'/admin/css/fw-settings-side-tabs.css');
    wp_enqueue_style( 'fw-font-awesome' );
    wp_enqueue_script( 'admin-plugins', thz_theme_uri() . '/admin/js/thz.admin.plugins.js', array('jquery') );
    wp_enqueue_script( 'thz-admin', thz_theme_uri() . '/admin/js/thz.admin.js', array('jquery') );  

}

add_action('fw_admin_enqueue_scripts:settings', '_thz_admin_scripts');
add_action('fw_admin_enqueue_scripts:post', '_thz_admin_scripts');

[danyj]

This one fires fine

add_action('fw_settings_form_render', '_thz_admin_scripts');

but it loads them at the bottom.

[ghost]

fw_settings_form_render is fired after <head> was generated.

P.S. Do you have the latest github version?

[danyj]

yes the last one you uploaded here https://github.com/ThemeFuse/Unyson/issues/333#issuecomment-78052162

unless you changed something after

[ghost]

I changed it when I added the actions https://github.com/ThemeFuse/Unyson/issues/333#issuecomment-78066997

[danyj]

Ok ok , did not know that I thought that they were there in the initial style to head change already. I got the new one works now.

[ghost]

The entire site is slow (even server side) or just html/js, the browser can't display that much elements? Can you show us a video of how it is slow?

[ghost]

If the server side is slow, have you tried instead of fw()->theme->get_options( 'demo' ), to define a new option type that has inside those options? So the options array will be

'demo_box' => array(
    'type'    => 'box',
    'options' => array(
        'test' => array('type' => 'thz-demo'),
    ),
),

instead of

'demo_box' => array(
    'type'    => 'box',
    'options' => array(
        fw()->theme->get_options( 'demo' ), // this will return a very big array
    ),
),

[danyj]

You can use your scratch demo and simply copy the options demo once or twice , you will see how painful it is. I reconstructed my options 6 times. Lost about 2 weeks in sitting and thinking how to make this work and was hoping to find a solution but it is just impossible. So I opted for custom options way which proves that it works faster but now I am stuck at #366