Issue causing sitemap or menu list to appear before page load

Dear Tiredtraveller,

The issue you describe is unrelated to the plugin. It is related to the above the fold CSS.

If the online tool from the Penthouse.js creator does not produce the desired above the fold CSS code, you could edit it manually or try advanced above the fold creation via Grunt.js or Gulp.js.

I will provide an example Grunt.js implementation for Penthouse.js in the next update of the plugin.

Here’s a start:

clean: {
    abovethefold: [
        'css/abovethefold/',
        'css/inline.raw.css'
    ]
},

replace: {
    inlinecss: {
        src: ['css/inline.min.css'],
        overwrite: true,                 // overwrite matched source files
        replacements: [{
            from: '',
            to: ''
        }]
    }
},

cssmin: {
    inline_raw: {
        options: {
            banner: '<%= meta.banner %>\n',
            keepSpecialComments: false,
            advanced: true,
            aggressiveMerging: true
        },
        files: {
            'css/inline.raw.css': [
                'css/inline.raw.css'
            ]
        }
    },
    inline: {
        options: {
            banner: '<%= meta.banner %>\n',
            keepSpecialComments: false
        },
        files: {
            'css/inline.min.css': [
                'css/inline.raw.css',
                'css/inline-ext.css'
            ]
        }
    }
},

penthouse: {
    frontpage : {
        outfile : 'css/abovethefold/frontpage.css',
        css : 'css/full.css',
        url : 'https://www.domain.com/',
        width : 1600,
        height : 1200
    },
    frontpage_mid : {
        outfile : 'css/abovethefold/frontpage_mid.css',
        css : 'css/full.css',
        url : 'https://www.domain.com/',
        width : 1200,
        height : 800
    },
    frontpage_small : {
        outfile : 'css/abovethefold/frontpage_small.css',
        css : 'css/full.css',
        url : 'https://www.domain.com/',
        width : 640,
        height : 400
    }
},

concat: {
    options: {
        separator: ';',
    },
    dist: {
        src: [
            'css/abovethefold/*.css'
        ],
        dest: 'css/inline.raw.css',
    },
},

grunt.registerTask( 'abovefold', [ 'clean:abovethefold', 'penthouse', 'concat', 'cssmin:inline_raw', 'cssmin:inline', 'replace:inlinecss' ] );

The configuration is for multiple dimensions. You could also use it for multiple pages.

Best Regards,
Jan Jaap