Javascript wordpress上的优化建议和AJAX加载

Javascript wordpress上的优化建议和AJAX加载,javascript,php,jquery,ajax,wordpress,Javascript,Php,Jquery,Ajax,Wordpress,我目前正在完成使用wordpress 3.8制作的公文包,并定制团队的模板(Twenty14),因为这是我第一次尝试使用wordpress做一些很酷的事情。 去那里看看: 最后一部分是关于优化的。我已经和我的主机争论了一点,因为在接收第一个字节之前等待了很长时间。这是他们的缺点,在他们添加了一些其他服务器之后,情况发生了一些变化。我使用了W3 Total Cache来提高一点速度,并设置了Cloud Flare。我真的不知道这是不是一个好的做法 问题是我做了一个AJAX导航。我不知道我是否用了好

我目前正在完成使用wordpress 3.8制作的公文包,并定制团队的模板(Twenty14),因为这是我第一次尝试使用wordpress做一些很酷的事情。 去那里看看:

最后一部分是关于优化的。我已经和我的主机争论了一点,因为在接收第一个字节之前等待了很长时间。这是他们的缺点,在他们添加了一些其他服务器之后,情况发生了一些变化。我使用了W3 Total Cache来提高一点速度,并设置了Cloud Flare。我真的不知道这是不是一个好的做法

问题是我做了一个AJAX导航。我不知道我是否用了好方法。。。为什么? 也许我们会为您更改以下数字,但是:

-当我第一次加载网站时,在清理缓存后,加载大约需要4秒钟。 -当我点击一个项目链接/和/或另一个页面时,它是使用ajax加载的,但需要花费更多的时间

为什么要花这么多时间?我该怎么做才能改变这一点?使用AJAX应该能够平稳地加载内容,如果需要花费更多的时间,那么使用AJAX就没有什么好处

以下是我的js代码:

jQuery(document).ready(function($) {

    $(window).hashchange( function(){

        //finding the link
        var arg = window.location.hash.substring(3);
        var link = 'http://micheldidier.com/'+arg; //replacing root URI !!

        //requete ajax
        $.ajax({  
            url:link,
            processData:true, //Object result
            dataType:'html', //type html
            async: true, 
            complete: function(xhr, text) {},
            cache: true,
            error: function(xhr, text, e) {},
            global: true,
            headers: {},
            statusCode: {},
            success:function(data){
                // callback
                data = innerShiv(data,false);
                var thecontent = $(data).find("#content-article");
                var title = $(data).filter('title').text();
                document.title = title;
                $('#content-home').slideToggle('slow',function(){
                    $(this).html(thecontent).slideToggle('slow', function(){
                        $.scrollTo('#content-article', 600);
                        return false;
                        });
                });
            }
         });
    });

    //hash onload
    if(window.location.hash.substring(3)!=''){
        $(window).trigger( 'hashchange' );
    }
我要问的问题是,如果问题仍然是因为我的主人。因为我的jQ?还是因为PHP

以下是我的主页PHP代码:

get_header(); ?>

<div id="main-content" class="main-content">
<div id="top-sidebar" class="top-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-4' ); ?>
</div><!-- #top-sidebar -->
<div id="content-home"></div>
<?php
    if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
        // Include the featured content template.
        get_template_part( 'featured-content' );
    }
?>
<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
        <?php
            if ( have_posts() ) :
                // Start the Loop.
                while ( have_posts() ) : the_post();

                    /*
                     * Include the post format-specific template for the content. If you want to
                     * use this in a child theme, then include a file called called content-___.php
                     * (where ___ is the post format) and that will be used instead.
                     */
                    get_template_part( 'content-home', get_post_format() );

                endwhile;
                // Previous/next post navigation.
                twentyfourteen_paging_nav();

            else :
                // If no content, include the "No posts found" template.
                get_template_part( 'content', 'none' );

            endif;


        ?>
    </div><!-- #content -->
</div><!-- #primary -->
</div><!-- #main-content -->
<?php get_footer();
    if ($_GET["ajax"]==true) get_template_part('header-ajax');
else get_header(); ?>


    <div id="primary" class="content-area">
        <div id="content-article" class="site-content" role="main">
            <?php
                // Start the Loop.
                while ( have_posts() ) : the_post();

                    /*
                     * Include the post format-specific template for the content. If you want to
                     * use this in a child theme, then include a file called called content-___.php
                     * (where ___ is the post format) and that will be used instead.
                     */
                    get_template_part( 'content', get_post_format() );

                    // Previous/next post navigation.
                    twentyfourteen_post_nav();

                endwhile;
            ?>
        </div><!-- #content -->
    </div><!-- #primary -->

<?php
get_sidebar( 'content' );
get_sidebar();
get_footer();
get_header();?>

请记住,使用ajax请求页面的方式与通常请求页面的方式相同,只是脚本/样式表/图像在添加到页面之前不会开始加载。如果在资源开始加载之前检索请求通常需要4秒,那么仍然需要4秒。如果在ajax请求之后使用.html()方法绘制大量内容,则可能只是浏览器需要一段时间来渲染。我不熟悉wordpress的所有可用功能,但是,您可以通过检测(可能在模板中?)请求是ajax请求还是普通请求来减小请求的大小,如果是ajax请求,则只返回ajax请求所需的内容,而不是所有内容。因此,在我的“单页”PHP中,例如,我应该只将此内容,由于所有其他内容都是无用的,因此网站上的所有内容都使用AJAX加载: