optimization on AnyStack

Optimize easily your WordPress images without any plugin

Sun, 23 Oct 2016 05:52:28 +0000

You want to improve your pagespeed score by optimizing your images in WordPress ? But you don’t want to pay a subscription for a plugin ? If you are using a VPS or a dedicated server, you don’t need any plugin to optimize all your images easily.

For that you can use this script :

# For debian/Ubuntu
wget -qO optimize.sh https://git.virtubox.net/virtubox/wp-optimize/raw/master/deb-wp-optimize.sh && bash optimize.sh

#For Centos/RedHat
cd /var/www
wget -qO optimize.sh https://git.virtubox.net/virtubox/wp-optimize/raw/master/centos-wp-optimize.sh && bash optimize.sh

If you want to do the process manually

# Debian/Ubuntu
apt-get update && apt-get install optipng jpegoptim -y

# Centos
yum update && yum install optipng jpegoptim -y

Then you just have to go in your web directory and to run the following commands :

cd /var/www
find . -name *.jp* | xargs jpegoptim --strip-all -m76
find . -iname '*.png' -print0 | xargs -0 optipng -o7 -preserve

Making WordPress faster by running wp-cron with Linux

Thu, 15 Sep 2016 05:54:00 +0000

WordPress use wp-cron to check updates for themes, plugins and some other process but it could have an impact on your website speed because WordPress execute it on every page-loading. So if you have a lot of traffic, it will (no benchmark proof at the moment) delay page loading for users.

So if you are using a linux server (VPS or dedicated), you can easily create a cron job to run it each 5 minutes or each 10 minutes. But remember WordPress need wp-cron to work properly, so don’t disable it totally !

To disable wp-cron, just add the following line in wp-config.php :

define('DISABLE_WP_CRON', true);

Then to add a cronjob you have to a :

## Run the crontab with your server or vhost user 
crontab -u yourserveruser -e

## method 1 : using curl to run the script
*/10 * * * * curl http://example.com/wp-cron.php > /dev/null 2>&1

## method 2 : using php to run it
*/10 * * * * cd /var/www/example.com/htdocs; php /var/www/example.com/htdocs/wp-cron.php > /dev/null 2>&1

The first method use PHP-CGI when the second use PHP-CLI, the only difference is CLI does not have time limit to run a script. Because this way, the wp-cron will not impact page loading speed, it’s highly recommended to use linux cron instead of default WordPress cron.

You can change */10 with */5 to run the cron each 5 minutes instead of each 10 minutes.

HTTP2 & Web Optimization - How to have a fast website in 2016

Thu, 11 Aug 2016 06:48:00 +0000

Few years ago, the HTTPs protocol was slower than the http, due the the initial handshake of any SSL transaction. But with the HTTP2, there are several improvements available and some rules have change when we talk about web optimization. Most of the PageSpeed tools will recommend you to use domain sharding or to combine your assets to have a website faster. But is it still true ?

The most important feature of the HTTP2 is the multiplexing, it allow to download multiple files with an unique TCP connection when we have to open a new one for each file in HTTP1.1

1) No more assets concatenation

We used to combine as much as possible our assets with HTTP1.1, that’s not true with HTTP2 anymore. Because if it reduce the size of the requests done, it also make the rules for caching harder to define and could have bad results if you don’t need a part of the assets on each page of your website

2) No more domain sharding

It was already a “trick” but the domain sharding is not a part of the past. It was used to open more TCP connection than a browser was supposed to. But you will have a negative result by using it with HTTP2 because it will only require unnecessary DNS request and more if the connection is established under TLS.

But there are also rules which are still Best Pratices to have a fast website

Reduce DNS lookup -> store all assets on the same domain or with a CDN
Browser Caching
Minimize HTTP Requests -> cookies and query strings
Minimize HTTP Response -> Minify your assets

New VPS for the Blog - Setup Guide

Fri, 05 Aug 2016 18:59:00 +0000

I was using a VPS with Plesk Onyx to host the Blog, but even with Redis in a Docker container to make it faster, it wasn’t enough …

So I have setup a small VPS on my dedicated server with Ubuntu 16.04 LTS using VMware vSphere 6. I will make another post about virtualization but in this post, we will talk only about the VPS setup with easyengine, which is really my favorite tool for WordPress setup. You can also read my first post about easyengine : Here

First step, easyengine install :

 wget -qO ee rt.cx/ee && bash ee

Then WordPress setup :

 ee site create anystack.xyz --wpredis --php7 --letsencrypt

And it’s already good for the server setup with nginx, php7, mariadb, redis-cache and let’s encrypt for the SSL. Check your DNS are pointing to your server before launching let’s encrypt or it will fail to setup the SSL certificate.

But the work is not finished yet, because I have to upload my database and my files to get my content back. For that i will need to have access to the database, so let’s do that with phpmyadmin :

 ee stack install --phpmyadmin

phpmyadmin is now available at http://my-server-ip:22222

Butt protected by an ACL, and to change the user and the password, you just have to use :

 ee secure --auth

And to have your login details for phpmyadmin :

 ee site info anystack.xyz

So I have now uploaded my database, and I need my files. But it’s not needed to install ftp. The easiest way to do, is to add a password to www-data and to allow sftp access :

 passwd www-data

And you will just have to replace /usr/sbin/nologin by /bin/bash in the file /etc/passwd. As FTP/SFTP client, I use Cyberduck which is the fastest client I have found, and you can use it for almost all protocol, including S3 storage at AWS or Google Drive.

After uploading my files, just have to purge the redis cache, and that’s already over.

How Cloudflare speed up and protect your website - Part 1.

Mon, 01 Aug 2016 18:57:00 +0000

You don't know what is Cloudflare ? So let's see how cloudflare make your website loading faster, and why you should already use it for all your websites.

) Cloudflare DNS - Free & Fast

Cloudflare provide at first one of the best DNS hosting service available. And to make a website faster you can already start with using a fast DNS hosting.

DNS Provider Speed Comparison by solvedns.com

![/images/2016/10/draw.jpg)

It's only few Milliseconds but as you can see, Cloudflare is faster than many other providers and most of them offer paid services only. So before paying few dollars for a Premium DNS package, you should try cloudflare. Another feature you will love, is a propagation time around 5 minutes when you edit a record on your DNS. So if you need to migrate your website soon, this is really a good reason to register now.

2. ) Cloudflare - Reverse Proxy with caching

But cloudflare does not provide only DNS Hosting. It's also a complete solution to speed up and secure your website. For that when Cloudflare manage your DNS if you activate the optimization and security (orange cloud), instead of sending your server IP when a visitor make a DNS request, it will act as a proxy and all your visitors will view only the Cloudflare servers IP when they do a request.

![/images/2016/10/overview.png)

And Cloudflare will not only act as a simple proxy, it will also cache all the static files and deliver them all around the World to your visitors from the nearest Cloudflare datacenter.

The result is awesome because it will make your website faster as it will handle less requests, and it will also save a lot of bandwidth by limiting the number of file requests.

As you can see, with 80 000 visitors per month, it's more than 20GB of bandwidth saved and also more than 20GB of static assets which have been delivered faster.

3) Cloudflare - Website Protection

By acting as a proxy Cloudflare also provide a complete security solution which include :

Browser integrity check : Each visitor request is checked using the HTTP header and if a thread is found it can be challenged using a captcha or blocked.
Visitor reputation : Cloudflare analyze daily thousands of IP, and if a visitor try several times to perform any form of hack, it will be marked as a potential thread for Cloudflare
Page rules : You can use the page rules to allow or disallow access to a part of your website. For example with wordpress your can use a high level of secuirty onthe page http://yourdomain.com/wp-login.php to protect your website.
DDoS protection : As your visitors have to use cloudflare servers to get access to your website, they will never have access to your server IP and any attack attempt will simply be blocked by the Cloudflare servers.

But to protect totally your server, you have to be sure there is not any records which point directly to your server. The most common error will be to have a email server with a MX record pointing on your server IP. In this case, Cloudflare will not be able to protect your website because the attacker will send the traffic directly on your server IP, and will not have to use the Cloudflare proxy.

4) Cloudflare - Website Optimization

And if it wasn't enough, Cloudflare is also able to optimize your website. It can minify all your assets, including the html, reduce the number of connections, and with rocket loader it will make deliver your assets asynchronously. That mean instead of waiting for each file to be downloaded, with cloudflare your browser will download all the assets in the same time when you visit your website, and it will be up to 3x times faster.

The last optimization tool available for free is Rocket Loader, currently in beta, it's a script used by cloudflare to deliver your assets, without blocking the page display. It use the asynchronous loading to load your javascript at the end of the page display and this way it will really improve your pagespeed score. But like any beta, it could create error with some javascript or break your website design by loading too late some assets.

For this reason you have 2 mode to use Rocket loader :
- Automatic : Rocket loader will optimize any javascript available on your website but you have the ability to forbid the optimization manually by adding data-cfasync="false" before the script source.
```
<script type="text/javascript" data-cfasync="false" src="/js/tether.min.js"></script>
```
Manual : This time you will have to add data-cfasync=“true” for each script you want to optimize with Rocket Loader

I will complete this article with the HTTP2 and Cloudflare in the next few days.

Remove Query strings and add featured images in WordPress feeds

Thu, 30 Jun 2016 00:45:00 +0000

A small post today to share with you a small tips to remove all the queries strings from WordPress static assets, and also to add featured images of your posts in the WordPress feeds.

Go into your WordPress dashboard > Appearance > Editor
Then find the file functions.php of your theme
Add this code at the end of functions.php

//remove queries from static assets
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

// Include thumbnails is the RSS feed
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

You can now try with GTMetrix.com if you have succefully remove the query strings. For the feed, you can test it with any RSS feed reader. Your WordPress feed are normally available at http://yourdomain.com/feed/.

Ubuntu - Blazing fast WordPress with Nginx php7 redis

Sun, 26 Jun 2016 00:37:00 +0000

You have buy a VPS to speed up WordPress, but you are using a control panel and it's not faster than before ? In this tutorial, you will learn how to setup a Blazing fast WordPress with Nginx php7 and redis cache.

This will require to use the the command linux via SSH. Yes I know, it's less user friendly than a control panel. But it will not require any resources after the install and we have an amazing tools to help us : EasyEngine

So, first we will talk about what we are going to install and why it will make WordPress faster.

Nginx : To pronounce "Engine X", it's the web server created in 2002, created to handle high traffic with a low memory footprint. And this is the reason which explain why Nginx is so popular at the moment. It can also be used as a reverse proxy or as a load-balancer, which means if you have few small VPS, you will be able to create a stable and reliable platform to host your website.

php7 : I will not explain what is the php but more about the difference between the 5.6 and the 7. It's the performance and there is nothing better than a small graphic to compare them. And WordPress is fully compatible with the latest version of php.

MariaDB : If you haven't already used it, MariaDB is a fork of Mysql from his creator, and it's an open-source solution which is currently faster than Mysql with a lower memory and processor footprint. So no need to hesitate, if you are still using msql, even in 5.7, it's time to move !

Redis : What is Redis ? It's a remote dictionary server, which will manage your database and store the values in the memory. It's a "NoSQL" solution as Redis can be used as a database by writing data on your ~~hard drive~~ SSD. For WordPress there is no faster solution as it will eliminate the queries to your database, and even if you are using Mariadb, it will be faster and using less resources.

But you are maybe thinking it will be very hard to configure all that stuff properly. No, you will be able to do it in less than 10 minutes ! Because we are going to use EasyEngine, the most powerful tools to create an optimized WordPress website.

It's a command line tool to create install and configure a complete web server with Nginx, PHP, MariaDB and Postfix in a single command. It also provide you the ability to manage properly your virtualhosts with Nginx and make it easy with simple command to use.

So to start you need a VPS with Ubuntu 14.04. EasyEngine is also compatible with debian 7/8 and Ubuntu 16.04. But as EE has been build at first for ubuntu, it's the most stable solution.

At first we need to install EasyEngine.

wget -qO ee rt.cx/ee && sudo bash ee

Done, EasyEngine is now ready to install what we need. So we are looking for WordPress with nginx, php7, redis and as it will not be harder, a SSL with let's encrypt. But you have the choice with EE :

A simple website for html :

ee site create example.com --html

A website with php :

ee site create example.com --php

A website with mysql :

ee site create example.com --mysql

A website with SSL by let's encrypt

ee site create example.com --letsencrypt

And for WordPress ? You just have to choose :

ee site create example.com --wp # install wordpress without any page caching

ee site create example.com --w3tc # install wordpress with w3-total-cache plugin

ee site create example.com --wpsc # install wordpress with whisp-super-cache plugin

ee site create example.com --wpfc # install wordpress + nginx fastcgi_cache

ee site create example.com --wpredis # install wordpress + nginx redis_cache

So for my example, I will use :

ee site create yourwebsite.com --wpredis --letsencrypt --php7

You will have to enter Yes to the EE questions, and yes your wordpress with redis php7 and SSL is already installed and configured. You also have two plugins in WordPress :

Nginx Helper to clear the cache
Redis Cache : To connect WordPress with Redis and to clear the cache

But you will maybe ask how you can connect to the database, what is the user of mysql and wordpress ? You can use a custom user during the install process by using

--user=admin and -pass=password to set WordPress login details.

But you can also look at the install log to find them as EE display it in the console :

nano /var/log/ee/install.log

To see all the commands available with the websites :

ee site

If you want to edit some default configuration (database, user etc) :

nano /etc/ee/ee.conf

By default EasyEngine create a backend access with all tools you can install with it (phpmyadmin, cache, php infos) at the address : http://yourserverIP:22222

To secure it properly just use :

ee secure --auth

It will ask you for a user and a password. You can edit it at anytime.

To edit the default port :

ee secure --port

And to get the mysql user of a website :

ee site info yoursite.com

So I recommend you to change the port of admin tools, and to install what you need in the following :

Adminer (phpmyadmin alternative )

ee stack install --adminer

phpMyAdmin :

ee stack install --phpmyadmin

phpAdminRedis (to manage data in cache) :

ee stack install --phpredisadmin

All the Admin tools (Adminer, phpMyAdmin, phpMemcachedAdmin, FastCGI cleanup script, OPcache, Webgrind, Anemometer) :

ee stack install --admin

You have to agree this tool is really awesome. And if you look to your memory usage using htop, you will see the difference with a control panel. Your website will be faster and you have the ability to edit your configuration or to add module when you want.

So to conclude this tutorial here the links you will need to understand perfectly EasyEngine and to use it for all your setup :

Leave a comment if you have any question !