Ускорение и добавление функциональных сниппетов в Magento

Эта статья будет частью серии под названием Magento SEO.

На данный момент мы проделали большую работу, направленную на то, чтобы оптимизировать наш веб-сайт с точки зрения SEO. В третьей части данной серии вы узнаете, как оптимизировать Magento, чтобы уменьшить время загрузки страниц, и как интегрировать полезные сниппеты, чтобы страницы в выдаче поисковых систем выглядели более профессионально.

Увеличение скорости

Сокращение времени загрузки страницы будет проблемой для всех веб-разработчиков. Будучи гигантской CMS, Magento работает не быстро, но, внеся небольшие изменения, вы сможете без труда увеличить производительность.

Сокращение времени загрузки страницы надо не только для увеличения популярности среди посетителей и уменьшения показателя отказов, это также помогает достичь более высоких позиций в поисковых системах.

С 2010 года Google в определении рейтинга страниц придает особое значение времени загрузки страницы веб-сайта. В данной статье мы кратко обсудим некоторые простые методы уменьшения времени загрузки страниц Magento.

Быстрый и простой метод сделать Magento веб-сайт быстрым — это внести пару небольших изменений в панели администрирования. Прежде всего, необходимо включить кэш Magento. Только этот маленький шаг сможет сократить время загрузки страниц на 30-40%.

При включенном кэше Magento может не загружать все страницы ресурса с сервера при каждом запросе. Чтобы включить кэш Magento перейдите в Система — Управление кэшем. Выберите все типы кэша и в выпадающем меню в правом верхнем углу панели администрирования выберите действие «Включить», после чего нажмите кнопку «Подтвердить»:

Ускорение и добавление функциональных сниппетов в Magento Во-вторых, нам необходимо объединить файлы CSS и JS до вывода страницы. Переходим в Система – Конфигурация — Разработчик. Здесь вы увидите опции «Слияние файлов JavaScript» и «Слияние файлов CSS». Установите для данных полей ввода значение «Да» и нажмите «Сохранить»:
Ускорение и добавление функциональных сниппетов в Magento Объединение CSS и JS файлов сможет сократить число запросов к серверу во время загрузки страницы. Это также существенно сократит время загрузки.

Далее, мы будем запускать процесс компиляции Magento. Функцию компиляции Magento компилирует все файлы Magento, чтобы создать один путь include для повышения производительности. Это уменьшает время загрузки страницы на 25-50%.

Для того чтобы использовать этот инструмент, для папки includes и файла includes/config.php должно быть разрешено внесение изменений.

Чтобы начать процесс компиляции, выберите пункт Система – Сервис — Компиляции. В правом верхнем углу вы увидите кнопку «Запустить процесс компиляции». Нажмите эту кнопку и процесс запустится:

Ускорение и добавление функциональных сниппетов в Magento Далее мы должны произвести пару дополнительных действий для сокращения времени загрузки страниц, которые потребуют изменений в файле .htaccess. В папках Magento может быть пару файлов .htaccess, но здесь мы будем редактировать один из них, тот, что расположен в корневой директории.

Через файл .htaccess мы сначала зададим кодировку контента, которая будет сжимать файл перед отправкой его запрашивающему агенту. Это сможет уменьшить время загрузки файлов. Во-вторых, мы добавим в заголовках продолжительность их действия. Это означает, что при загрузке ресурсов браузер будет проверять заголовки. Если срок действия заголовков не истек, то будет использоваться кэшированная версия.

Чтобы включить сжатие, выведите из комментариев эту строку кода в файле.htaccess по умолчанию, то есть удалите символ # перед php_flag zlib.output_compression on:

############################################ # enable resulting html compression php_flag zlib.output_compression on############################################

Далее, чтобы привести в действие gzip-сжатие, мы добавляем в файл .htaccess следующие строки:

############################################ # Inserting filter on all content SetOutputFilter DEFLATE # Inserting filter only on selected content types AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Tackling some Netscape 4.x problems BrowserMatch ^Mozilla/4 gzip-only-text/html # Tackling some Netscape 4.06-4.08 problems BrowserMatch ^Mozilla/4.0[678] no-gzip # Scenario: MSIE masquerades as Netscape BrowserMatch bMSIE!no-gzip!gzip-only-text/html   # Command for not compressing images SetEnvIfNoCase Request_URI.(?:gif|jpe?g|png)$ no-gzip dont-vary    # Handling Proxies correctly Header append Vary User-Agent env=!dont-vary############################################

И в конце давайте зададим лимит действительности для заголовков, добавив в файл .htaccess следующий код:

############################################<IfModule mod_expires.c>    # First of all enable expirations ExpiresActive On    # Default expiration ExpiresDefault "access plus 1 month"    # For favicon ExpiresByType image/x-icon "access plus 1 year”    # Set Images Expiry ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    # Set CSS Expiry ExpiresByType text/css "access 1 month”    # For Javascript Expiry ExpiresByType application/javascript "access plus 1 year"</IfModule>############################################

Ещё одна важная вещь для повышения скорости Magento магазина — это выбор сервера. В данной статье подробно разъяснены факторы, которые следует учитывать при выборе сервера под Magento.

Реализация функциональных сниппетов

Сейчас пришло время разработать метод реализации схем — или функциональных сниппетов — в нашем Magento магазине. Они не только придадут результатам поиска более профессиональный вид, но это также сможет вам увеличить число переходов со страниц поиска.

В данной статье мы будем интегрировать следующие функциональные сниппеты: товары, предложения и средние рейтинги. А, в конце концов, я дам вам пару ссылок на ресурсы, при помощи которых вы сможете реализовать «хлебные крошки» и схемы размещения товаров.

По умолчанию результаты поиска в поисковых системах выглядят следующим образом:

Ускорение и добавление функциональных сниппетов в Magento
Реализовав функциональные сниппеты, вы можете без труда придать им такой вид:
Ускорение и добавление функциональных сниппетов в Magento
Имейте в виду, что реализация данных рекомендаций потребует редактирования файлов шаблонов. Для их реализации вы должны иметь базовые знания по HTML и PHP. Кроме того, убедитесь, что перед редактированием вы сохранили резервную копию каждого файла.

Мы начнем с реализации схемы размещения продукта. Откройте в редакторе этот файл:

app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml и добавьте выделенный код в класс product-view:

<div class="product-view" itemscope itemtype="http://schema.org/Product" itemid="#product_base">

Сейчас давайте зададим теги для названия товара, описания и картинки. Чтобы задать теги для названия продукта, найдите тег h1, содержащий название продукта, и добавьте в него следующий код:

<h1 itemprop="name">    <?php echo $_helper->productAttribute($_product,$_product->getName(), 'name')?></h1>

Сейчас, чтобы задать теги для описания, найдите div описания продукта и убедитесь, что он содержит атрибуты со следующим кодом:

<div class="std" itemprop="description">    <?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description')?></div>

Далее, в файле app/design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml, найдите теги картинки(если вы используете тему по умолчанию, вы найдете их в двух местах — в строках 40 и 62), и включите в них следующее:

$_img = '<img itemprop="image" id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';$_img = '<img itemprop="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';

Сейчас, мы добавим информацию о среднем рейтинге товара. Для этого откройте этот файл: app/design/frontend/[package]/[theme]/template/review/helper/summary.phtml.

Замените весь код в этом файле приведенным ниже кодом:

<?php if($this->getReviewsCount()):?>    <div class="product-view" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"        <?php if($this->getRatingSummary()):?>            <div class="rating-box">                <div class="rating" style="width:<?php echo $this->getRatingSummary()?>%"></div>            </div>        <?php endif;?>        <p class="rating-links">            <a href="<?php echo $this->getReviewsUrl() ?>"><?php echo $this->__('%d Review(s)', $this->getReviewsCount()) ?></a>            <span class="separator">|</span>            <a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>        </p>        <meta content="<?php echo $this->getReviewsCount();?>" itemprop="ratingCount">        <meta content="5" itemprop="bestRating">        <meta content="<?php echo <?php echo $this->getRatingSummary()*5/100 ?>" itemprop="ratingValue">    </div>    <?php elseif ($this->getDisplayIfEmpty()): ?>        <p class="no-rating">            <a href="<?php echo $this->getReviewsUrl() ?>#review-form">                <?php echo $this->__('Be the first to review this product') ?>            </a>        </p><?php endif; ?>

Сейчас, чтобы обеспечить отображение раздела предложений, откройте следующий файл: app/design/frontend/[package/[theme]/template/catalog/product/view/type/default.phtml.

Добавьте следующий код в начале, после первых комментариев (приблизительно в строке 28):

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">    <meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode();?>" />    <?php if ($_product->isAvailable()): ?>        <p class="availability in-stock">            <link itemprop="availability" href="http://schema.org/InStock">            <?php echo $this->__('Availability:') ?>             <span><?php echo $this->__('In stock') ?></span>        </p>     <?php else: ?>         <p class="availability out-of-stock">            <link itemprop="availability" href="http://schema.org/OutOfStock">            <?php echo $this->__('Availability:') ?>             <span><?php echo $this->__('Out of stock') ?></span>        </p>    <?php endif; ?>

И в конце файла добавьте следующий программный код:

</div><!—Offer Div ends -->

Чтобы добавить цену, откройте этот файл: app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml.

Добавьте в программный код соответствующие атрибуты в каждом экземпляре объекта классов price и regular-price . Для каждого экземпляра блока span с классом price мы добавляем следующий программный код:

<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"> <?php echo str_replace('class="price"', 'class="price" itemprop="price"', $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?>

Кроме того, для каждого span с классом regular-price мы добавляем в него следующий код:

<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"> <?php echo str_replace('class="price"', 'class="price" itemprop="price"', $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?>

Используя такой способ, вы также можете добавить функциональные сниппеты для меню навигации. При реализации данных схем размещения не забудьте их проверить. Вы можете легко использовать бесплатные инструменты тестирования от Google и Bing .

После того как вы реализуете все данные функциональные сниппеты, вы заметите значительное увеличение трафика на веб-сайте, если до того у вас были высокие позиции в поисковых системах.

Заключение

На данный момент у вас должен быть в полном объеме SEO -оптимизированный Magento веб-сайт с хорошим временем загрузки страницы и профессионально выглядящими результатами в поисковой выдаче.

В следующей статье данной серии я поделюсь некоторыми соображениями по поводу SEO для создания установок мульти-магазина для Magento . А также приведу краткий обзор некоторых полезных SEO -расширений для Magento .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *