I recently completed a website revamp and out of curiosity thought I'd check the speed. I was a little concerned with the results so here's what I did to speed it up.

This first thing you might say is: "Why use 1and1 shared hosting?" Well it is good value for money and many people find the control panel simple to use. It's not always simple to move from any host so I started looking for solutions to speed up a Modx site running on 1and1 shared hosting.

Page Speed Tools

The tools I used to check site speed were YSlow extension for Chrome and Google Page Speed Insights. Using the methods below I increased the home page mobile speed to 95/100 and desktop page speed to 96/100 - around a 30%-40% saving. In YSlow this represented a change in rank from D to B.

Removing Non-essential Extras

The first thing I did was to audit the site and remove any non-essential extras from templates / resources in which they were not used. Sorry that's a little vague but there were one or two extras that, although nice to have, I didn't feel added any real value to the site. Saving: Around 5%.

Google Fonts API

Next, I changed the way I load Google Fonts, to the  following in the foot section of the site:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Montserrat:400,700']
    }
  });
</script>

External Javascripts

From there I began to analyze loading speeds of the various Javascripts used on the site. One of the major culprits was Addthis, whose sharing buttons I was using. I had to find an alternative and luckily the good people of the Modx community had already thought of this and I found the following on GitHub:

https://github.com/DESIGNfromWITHIN/social-sharing-modx

Many thanks to Menno Pietersen for compiling that list. Here's the code I used (I simply placed this in a chunk) for my particular circumstance:

Twitter
<a target="_blank" href="https://twitter.com/intent/tweet?text=Modx Site Speed on 1and1 Shared Hosting&url=https://www.chrisficklingdesign.co.uk/modx-site-speed-on-1and1-shared-hosting.html&via=">Twitter</a>

Facebook
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=https://www.chrisficklingdesign.co.uk/modx-site-speed-on-1and1-shared-hosting.html">Facebook</a>

LinkedIn
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.chrisficklingdesign.co.uk/modx-site-speed-on-1and1-shared-hosting.html&title=Modx Site Speed on 1and1 Shared Hosting&summary=&source=https://www.chrisficklingdesign.co.uk/modx-site-speed-on-1and1-shared-hosting.html">LinkedIn</a>

Pinterest
<a target="_blank" href="http://pinterest.com/pin/create/button/?url=https://www.chrisficklingdesign.co.uk/modx-site-speed-on-1and1-shared-hosting.html&description=&media=https://www.chrisficklingdesign.co.uk/">Pinterest</a>

NOTE: I use Modx alongside Foundation Zurb for a responsive layout so you'll see references in the code above, to Foundation Icon Fonts for the display of social media buttons. You'll also see references to other chunks that contain actual social media addresses. Saving: Around 10%.

Now I was beginning to get somewhere - less http requests meant a much faster home page. I removed Facebook and Twitter feeds on my home page as I really didn't feel they added anything to the page. A small saving but worth it.

Local Javascripts

Turning my attention to other javascripts, especially the ones used by Foundation Zurb, I minified the content using: http://www.minifier.org/. This certainly made a difference in Google Page Speed insights and moving the js calls to the footer also helped. Saving: Around 5%.

Gzip Compression

At this point I ran into a problem. I couldn't get gzip compression working on 1and1 shared hosting, despite calling them and chatting at length. I tried various methods and it just did not work so I searched for another solution. It was then that I found this excellent article; 'Enabling Gzip Compression of PHP, CSS, and JS Files Without mod_deflate' - I adapted this slightly for my particular requirements and also to take into account that I didn't want to compress any files in the manager section of my Modx installation, just the files in my assets directory. The following worked for me on UK shared hosting and I can't guarantee functionality in all 1and1 accounts, as in my experience with 1and1 functionality can vary, even in supposedly the same packages.

Firstly in the root .htaccess I have:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/(assets)
RewriteRule ^(.*\.js) gzip.php?type=js&file=$1
RewriteRule ^(.*\.css) gzip.php?type=css&file=$1

On the instructions of 1and1 helpline I have the following in the root php.ini file:

zlib.output_compression = on
zlib.output_compression_level = 9
zlib.output_handler = ob_gzhandler

Next we need to create the gzip.php file referred to in the .htaccess. This should sit in the root of the site along with the .htaccess file and php.ini file:

<?php
//check that zlib compression is enabled
if(!ini_get('zlib.output_compression')){ die(); }
 
$allowed = array('css','js'); //set array of allowed file types to prevent abuse
 
//check for request variable existence and that file type is allowed
if(isset($_GET['file']) && isset($_GET['type']) && in_array(substr($_GET['file'],strrpos($_GET['file'],'.')+1), $allowed)){
	$data = file_get_contents(dirname(__FILE__).'/'.$_GET['file']); // grab the file contents
 
	$etag = '"'.md5($data).'"'; // generate a file Etag
	header('Etag: '.$etag); // output the Etag in the header
 
	// output the content-type header for each file type
	switch ($_GET['type']) {
		case 'css':
			header ("Content-Type: text/css; charset: UTF-8");
		break;
 
		case 'js':
			header ("Content-Type: text/javascript; charset: UTF-8");
		break;
	}
 
	header('Cache-Control: max-age=300, must-revalidate'); //output the cache-control header
	$offset = 60 * 60;
	$expires = 'Expires: ' . gmdate('D, d M Y H:i:s',time() + $offset) . ' GMT'; // set the expires header to be 1 hour in the future
	header($expires); // output the expires header
 
	// check the Etag the browser already has for the file and only serve the file if it is different
	if ($etag == $_SERVER['HTTP_IF_NONE_MATCH']) {
		header('HTTP/1.1 304 Not Modified');
		header('Content-Length: 0');
	} else {
		echo $data;
	}
}
?>

A couple of notes here: Firstly you can compress more file types by adding them to the .htaccess file and the gzip.php file. Secondly, this method does increase server load so may not be suitable for extremely busy websites.

Carrying out the above steps significantly improved YSlow page ranking as finally I'd managed enable compression. Saving: Around 15%.

Google Page Speed Insights was next telling me that I needed to set an expiry date for resources. The following code worked for me but there is an excellent discussion on the Modx forums that describes any other approaches.

# Set Cache-Control and Expires headers
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|js|css)$">
Header set Cache-Control "max-age=2592000, private"
Header set Expires "Sun, 17 July 2011 20:00:00 GMT"

<filesMatch "\\.(css|css.gz)$">
Header set Cache-Control "max-age=604800, private"

<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"

<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, private, must-revalidate"

<filesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"

I'm not sure that this increased page speed but it certainly upped my point score in Google Page Speed Insights.

Internal Stylesheet

I realise this negates the use of zlib compression for CSS and js but I thought I'd give this a try. This particular site uses two CSS files and the advice seemed to be to 'Internalise' the CSS rather than link to it. So I bit the bullet, minified both CSS files and then put them in two chunks. I then added the chunks to my head section. This final step took my Google Page Speed Insights scores to 95/100 and 96/100 for mobile and desktop respectively. That's good enough for me and I'm hoping it will have a positive impact on search engine positioning in these days where speed means everything.