Quick Way to Speed up Your ModX Site

Original Article: https://kevinpirnie.com/quick-way-to-speed-up-your-modx-site/

Hey folks time for another quick article to get your ModX site running tip-top.    This one will allow you to ‘prefetch’ your sites pages for a faster browsing experience.   Now ModX has a pretty fantastic caching mechanism already built in, but I find that if your site has a lot of pages, sometimes that can take a bit on the initial load.

This will take care of that issue.

First and fore-most you will need to make sure to include the latest jQuery library in your templates.  This can be found at: jquery.com

Next you will need to create a php file inside your ‘wp-content’ folder.   I usually create a few default folders inside this… one happens to be called ‘php’

Once you have the file created, remember what the file is, and add this code to it:

<?php

	// Set some caching
    header_remove(); 
    $days = 365;
    $seconds_to_cache = $days * 86400;
    $expires = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
    $lastModified = gmdate("D, d M Y H:i:s", time() - $seconds_to_cache) . " GMT";
    header("Cache-control: max-age=$seconds_to_cache, store, cache");
    header('Last-modified: ' . $lastModified);
    header('Expires: ' . $expires);
    header('Pragma: cache');
    header('Vary: Accept');
    header('X-Powered-By: o7th Web Design');	
	header('Content-Type: text/javascript');

	require_once($_SERVER['DOCUMENT_ROOT'] . '/index.php');

	if(!getValue('Prefetched')){
		$pageSql = "Select `uri` From `modx_site_content` 
				Where `type` = 'document' And `published` = 1";
		$pageQry = $modx->query($pageSql);
		$pageRows = $pageQry->fetchAll(PDO::FETCH_ASSOC);
		$prCt = count($pageRows);
		if($prCt > 0){
			$_SESSION['Prefetched'] = true;
			echo '$(window).on("load", function(){';
			echo 'setTimeout(function(){';
			for($i = 0; $i < $prCt; ++$i){
				echo '		$.ajax({ url:"/'. $pageRows[$i]['uri'] .'", cache:true, dataType:"text", success:function(){}, error:function(){} });';
			}
			echo '}, 1000);';
			echo '	});';
		}		
		unset($pageRows);
	}

function getValue($key) {
	if (!isset($_SESSION[$key])) {
		return false;
	}
	return $_SESSION[$key];
}
?>

Now, once you’ve got this page created, insert the following tag at the bottom of your template.    You should already be including your script files down here anyways (see here)

<script src="/wp-content/php/prefetcher.php" type="text/javascript"></script>

As you can see, I’ve named mine ‘prefetched.php’, just rename this file and path to where you have yours located at.

Using FireBug in FireFox you can see these pages getting ‘fetched’, and when you browse to them you’ll notice that they load a bit faster than they did before, this is because they are now primed in your browsers cache.

UPDATE:  You can also help this along by using HTML5’s built-in prefetcher!

Create a snippet with the following code:

<?php
	if(!function_exists('getValue')){
		function getValue($key) {
			if (!isset($_SESSION[$key])) {
				return false;
			}
			return $_SESSION[$key];
		}
	}

	if(!getValue('Preloaded')){

		$pageSql = "Select `uri` From `modx_site_content` 
				Where `type` = 'document' And `published` = 1";
		$pageQry = $modx->query($pageSql);
		$pageRows = $pageQry->fetchAll(PDO::FETCH_ASSOC);
		$prCt = count($pageRows);
		if($prCt > 0){
			$_SESSION['Preloaded'] = true;
			for($i = 0; $i < $prCt; ++$i){
				echo '<link rel="prefetch" href="'. $pageRows[$i]['uri'] .'" />';
			}
		}		
		unset($pageRows);
	}

And then simply add the snippet to the head of your template(s).

Enjoy
~Kevin