Novinky na webu

Volné pokračování optimalizací a úprav. S WordPressem už jsem docela kamarád, a tak se mohu směle pouštět i do pokročilejších zásahů.

Co se tedy změnilo od článku WordPress. Nastavení, tipy a pluginy co jsem použil?

Šablona

Když to vezmu od konce tak šablona Hueman zůstala (i když se nám mezitím objevila placená verze PRO). Je to neuvěřitelné, ale stále vychází nové a nové verze. Standardně umí česky, a taky se naučila vlastní CSS, takže odpadlo přilepování vlastního stylu přes Proč a jak na vlastní plugin pro WordPress.

Pluginy

Broken Link Checker zůstal, ale je disablován, s tím, že ho pustím tu a tam ručně. All In One WP Security, zatím funguje, takže zůstal. Randomize nahradil Quotes Collection, ani už nevím proč. Redirection zůstává a funguje. Responsive Lightbox se taky osvědčil a není důvod hledat alternativu.

SyntaxHighlighter Evolved nahradil Crayon Syntax Highlighter – je prostě nejlepší, umí všechno už v základu a má spoustu nastavení. Enlighter, uvidíme, Crayon má těch nastavení až moc, a třeba na telefonu byl ten kód vždy nějaký divný.

Taky jsem vyměknul a nahradil The SEO Framework Yoastem, prostě opravdu umí spoustu věcí sám od sebe, a tak odpadly nějaké pluginy a starosti jako sitemapy, sociální metatagy apd.

TinyMCE Advanced taky není důvod měnit, WP Smush je základ sice zmenšuje, ale vždy mi nějaký měřič webu povídal, že by šly obrázky ještě zmenšit (klidně i o 20%), pokud nechcete placený Optimus, tak se hodně chválí Shortpixel (odkaz by vám i mě měl přidat 100 kreditů), tak uvidíme. Jinak free plán je 100 obrázků za měsíc, což asi většině bude stačit.

Roboti

Kromě robots.txt jsem přihodil i humans.txt.

Steroidy

No a jak dopadly všechny ty W3 Total Cache, WP Super Cache, a další pokusy se zrychlováním webu a honbou za vyšším skóre?

Vyhodil jsem WP Super Cache, nahradil jedním zápisem do .htaccess a výsledek je stejný – a to nekešuju, takže odpadly problémy s neaktualizací hlášek.

# Browser Caching – Add Expire Headers to WordPress, https://www.keycdn.com/blog/speed-up-wordpress
<IfModule mod_expires.c>
  # Enable expirations
  ExpiresActive On 
  # Default directive
  ExpiresDefault "access plus 1 month"
  # My favicon
  ExpiresByType image/x-icon "access plus 1 year"
  # Images
  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"
  # CSS
  ExpiresByType text/css "access plus 1 month"
  # Javascript
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

# Gzip Compression, https://www.keycdn.com/blog/speed-up-wordpress
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Jen jsem se s tím tedy hodně natrápil, protože to pořád ne a ne fungovat, a nevím zda to není jen záležitosti hostingu u OneBitu, ale musel jsem po konzultaci s podporou vytvořit soubor .user.ini s obsahem zlib.output_compression = on pak už se vše rozeběhlo.

Taky jsem se trápil s Autoptimize na minifikování JS a CSS, pořád mi to házelo 404ky, buď se to tlouklo s cachovacím pluginem, nebo se mi nepodařilo najít ten správný JS/CSS na vyloučení z optimalizace – nyní tedy nahrazeno Fast Velocity Minify a testujeme.

Headers

Když už jedeme na HTTPS, tak to chtělo poladit Security Headers, a z nějakého důvodu mi některé nešly nastavit přes .htaccess, takže jsem vše nacpal přes ten vlastní plugin. Největší trápení je s Content-Security-Policy, tomu se pro začátek raději vyhněte.

/*
 * Security Headers plugin
 * https://wordpress.org/plugins/security-headers/
 * https://benrabicoff.com/
 */
function send_headers() {
  // Prevent MIME-Type Sniffing
  send_nosniff_header(); // .htaccess: Header set X-Content-Type-Options nosniff # nejde
  // Block Access If XSS Attack Is Suspected
  header("X-XSS-Protection: 1; mode=block"); // .htaccess: Header set X-XSS-Protection "1; mode=block" # nejde
  // Prevent Clickjacking
  send_frame_options_header(); // .htaccess: Header always append X-Frame-Options SAMEORIGIN # jde!
  // Enforce the use of HTTPS
  header("Strict-Transport-Security: max-age=31536000; includeSubDomains"); // .htaccess: Header set Strict-Transport-Security "max-age=31536000" # jde!
  // Referrer Policy
  header("Referrer-Policy: no-referrer-when-downgrade");
  // Prevent XSS Attack, https://walterebert.com/blog/using-csp-wordpress/
  $csp  = "default-src 'self'; ";
  $csp .= "img-src 'self' data: http: https: disqus.com *.disqus.com *.disquscdn.com *.google-analytics.com; ";
  $csp .= "script-src 'self' 'unsafe-inline' 'unsafe-eval' https: disqus.com *.disqus.com *.disquscdn.com *.google-analytics.com *.jsdelivr.net *.gstatic.com; ";
  $csp .= "style-src 'self' 'unsafe-inline' https: disqus.com *.disqus.com *.disquscdn.com; ";
  $csp .= "font-src 'self'; ";
  $csp .= "frame-src 'self' https: disqus.com *.disqus.com *.disquscdn.com; ";
  $csp .= "connect-src 'self' https: disqus.com *.disqus.com *.disquscdn.com; ";
  // FF 23+ Chrome 25+ Safari 7+ Opera 19+
  header("Content-Security-Policy: " . $csp);
  // IE 10+
  header("X-Content-Security-Policy: " . $csp);
}
add_action('send_headers', 'send_headers', 1);

Dále odebrány nějaké ty zbytečnosti

/*
 * Remove unnecessary things from header
 * https://orbitingweb.com/blog/remove-unnecessary-tags-wp-head/
 * https://affinite.io/cs/odstraneni-defaultnich-informaci-z-headeru-wordpress-sablony/
 */
add_action('wp', function(){
  remove_action( 'wp_head', 'rsd_link' ); // <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.mikrom.cz/xmlrpc.php?rsd" />
  remove_action( 'wp_head', 'wlwmanifest_link' ); // <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.mikrom.cz/wp-includes/wlwmanifest.xml" /> 
  //remove_action( 'wp_head', 'wp_shortlink_wp_head' ); // <link rel='shortlink' href='https://www.mikrom.cz/?p=2971' />
  //remove_action( 'wp_head', 'wp_generator' ); // <meta name="generator" content="WordPress 3.4.2">
  //remove_action( 'wp_head', 'index_rel_link' ); // index link
  //remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); // prev link
  //remove_action( 'wp_head', 'start_post_rel_link', 10, 0 ); // start link
  //remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 ); // Display relational links for the posts adjacent to the current post.
  //remove_action( 'wp_head', 'feed_links_extra', 3 ); // Display the links to the extra feeds such as category feeds
  //remove_action( 'wp_head', 'feed_links', 2 ); // Display the links to the general feeds: Post and Comment Feed
}, 9);

Odebráno XML-RPC, odebrány verze skriptů, ale to je v každém takovémhle návodu.

Taky jsem opravil CookieBar, který voláním freegeoip strašně kazil výsledky na GTMetrix, Pingdom apd.

/*
 * Cookie Bar
 * https://cookie-bar.eu/
 */
function _add_cookie_bar() {
  wp_register_script( 'cookiebar', '//cdn.jsdelivr.net/cookie-bar/1/cookiebar-latest.min.js?theme=grey&scrolling=1&noGeoIp=1', '', '', true );
  wp_enqueue_script( 'cookiebar' );
}
add_filter( 'wp_enqueue_scripts', '_add_cookie_bar' );

Disqus

Zkusil jsem nasadit nový systém komentářů! Disqus je všude možně, lze se přihlásit kdejakým účtem (pokud chci mít info o odpovědi), nebo lze komentovat i bez přihlášení. Plugin Disqus Conditional Load nastaven bez větších potíží a paradoxně i přes to, že obnáší načítání dalšího balastu odněkud z webu, tak je ale znatelně rychlejší než načítání gravatarů v komentářích od WordPressu. Ano ty jdou vypnout, ale já chtěl obrázky. Ano dosáhnul jsem jich přes WP User Avatar. Ale takhle jsem mohl zakázat i Akismet. A ještě

// Remove comment-reply.min.js from footer, https://www.keycdn.com/blog/speed-up-wordpress
function comments_clean_header_hook(){
  wp_deregister_script( 'comment-reply' );
}
add_action('init','comments_clean_header_hook');

Závěr

Výsledkem je tedy nyní 17 aktivních pluginů a ještě lepší výsledek oproti Jak bylo náročné zrychlit WordPress.