AJAX-запросы для сайтов с высоким трафиком | Статьи, новости, обзоры плагинов, тем club762.ru

При перезапуске сайта PBS NewsHour мы добавили массу страничных компонентов, которые загружались через запросы AJAX. Наши функции были основаны на документации, представленной в кодексе для AJAX. К сожалению, используемый нами метод вызывал многочисленные проблемы, связанные с кэшированием, а также был ответственен за плохую производительность сайта.

В случае с NewsHour наши AJAX-запросы не зависели от пользователей, они просто подгружали различные блоки контента к страницам. К примеру, в сайдбаре у нас есть раздел «The Rundown», в котором выводятся наши самые свежие истории.

Вместо того чтобы использовать функцию для генерации этого «виджета» в сайдбаре на каждой странице, вы решили создать AJAX-виджет. Преимущество такого подхода заключалось в том, что WordPress-запросы для этого виджета нужно было выполнить всего один раз, после чего они кэшировались. Этот контент выводился на десятках тысяч страниц. Удаление его из сайдбара привело к большому приросту производительности. В дополнение к серверному кэшированию, браузерное кэширование помогло бы предотвратить загрузку тех же самых данных снова и снова конечным пользователем.

Где мы столкнулись с проблемой

Использование AJAX для регистрации функций вынуждает все запросы проходить через встроенную в WP функцию admin-ajax.php. В теории это работает великолепно, и в некоторых ситуациях без этого не обойтись, однако в нашем случае эти AJAX-запросы обходят кэширование, приводя к снижению скорости сайта.

В нашем случае AJAX запросы расшариваются между всеми посетителями сайта, и они видят все же самые виджеты сайдбара, а также пагинацию с «load more».

Нам требовалось лучшее решение, чтобы выполнять эти AJAX запросы

Наши сайты используют W3 Total Cache. Плагин W3TC не кэширует AJAX-запросы, проходящие через встроенный admin-ajax.php. Мы провели некоторую работу, чтобы наш AJAX-контент кэшировался в W3TC, что позволило кардинально улучшить скорость загрузки страниц.

В данном примере мы создадим компонент сайдбара, который будет выводить наши последние записи. Обычно разработчики просто помещают этот запрос в файл sidebar.php, однако в таком случае запрос будет выполняться всякий раз при загрузке страницы. Это недопустимо для сайтов с высоким трафиком. Вместо этого мы вынесем наш контент в небольшой AJAX-запрос, который будет выполняться только один раз за цикл кэширования.

Теперь мы можем закончить базовую настройку и создать виджет, который будет выводить 5 последних записей в нашем сайдбаре.

Установка

Шаг 1. Установка контроллера и файлов шаблона.

Регистрируем новый произвольный тип записей ajax для наших ajax контроллеров. Добавляем код в файл functions.php темы:

function custom_create_post_types() {
register_post_type('ajax', array(
        'labels' => array(
            'name' => __('Ajax'),
            'singular_name' => __('Ajax'),
            'search_items' => __('Search Ajax'),
            'add_new_item' => __('Add New Ajax'),
            'edit_item' => __('Edit Aax')
        ),
        'public' => true,
	'show_ui' => true,
        'has_archive' => false,
        'rewrite' => array('slug' => 'ajax'),
        'query_var' => true,
        'exclude_from_search' => true,
        'menu_position' => 20,
        'supports' => array('title'),
        'taxonomies' => array()
    ));
}
add_action('init', 'custom_create_post_types', 1);

Переходим к странице постоянных ссылок в админке, чтобы инициализировать новый путь для URL. Достаточно просто посетить страницу, что приведет к автоматическому обновлению ваших постоянных ссылок.

Создаем произвольный заголовок для AJAX. В корневой папке с вашей темой создайте header-ajax.php. Обратите внимание: объявление doctype очень важно. W3TC не будет кэшировать ваш контент без этого!

<?php
header('HTTP/1.1 200 OK');
show_admin_bar(false);
remove_all_actions('wp_footer', 1);
remove_all_actions('wp_header', 1);
?>
<!DOCTYPE html>

Создаем произвольный футер для AJAX. В корневой папке с вашей темой создайте footer-ajax.php:

<?php /* intentionally blank */ ?>

Создаем шаблон отдельной страницы для AJAX. В корневой папке с вашей темой создайте single-ajax.php.

<?php
	
get_header('ajax');

// note: we'll add content here later.

get_footer('ajax');

?>

Шаг 2. Создаем записи контроллера.

В админке WordPress выбираем Ajax из меню и добавляем новый пост. Присваиваем записи заголовок со слагом для вашего контроллера. К примеру, «recent-posts».

Теперь вы можете добавить строку в single-ajax.php, которая будет выполнять загрузку определенного AJAX-контроллера. Обратите внимание: в этом примере 12 – это id записи для recent-posts.

<?php

get_header('ajax');

if (is_single(array(12, 'recent-posts'))) {include (TEMPLATEPATH . '/ajax-recent-posts.php');}

/* you can add additional controllers here later */

get_footer('ajax');

?>

Теперь вы можете создать новый шаблон ajax-recent-posts.php. Этот файл будет включать в себя функцию для генерации и вывода шести последних записей:

<h3>Recent Posts</h3>
<ul>
<?php
$args = array('post_type' => 'post', 'orderby'  => 'date', 'order'  => 'asc', 'showposts'  => '6');
$my_query = new WP_Query($args); 
while ($my_query->have_posts()) : $my_query->the_post(); 
	$title = get_the_title( $post->ID );
	$permalink = get_permalink( $post->ID );
	echo "<li class='item'><a href='$permalink'>$title</a></li>";
endwhile; 
?>
</ul>

Шаг 3. Интеграция с темой.

В данный момент вы уже можете просмотреть ваш новый Ajax контроллер, посетив ссылку: http://yourURLhere/ajax/recent-posts/. Вы должны видеть результаты вашего произвольного запроса.

Чтобы добавить все это к своей теме, просто создайте пустой div в вашем сайдбаре, где вы хотите вывести данный контент:

<div id='ajaxrecentposts'><!-- recent posts loaded via ajax --></div>

Теперь вам нужно будет добавить немного jQuery-кода, чтобы вытащить ваш AJAX в этот div. Для начала добавьте следующий скрипт к вашему основному файлу header.php. Он добавит JS-переменную для шаблонов:

<script>var wpURL = "<?php echo get_bloginfo('wpurl'); ?>/";</script>

В javascript-файле для вашего сайта (или в футере) вы можете добавить вызов jQuery для обработки последних записей в сайдбаре. Сначала мы убеждаемся в том, что блок div id=”ajaxrecentposts” существует.

jQuery(document).ready(function($) {
	if ($("#ajaxrecentposts")[0]){
		$("#ajaxrecentposts").load(wpURL+'ajax/recent-posts/');
	}
});

Эта начальная установка может выглядеть несколько сложной, однако, как только вы сделаете ее, все остальное пойдет уже гораздо быстрее.

Источник: http://ieg.wnet.org