Google Analytics Site Speed for Small Websites

If you’re running a small website and using Google Analytics, your site speed metrics graph might look empty. If you don’t get a lot of traffic there will be no samples to measure site performance. This is because the default sampling rate is only 1% (i.e. site speed metrics will only be collected for 1% of your visitors). This is plenty if your running a big site with tons of visitors per day, but if your running a smaller site this isn’t going to be good enough.

Luckily, Google Analytics allows you to change this setting. If you’re using Universal Analytics you can set the site speed sample rate when creating your tracker. In the example below I have set the tracker to sample 50% of my visitors by passing {'siteSpeedSampleRate': 50} in the create call.

<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', {'siteSpeedSampleRate': 50});
ga('send', 'pageview');
</script>

After doing this I got a significant increase in the number of samples per day, allowing me to get a better idea of how my site was performing.

Middleman Foundation

This weekend I decided to try out the static site generator, Middleman. While I was working on converting an existing static site, I decided to take the opportunity to try out Zurb’s Foundation and SCSS too. Andrea Moretti created a Middleman template to get you started doing just this, but I hate just using templates without understanding what they are doing. So I decided to start with Middleman’s HTML5 Boilerplate template and add the Foundation Bower package to it. You can check out the final product over on GitHub at https://github.com/blachniet/middleman-foundation. If you’re not interested in the inner workings, grab Andrea Morretti‘s Middleman Foundation template.

Middleman Template and Bower Setup

Initialize the project with the HTML5 Boilerplate.

> middleman init middleman-foundation --template=html5
> cd middleman-foundation

Create a .bowerrc file to specify a the install location for bower components

// .bowerrc
{
    "directory" : "source/bower_components"
}

Initialize bower for the project.

> bower init

Install Foundation.

> bower install foundation --save

Add the Compass configuration to config.rb.

# config.rb
compass_config do |config|
  # Require any additional compass plugins here.
  config.add_import_path "bower_components/foundation/scss"

  config.output_style = :compact
end

Add the bower directory to the Sprockets asset path in the config.rb.

# config.rb
# Add bower's directory to sprockets asset path
after_configuration do
  @bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
  sprockets.append_path File.join "#{root}", @bower_config["directory"]
end

Replace CSS with SCSS

Delete source/css/main.css and source/css/normalize.css. In their place add a new file, all.css.scss.

# all.css.scss
@import "normalize.scss";
@import "foundation.scss";

Replace the stylesheet references in the <head> of source/layouts/layout.erb with the all.css.scss.

<!-- source/layouts/layouts.erb -->
<%= stylesheet_link_tag "all" %>

Use Modernizr from Bower

Create a source/js/modernizr.js with the following content to include the modernizr source from the installed bower components.

// source/js/modernizr.js
//= require modernizr/modernizr

Then replace the modernizr reference in layouts.erb‘s head with <%= javascript_include_tag "modernizr" %>.

Use Other Javascripts from Bower

Delete all files (except the new modernizr.js) in source/js/, and create all.js with the following contents to include necessary javascripts from the bower components.

// source/js/all.js
//= require jquery/dist/jquery
//= require foundation/js/foundation.min

Then, update layouts.erb to reference your new all.js and remove the old javascript references.

<!-- source/layouts/layout.erb -->
<%= javascript_include_tag  "all" %>

Serve

You’re all ready to go. Launch middleman server and start building!

Create a Development Version of an Existing WordPress Site

UPDATE : This article provides a manual approach to creating a development copy of your website. However, I ran across this WPBeginner article which describes a much easier approach using the Duplicator plugin. I would suggest following that guide unless you prefer the manual process.

Before We Start

Here’s my environment setup. This post should still be helpful if your setup isn’t exactly the same, though.

  • GoDaddy Hosting (production)
  • WAMP (development)
  • phpMyAdmin (production + development)

Files

Download WordPress Files

Instead of using the WordPress export feature, we’re going to grab all site’s files. I’m going to use GoDaddy’s File Manager to get the files because it can archive all the files in a single zip which I can then download. If you are not using GoDaddy and your host doesn’t offer something similar then you can pull all the files over FTP using FileZilla.

The screenshots below show how I archived my files for download.

Open the GoDaddy File Manager.
]2 Open the GoDaddy File Manager.
Select all the files you wish to download.
Select all the files you wish to download.
In the More dropdown select Archive.
In the More dropdown select Archive.
Insert a name for the archive and download it.
Insert a name for the archive and download it.

Extract and Configure

  • Extract the files from the archive to your site directory (e.g. C:\wamp\www\site_name).
  • Update the wp-config.php DB_HOST (probably to localhost)
  • Update other DB login info if it will be different than your production instance.
  • If you are using non-default Permalink settings, ensure that the rewrite_module is enabled on your Apache instance.

Database

I’m going to assume that you are familiar administrating with phpMyAdmin and MySQL.

Export the Production Database

  • Login to your production phpMyAdmin instance.
  • Select your database
  • Select the export tab.
  • Export you database to a SQL file.

Set Up the Development Database

  • Login to your development phpMyAdmin instance.
  • Create a new user + database, preferably with the same name as the production instance.
  • Make sure the host for the user is correct. It probably needs to be localhost.

Import Data

Open the MySQL command prompt to your database.

> mysql --user=user_name --password=P@assw0rd database_name

In the mysql database prompt, execute the SQL file you exported.

mysql> source database_name.sql

Change your site’s location in the database with the following SQL. You will need to replace http://my.web.zz/dev with the URL to your developer instance.

SELECT * FROM wp_options WHERE option_name = "home" OR option_name = "siteurl";
UPDATE wp_options SET option_value = "http://my.web.zz/dev" WHERE option_name = "home" OR option_name = "siteurl"

Wrap-Up

That should be everything you need to do. If your WAMP instance is running, you should be able to browse to your site. If you have any problems or suggestions, leave them in the comments below.

References

HTML5 Articles and Sections

Having trouble deciding whether to use a div, section or article in your HTML5 page? Oli Studholme has a great article explaining how they should be used and provides a very simple method for deciding which to use.

To decide which of these three elements is appropriate, choose the first suitable option:
1. Would the enclosed content would make sense on it’s own in a feed reader? If so use <article>
2. Is the enclosed content related? If so use <section>
3. Finally if there’s no semantic relationship use <div>

Read the full article at http://bit.ly/1cVXQ7R.

Force Bundling Optimizations

Use the following code in the BundleConfig.cs of your ASP.NET MVC application to force bundling and minification.

// BundleConfig::RegisterBundles
BundleTable.EnableOptimizations = true;

Why?

Why would you do this? Sometimes bundling and minification causes problems, such as in AngularJS. You will want to find these problems before publishing, so just enable this line every once in a while to make sure everything still works as expected with the optimizations.