WordPress на Китайском — или мой опыт разработки сайтов для Китая

Сегодня я хочу продолжить серию постов о WordPress — одной из наиболее лучших CMS систем в решении задач для большинства клиентов.

Никоим образом я не начну утверждать что WP панацея, или то что мы в 2016 году были в TOP 7 Рунета как разработчики WordPress и  поэтому нужно выбрать именно эту цмс систему и заказать сайт у нас, нет я просто расскажу про свой опыт работы с сайтом на базе вордпресс именно для поднебесной…

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

Мозги в Украине а производство в Китае

У нас стояла совсем банальная задача, правки проекта на WordPress, казалось бы как обычно, да нет. Клиент настолько тщательно и щепетильно отнесся к своему интернет представительству (business page, Geschäftsstandort, witryna biznesowa) что это вызывало особое желание продолжать. Как на меня, то именно так и должно быть. Мы выполнили задачу и радостно «пожав руки» — фигурально, по окончанию распрощались.

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

Понятно что мы согласились,  и с удовольствием нырнули в ранее неведомое нам, прямо: в Интернет поднебесной…

В разговоре звучало: Может быть сложный доступ к хостингу, так как в самом Китае интернет немыслимой скорости а вот доступ из вне слегка усугублен.

Первая встреча с Китайским хостингом:

Радостно ищем место входа в хостинг)

Воспользовавшись переводчиком, мы авторизовались и приступили к работе:

Панель входа все же приводила в легкое недоумение.

Делая данный материал, я случайно заметил надпись English

English — это всего лишь надпись, при переходе, происходит два редиректа и вы возвращаетесь к китайской версии.

Я тоже пришел в недоумение, почему просто не выбрать Английскую версию.

Да и сегодня обсуждая за чашкой кофе свой опыт работы с китайским хостингом со своим Другом я услышал аналогичный вопрос: «Так нужно было выбрать английский, да и все…»

Я выбрал English — произошел редирект, на ен версию, после выбора входа в панель, вернуло на китайский, в недоумении сделал еще несколько попытов выбора английской и возвращаясь к единственному языку интерфейса — Китайскому, у меня даже закралось сомнение что я начал его понимать : )

И только после того как я увидел всем известную Cpanel — я расслабился.

Cpanel — на всех языках одинаковая 🙂

Ну вот казалось бы и все!

Домен зарегистрировали, хостинг купили, с администрированием хостинга разобрались, склонировать сайт на WordPress без проблем.

Хотя FTP к китайскому хостингу слегка и медленный, но приемлемый для загрузки копии сайта.

Оказывается нет! В Китае для того что б опубликовать сайт необходимо получить сертификат

Подтверждение от правительственной организации на право регистрации домена в зоне .CN мы ждали более 14 дней : )

И что самое приятное в этой ситуации что Наши конструкторские бюро, наши ВордПрессы одни из ведущих на рынке Поднебесной! Несмотря на все сложности вхождения и высокий уровень конкуренции.

PAGESPEED INSIGHTS: СОКРАТИТЕ CSS УСКОРЕНИЕ САЙТА НА WORDPRESS (ВОРДПРЕСС) ПРАКТИКА

В продолжение серии статей по практическому ускорению интернет ресурсов в соответсвии с рекомендациями поисковых систем.

До начала работы:

Все супер мы справились — грабли нам вставил виджет Битрикс24

Эдинственный файл с CSS кодом — который в силу того что находится на стороннем сервере мы оптимизировать не можем…

Но как говориться: Толи еще будет … и Google PageSpeed Insight покажет нам зеленую линию

Сервисы которые рекомендуем для ручной оптимизации CSS кода:

https://cssminifier.com/

PAGESPEED INSIGHTS: ИСПОЛЬЗУЙТЕ КЕШ БРАУЗЕРА УСКОРЕНИЕ САЙТА НА WORDPRESS (ВОРДПРЕСС) ПРАКТИКА

PAGESPEED INSIGHTS: ИСПОЛЬЗУЙТЕ КЕШ БРАУЗЕРА УСКОРЕНИЕ САЙТА НА WORDPRESS (ВОРДПРЕСС) ПРАКТИКА

Все кто сталкивался с задачей оптимизации сайта на WordPress читали рекомендацию Google Page Insight:

Используйте кеш браузера

И все его пытались использовать, и результат был если не маленький то нулевой. В данной статье мы в деталях приведем практический опыт ускорения сайта при правильном формировании .htaccess

И так начнем: имеем проект, имеем пожелание Google

Использование «кеша» браузера для ускорения скорости загрузки WordpPress

Изначально в .htaccess ВордПрес по умолчанию следующий код:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Добавляем магические строки:

#
# Sources:
# http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites
# http://codex.wordpress.org/Output_Compression
# http://www.perun.net/2009/06/06/wordpress-websites-beschleuinigen-4-ein-zwischenergebnis/#comment-61086
# http://www.smashingmagazine.com/smashing-book-1/performance-optimization-for-websites-part-2-of-2/
# http://gtmetrix.com/configure-entity-tags-etags.html
# http://de.slideshare.net/walterebert/die-htaccessrichtignutzenwchh2014
# http://de.slideshare.net/walterebert/mehr-performance-fr-wordpress
#

<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf 
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json 
AddOutputFilterByType DEFLATE font/opentype 
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon 

# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png)$ no-gzip dont-vary

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>

</IfModule>


## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 month" 
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 minute"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds" 
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 
ExpiresByType text/cache-manifest "access plus 0 seconds" 
ExpiresByType audio/ogg "access plus 1 month" 
ExpiresByType video/mp4 "access plus 1 month" 
ExpiresByType video/ogg "access plus 1 month" 
ExpiresByType video/webm "access plus 1 month" 
ExpiresByType application/atom+xml "access plus 1 hour" 
ExpiresByType application/rss+xml "access plus 1 hour" 
ExpiresByType application/font-woff "access plus 1 month" 
ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 
ExpiresByType application/x-font-ttf "access plus 1 month" 
ExpiresByType font/opentype "access plus 1 month" 
</IfModule>
## EXPIRES CACHING ##


#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|html|htm)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>


<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>


<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

# Set Keep Alive Header
# This *just* sets the header - maybe your hoster is not allowing this feature
# Please check if it is working with tools like http://www.webpagetest.org
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c> 
  <IfModule mod_headers.c> 
    Header unset ETag 
  </IfModule> 
  FileETag None 
</IfModule>

Результат:

Пускай еще не Google Green )) но шаг вперед мы сделали.

В рекомендации остались только ссылки из сторонних сервисов, то есть приведенное выше решенеи однозначно работает.

Источник: https://gist.github.com/Zodiac1978/3145830

Обсуждение: http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites

Следуйте рекомендациями поисковых систем, делайте свои сайты еще лучше!!!

NOTES 8. AMP — ИЛИ ТО О ЧЕМ НАМ РЕКОМЕНДОВАЛ GOOGLE ЕЩЕ В 2015 ДЛЯ 100КА В 2015 И ЧТО УЖЕ РЕКОМЕНДУЕТСЯ ДЛЯ ВСЕХ

Нужно ли иметь на сайте AMP ?

Еще в феврале 2016 года я консультировал несколько проектов посещаемость которых в пиковый момент превишала более 100 000 человек в сутки.

Просматривая почту я получил сообщение от Google Webmaster

О AMP (accelerate mobile pages) мы уже тогда слышали, но никто не принимал данный фактор во внимание.. Ясное дело что мы обсудили данный вопрос и приняли решение не внедрять данный формат, так как возникал ряд вопросов.

Через несколько месяцев в разговоре с несколькими сео специалистами все чаще и чаще проскакивали фразы AMP, были «специалист» которые называли AMP дублями : )

Уже  31 07 2016 когда все сое специалисты услышали про АМР, были еще чудаки которые считали их дублями)

Уже после анонсирования Accelerate Mobile Page в Google Webmaster панели на их все больше и больше начали обращаться внимание!

Вот мы решили провести эксперементы над своим проектом:

 

NOTES 7. ТО О ЧЕМ НЕ ГОВОРЯТ, НО ОНО ЕСТЬ LAST MODIFIED WORDPRESS

Вот так не должно быть:

Я не стану копировать все уже давным дано написанное до нас, единственно на что еще раз бы хотелось акцентировать внимание:

 

Экономия Трафика

Снижение нагрузки на сервер

Ускорение индексации поисковыми системами

Поисковые системы через руководство для вебмастеров рекомендуют отсылать заголовок Last-Modified и правильно обрабатывать If-Modified-Since.

Если первые два пункта для Вас не аргумент (для меня тоже: трафика хоть залейся, если будет перелемит я с удовольствием его докуплю, нагрузка на сервера — я думаю за результатом команды htop вряд ли кто то  наблюдает).

Но нужно понимать даже и эти два пункта становятся мега критично Важными когда у Вас большой ресурс и большой трафик.

И более всего привлекает последний третий пункт: о котором настоятельно рекомендует задуматься не только документация Google Webmaster но и Яндекс

Я бы не акцентировал внимание на данный параметр оптимизации сайта на вордпресс, если бы не имел практический опыт решения подобных задач.

Чуть позже я напишу, почему я так глубоко изучил этот вопрос, и так пристально обратил внимание на «хотелку» сеошника (сеошников, повторюсь это требование звучало от нескольких сео специалистов).

NOTES 4. WORDPRESS TEMPLATE DIFFERENT HEADER.PHP

Сегодня мы кратко расскажем как оптимизировать процесс натяжки верстки на ВордПресс, и что делать если на сайте есть разнотипные Хидеры и Футеры ?

NOTES 2. CUSTOM MENU — ИЛИ КАК МЕНЮ ИЗ ВЕРСТКИ ПРЕВРАТИТЬ В ПРОИЗВОЛЬНОЕ МЕНЮ WORDPRESS

Полетели:

У нас готова верстка? бинго что далее, у нас есть созданная тема для нашего клиента: Название, версия темы, подбор части стандартных функции, функции для оптимизации скорости загрузки ВордПресс

Мы готовы создавать динамический — полностью управляемый сайт !

<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'allbb' ); ?></a>

		<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
...

  <div class="navbar-inverse side-collapse in">
      <nav role="navigation" class="navbar-collapse">
		
...
<!-- Все тоже самое но в динамически редактируемом МЕНЮ ВордПресс -->
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', 'items_wrap' => '<ul class="nav navbar-nav">%3$s</ul>' ) ); ?>

<!-- Все тоже самое но в статическом HTML -->
		    <ul class="nav navbar-nav">
			<li><a href="#Home">главная</a></li>
			<li><a href="#">мужчины</a></li>
			<li><a href="#">женщины</a></li>
			<li><a href="#">чемпионаты</a></li>
		        <li><a href="#">анкета</a></li>
			<li><a href="#">контакты</a></li>                                  
                        </ul>
        </nav>              
  </div>
. omeprazole 40 mg.
</header>

 

NOTES 1. С ЧЕГО НАЧИНАЕТСЯ РАБОТА НАД ПРОЕКТОМ НА БАЗЕ CMS WORDPRESS ? HEADER.PHP

Мы много лет занимаемся разработкой сайтов, более 90% проектов мы выполняем на платформе WP, из нашего многолетнего опыта мы можем утверждать что есть довольно сложные задачи которые можно решить на данной CMS системе, которую принято называть «сайт на вордпресс», но есть задачи для решения которых лучше использовать другие CMS.

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

И так полетели, но помним что есть на свете Google Page Insight  — и он нам судья:

Header.php

1. Добавляем Bootstrap CDN

JS — понятное дело перемещаем в самую нижнюю часть сайта

Google Page insight - ласкаво рекомендует нам использовать CDN jQuery :)

Google Page insight — ласкаво рекомендует нам использовать CDN jQuery 🙂

2. Отключаем стандартны jQuery WP  и подключаем jQuery Google CDN

В сети существует множество рекомендаций по решению этой задачи, мы перебрали несколько вариантов и отдали предпочтение самому оптимальному:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
// вместо "jquery-core" просто "jquery", чтобы отключить jquery-migrate
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}

* Обратите внимание: можно брать весь jQuery-core а можно ограничиться только вызовом самого jQuery.

Казалось бы все супер, да нет Google настоятельно рекомендует переместить Js скрипты с верхней части, проще говоря: Переинклюдить Js с Хедера в Футер в ВордПрессе.

Ищем, пробуем и используем следующее решенение, в конце файла Functions.php дописываем:

if(!is_admin()){
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);
  
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
}

В результате получаем перемещение всех Js скриптов в нижнюю часть, и работоспособный ресурс.

Все бы ничего, если бы Google не продолжал рекомендовать: Оптимизировать работу CSS (при этом они берутся из его же CDNок : )

wordpress-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d1%8b-css-%d1%87%d0%b5%d1%80%d0%b5%d0%b7-cdn

Мы перемещаем Bootstrap css в нижнюю часть сайта и УРА!

GOOGLE  Green LINE

* Подключение CDN Bootstrap лучше всего делать через Function.php и так же как и JS переопределять в Footer. В следующем проекте мы обязательно это сделаем, ну а пока наслаждаемся тем к чему стремятся многие но не многие могут сделать — ЗЕЛЕНАЯ ЛИНИЯ по ГУГЛ.

google-page-insight-mobile-87-100

Хотите что б Ваш сайт так же быстро работал и получил преимущества в поисковой выдачи?

Подведем краткий итог:

в результате мы получили следующее содержимое Header.php

<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage AllBB
 * @since AllBB 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php endif; ?>

	<?php wp_head(); ?>
</head>
...

Ну и нельзя не показать содержимое Footer.php

	</footer><!-- .site-footer -->
	</div><!-- .site-inner -->
</div><!-- .site -->


	
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="https://use.fontawesome.com/991d825c8c.js"></script>

<?php wp_footer(); ?>
</body>
</html>