Should you go mobile first?

The full question sounds like this:

Should you build your website/web-app mobile first and scale to desktop?

Why do we need another article about this, it has been covered a lot of times already?

To make things clearer, I’m only interested in the site structure, building the CSS around it and how it changes from one device to another. Not the PWA or other things that will take the mobile first approach and make it more like a mobile app.

It might be an obvious answer for a lot of you, but to my shame, it wasn’t for me. I didn’t see a reason to go mobile first in my approach. I’ve created lots of sites with the approach of desktop first and scaling down on mobile as I went along. We even had a full workflow where we have the desktop site ready, test it and after that, we move to mobile.

This workflow might’ve been influenced by the designers I worked with or the clients that focused on the desktop version first.

It all changed after I read Responsive Design: Patterns & Principles by Ethan Marcotte. I recommend this book if you are a web developer, especially front-end.

I was amazed by how much more can be accomplished if you have a different perspective when creating the site. And it so happened that I read it during a complex project where we had a lot of parts and elements that were structured to be re-used throughout the site.

Understand the design/project

It starts by getting a better understanding of the design or the project as a whole. You need to get as many details from the client and designer. They might think the site as page by page, but this is not true anymore. The site has pages but those pages are created by elements, and those elements are the ones that need your attention.

What is relevant for the user on a small device?

  • On your newspaper site, you want to show the featured story on mobile and have it display as the first thing, not obstructed by anything else.
  • If you have an e-commerce site you want to show the featured product(s) that are available on sale.
  • Your book author might want to have a clear way to display the next event or book signing that she’ll attend.

This means understanding your project, getting to know exactly what matters, the core of the project. On mobile, you need to be able to deliver what’s important and not just fill the screen with everything. Providing the right content will keep the user engaged with your site, and it will also help you fix performance issues.

Working with elements

As you look over you will find elements that repeat themselves on different pages.

Once you identified the elements, you can start building the components. Get those components to live in their own space and create a structure just for them.

Then get them styled not in a relationship with the page or other elements, but as a standalone unit that will be placed on a page.

Why are elements important?

First of all, it’s like working with data: you want the actual data, not for it to be wrapped into something that needs to be adjusted when you want to display it.

You want the actual value from a field. Same with elements.

You want an element that does the Featured Story for the newspaper, Product on Sale for your e-commerce, Next Event for the author, that you can re-use wherever you like.

Having elements or components that will come together on a page will help you better manage the outcome.

Mobile Content

On a mobile first approach, the content on mobile devices is specially catered for mobile. You don’t just use what it’s on desktop but on a smaller screen.

There is an important difference here because you will need to take into account the fact that people might browse on 3G connections that are not that fast. This will make every extra resource that is loaded to take some extra seconds for the end-user.

We’re getting a better understanding of how the images are delivered and if you have to just hide content or eliminate it on mobile devices.

As you’re set on creating elements/components, you have to make sure that the media files you use are correctly optimized for screen size and enable/disable certain elements on mobile altogether. Don’t load them just to hide them on mobile.

Today this is even more powerful and easy to achieve with JS frameworks like Vue.

Isn’t mobile first the same as a responsive website?

Yes and no, mostly no. It’s kind of the same thing when you talk about the methods used (you’re still using a CSS framework for example), but it has very different outcomes.

I see the responsive way of creating sites as going from big to small and with this approach comes the idea of hiding elements on certain smaller screens or just move them around to fit. Nothing wrong with this, mobile has less space to display content.

But what do you hide on mobile?

You’re now faced with a problem that you didn’t have in mind at the beginning. You’re not aware of what is vital/relevant for your user on mobile.

The mobile first approach aims to solve this issue. You’re starting the site scaling from small to big, not downgrading the content. When you start with the small screen idea in mind, you realize what is important and what must be shown on the page. It’s not just about moving the content around so it will fit.

I’m aware that responsive is the easy way to do it. When you have a site that is already in use for some while and it has traffic on it, it’s the safe step to make it responsive, move things around to fit and just remove some elements on mobile.

I would love to cover more on this subject and break each idea into an article on its own, but for now I just wanted to offer a glimpse of what I took from that amazing book.

I really recommend reading the book. it’s around 100 pages with a lot of relevant examples and solutions from the real world. It might change the way you think about your current projects.

Things to check before going live with a WordPress site

You started the project, moved along through all the revision checkpoints, your client is happy and you’re ready to move it on a live environment with the proper domain, server, and so on.

Even if the project works well on your development environment, there are a few things you might want to look over before making it live and ready to be accessed by visitors and search engine bots.

Dynamically deliver assets

On long projects or because you want to do a quick test, there might be assets that are hardcoded in your project.

Some bits might need to be hardcoded, but be sure it’s dynamically made so when you change the domain it will still work.

An example from the top of my mind is when you add a background image in CSS with the URL from WP Media Library. You want to quickly test something, the image is in Media Library and you just add it in your CSS to test.

You forget about it and when you delete the dev version of the site you end up with broken content.

Search from your IDE in the project folder after the dev URL address to be sure nothing is left in there.

Server details

In most cases, this shouldn’t be an issue if you have a good hosting company.

  • Check the PHP version on the server and what you need for everything to work properly
  • Check if there is any kind of restriction on the number of requests and files that you can have

Basically do a full run of your functionalities on the new server just to be sure no surprises appear.

Clean any test data

You tested and tested the site for all the edge cases and now it’s ready to go live.

Make sure all the test data is removed when the site goes live. Sure, some data needs to stay in there (you might have standard pages or users that should be in there), but everything else should be removed and the database to be as clean as possible.

Content ready

If you cleaned the database and removed all the extra users, posts, pages, etc, now add in the content.

Be sure the right content is on the pages before making it live, or else you risk having search engine bots crawl on your site and index pages with “Lorem ipsum” text on them – this is not very professional.

Forms functionality

In most cases, contact forms are your way to get customers or feedback. This might not seem like such an important thing, but from your client’s point of view, forms not working means the site is not functional. If this part is broken and fails on sending the message, you and your client are losing business.

For example, in Contact Form 7 (or any other contact plugin) you might need to install an SMTP or else the emails will not go out.

Of course, not only contact forms, but any other ways of gathering the data should be tested on the live environment again.

Conversion rate is very important when you invest money in promoting the site or certain landing pages. Having the potential customer landing on the page but failing the conversion part, it’s just bad business.

Security

Always keep an eye on the security details. There is no need to explain how important this is regardless of how big or small your website is or if you have other users or just the administrator.

The most important and easy things to do:

  • Change the default administrator user to something else. Usually, you get the standard “admin”, don’t stick with that.
  • Change the password to something complex. I use the WordPress auto-generated password all the time, because it’s simple and helps me not having to create a password on the spot. Your client might want something that they can remember – suggest them to be a strong password (case sensitive, numbers, symbols, all that stuff).
  • Change the default login URL for WordPress. The standard login address from WordPress can easily be targeted by bots. You should change the wp-login.php to something personalized. Don’t do this by hand (you altering the code), just use a plugin like WPS Hide Login.
  • Install a security plugin. Wordfence should do the trick, it’s easy to use and it’s very popular.

A backup system in place

Periodical backups are a must: the files and database should be backed at least once a week. You can also go for twice per week, it really depends on the site and how much activity there is on it. If the content stays pretty much the same and there are no transactions happening, then you can set a longer period between backups.

A good option is UpdraftPlus – Backup/Restore. It’s one of the most used WordPress plugins and it does the job really well.

The hosting provider might also offer a backup system, use that too if you want to be sure nothing gets lost.

Make sure search engines can access the site

When you have the WP site (or any site) in development, the robots.txt is denying access for bots on your site. Or at least that’s the way it should be.

In WordPress, there is the option of Discourage Search Engines from crawling in Settings > Reading.

You should uncheck this after you cross all the points from above. Having the robots.txt still blocking search engines will make the site invisible for potential customers.

How to easily create Custom Post Types in WordPress?

We’re going to create a more easy to manage way of generating Custom Post Types.

First of all, we’re going to create a file that we’ll call it post-types.php and place it in a folder inside your theme called ‘config’.

In post-types.php we’ll create a class that generates Custom Post Types. I’ll call it DM_Project_Post_Types.

					

<?php
class DM_Project_Post_Types {


} // End class

new DM_Project_Post_Types;

In here we create 3 fuctions: a __construct, one to define the custom post types and one that will register them.

					

<?php
class DM_Project_Post_Types {

    public function __construct() {
        
    }

    public function all_post_types() {
     
    }

    private function dm_register_post_type() {

    }


} // End class

new DM_Project_Post_Types;

In the all_post_types function we define all the custom post types that we want to use and will pass that data into the dm_register_post_types.

					

    public function all_post_types() {
        $post_types = [
            [
                'post_type' => 'director',
                'singular'  => 'Director',
                'slug'      => 'director',
            ],
            [
                'post_type' => 'photographer',
                'singular'  => 'Photographer',
                'slug'      => 'photographer',
            ],


        ];

        foreach ($post_types as $key => $post_type) {
            $this -> dm_register_post_type( $post_type );
        }
    }

If you need to add custom data for ‘plural’ or other arguments, you can add them in the all_post_types function and pass them in dm_register_post_type to be used.

And the dm_register_post_type will look like this

					

    private function dm_register_post_type( $data ) {

        $singular  = $data['singular'];
        $plural    = ( isset( $data['plural'] ) ) ? $data['plural'] : $data['singular'] . 's';
        $post_type = $data['post_type'];
        $slug      = $data['slug'];

        $labels = array(
            'name'               => _x( $plural, 'post type general name', 'dm-artillerie-theme' ),
            'singular_name'      => _x( $singular, 'post type singular name', 'dm-artillerie-theme' ),
            'menu_name'          => _x( $plural, 'admin menu', 'dm-artillerie-theme' ),
            'name_admin_bar'     => _x( $singular, 'add new on admin bar', 'dm-artillerie-theme' ),
            'add_new'            => _x( 'Add New', $singular, 'dm-artillerie-theme' ),
            'add_new_item'       => __( 'Add New ' . $singular, 'dm-artillerie-theme' ),
            'new_item'           => __( 'New ' . $singular, 'dm-artillerie-theme' ),
            'edit_item'          => __( 'Edit ' . $singular, 'dm-artillerie-theme' ),
            'view_item'          => __( 'View ' . $singular, 'dm-artillerie-theme' ),
            'all_items'          => __( 'All ' . $plural, 'dm-artillerie-theme' ),
            'search_items'       => __( 'Search ' . $plural, 'dm-artillerie-theme' ),
            'parent_item_colon'  => __( 'Parent ' . $plural . ':', 'dm-artillerie-theme' ),
            'not_found'          => __( 'No ' . $plural . ' found.', 'dm-artillerie-theme' ),
            'not_found_in_trash' => __( 'No ' . $plural . ' found in Trash.', 'dm-artillerie-theme' )
        );

        $args = array(
            'labels'             => $labels,
            'description'        => __( $singular .'.', 'dm-artillerie-theme' ),
            'public'             => true,
            'publicly_queryable' => true,
            'show_ui'            => true,
            'show_in_menu'       => true,
            'query_var'          => true,
            'rewrite'            => array( 'slug' => $slug ),
            'capability_type'    => 'post',
            'has_archive'        => false,
            'hierarchical'       => false,
            'menu_position'      => null,
            'supports'           => array( 'title', 'author', 'thumbnail', 'excerpt', 'comments' )
        );

        register_post_type( $post_type, $args );

    }

By default I added a $plural variable that will just add an ‘s’ at the end of the custom post type single in case you don’t define a plural in all_post_types.

If you want to do a small adjustment you can also define a variable from ‘textdomain’. In my case that is ‘dm-artillerie-theme’ and it’s hardcoded in there.

Now in the __construct we make sure to init the all_post_types function

					

    public function __construct() {
        add_action( 'init', array( $this, 'all_post_types' ) );
    }

Your final code in the post-types.php file should look like this:

					

<?php
class DM_Project_Post_Types {

    public function __construct() {
        add_action( 'init', array( $this, 'all_post_types' ) );
    }

    public function all_post_types() {
        $post_types = [
            [
                'post_type' => 'director',
                'singular'  => 'Director',
                'slug'      => 'director',
            ],
            [
                'post_type' => 'photographer',
                'singular'  => 'Photographer',
                'slug'      => 'photographer',
            ],


        ];

        foreach ($post_types as $key => $post_type) {
            $this -> dm_register_post_type( $post_type );
        }
    }

    private function dm_register_post_type( $data ) {

        $singular  = $data['singular'];
        $plural    = ( isset( $data['plural'] ) ) ? $data['plural'] : $data['singular'] . 's';
        $post_type = $data['post_type'];
        $slug      = $data['slug'];

        $labels = array(
            'name'               => _x( $plural, 'post type general name', 'dm-artillerie-theme' ),
            'singular_name'      => _x( $singular, 'post type singular name', 'dm-artillerie-theme' ),
            'menu_name'          => _x( $plural, 'admin menu', 'dm-artillerie-theme' ),
            'name_admin_bar'     => _x( $singular, 'add new on admin bar', 'dm-artillerie-theme' ),
            'add_new'            => _x( 'Add New', $singular, 'dm-artillerie-theme' ),
            'add_new_item'       => __( 'Add New ' . $singular, 'dm-artillerie-theme' ),
            'new_item'           => __( 'New ' . $singular, 'dm-artillerie-theme' ),
            'edit_item'          => __( 'Edit ' . $singular, 'dm-artillerie-theme' ),
            'view_item'          => __( 'View ' . $singular, 'dm-artillerie-theme' ),
            'all_items'          => __( 'All ' . $plural, 'dm-artillerie-theme' ),
            'search_items'       => __( 'Search ' . $plural, 'dm-artillerie-theme' ),
            'parent_item_colon'  => __( 'Parent ' . $plural . ':', 'dm-artillerie-theme' ),
            'not_found'          => __( 'No ' . $plural . ' found.', 'dm-artillerie-theme' ),
            'not_found_in_trash' => __( 'No ' . $plural . ' found in Trash.', 'dm-artillerie-theme' )
        );

        $args = array(
            'labels'             => $labels,
            'description'        => __( $singular .'.', 'dm-artillerie-theme' ),
            'public'             => true,
            'publicly_queryable' => true,
            'show_ui'            => true,
            'show_in_menu'       => true,
            'query_var'          => true,
            'rewrite'            => array( 'slug' => $slug ),
            'capability_type'    => 'post',
            'has_archive'        => false,
            'hierarchical'       => false,
            'menu_position'      => null,
            'supports'           => array( 'title', 'author', 'thumbnail', 'excerpt', 'comments' )
        );

        register_post_type( $post_type, $args );

    }


} // End class

new DM_Project_Post_Types;

Now in functions.php add the PHP file that you just worked on:

					

require_once('config/post-types.php');

You will be able to generate as many custom post types you want and control the aspect of each of them without repeating the code. You also endup with a clean functions.php file and it will be easier to read in the future.

You can use this approach on other customizations that you’re doing on the site, creating a separate PHP file and call them from inside functions.php.

Clubhouse – a great project management tool

When I started working as a freelancer, I had no clue that I needed a project management tool. During the first year, I worked either from notes that I made in Notepad, or going through my emails and seeing what some of the requirements were for the project.

In retrospect, that was definitely not the most effective way to keep track of tasks in a project.

As I stepped into my second year and more people were involved in the same project, I started to look around and see how the “cool kids” were dealing with this issue. It was becoming quite clear that I needed a project management tool, but I didn’t know where to start.

Other project management tools

Searching for project management tools I found 2 that stood out: Asana and Trello. Not knowing which one to choose I said Why not both?.

So I ended up using Asana for most of the projects and Trello on a bigger project since the client was already familiar with it.

Both Asana and Trello have great features and integration with 3rd parties.

Both have a free option so you can enjoy the basic stuff without a paid subscription.

and what they’re missing

As I worked with Trello and Asana I noticed a few things that slowly managed to drive me crazy.

In Asana:
  • No way to switch from a list view to a card view after you started the project and selected one or the other.
  • If you are using the list view, there is no way to actually group tasks together easily. Yes, you can add a different heading for a section or add a tag to a task, but that is not enough on a complex project.
  • No way to assign relationships between tasks.
  • By default, the completed tasks just disappear, which is nice but not useful. You will have to go back and switch to ‘Completed Tasks’ or search for a specific task in order to find it and see what it was about. Basically, ‘Done’ tasks are not handled that well.
  • The subtasks will be forgotten. They get buried so deep inside the tasks nesting (especially if you’re using list view) that it’s impossible to go to a subtask’s comment/details. I just prefer not to use them at all.
  • The search option is a bit of hit and miss. When I’m in a project I expect to be able to search within that project only and not all over the place.
In Trello:
  • The missing relationship part is an issue here also. You end-up with duplicates or similar cards and there is no way to tell how they are related.
  • Because there are no categories/epics, you end up with a lot of columns in the project. So you’ll have to scroll a lot through the board so you can move the card where it’s needed.
  • No easy way to filter the cards in a board

None of them have an iteration solution implemented. In Trello you can create one by yourself if you add even more columns to the board.

To be honest I never bothered purchasing the premium version of Asana or Trello because it didn’t feel like it would change the situation.

But Clubhouse came around

I got it (even if it wasn’t a free option) and I loved it from the first minute.

What I like about Clubhouse

It’s really compact.

Everything is where it should be and you don’t need to scroll or click 3 times and load 2 different pages in order to get where you want to.

It starts with you creating a Story to which you add all the details you want: assign an Epic, set the state of it, add an Owner, provide details, set a relationship (if it’s the case) and more.

Clubhouse Story

As you begin working on the project and more Stories are added and/or completed, you start seeing how useful it is to have a design that is visually compact, but allows for much more information to be available when you open a story (all the details, comments, who is related to who and so on).

Another plus is the fact that you can filter Stories by Epics, see the progress of an Epic, change its status

The predefined Story Types – Feature, Bug, Chore – are very useful. The Bug one highlights that respective Story in red for better visibility.

Clubhouse dashboard

Do you like Milestones and tracking the project status based on that? Clubhouse has that too.

Also, a big plus for the search that works like a charm. You can search by Story name or ID, which is great.

And last but not least the iteration option that you can enable in Clubhouse, this will allow you to set tasks based on sprints.

There is a full list of those awesome features on their product presentation page.

To sum up, Clubhouse not only checks all the boxes already present in Trello and Asana, but it also brings the (really useful) features that the other 2 tools were missing.

Do you have any other reasons to recommend it?

Yes. It has Dark Mode and yes it’s free now.

Using it for roughly 6 months now, I can say it’s a perfect fit for a small team with medium to large projects.

WordPress speed optimization tips 2019 – part 2: Optimization tools

In the first article, we talked about test tools for your website. In this article, we’re going to continue and provide solutions for some of the most common issues when it comes to site speed/loading time.

Tools for WordPress speed optimization

1. Cache

There are a lot of plugins that will help you with cache in WordPress. I will go through some of my favorites.

WP Fastest Cache

It’s very simple to use. This is why I like it.

You install the plugin, activate it, enable cache, Gzip compression, Browser caching and you’re set.

Other features:

  • it allows you to preload posts, pages, categories
  • combine and minify for CSS, combine for JS
  • minify HTML

More features are available on the paid version. I’m perfectly ok using the free version and it goes really well with Autoptimize if you want to handle minify and combine separately.

Hyper Cache

It has more or less the same features that you will find in any cache plugin. The main thing is that it has a double cache for desktop and mobile version. This is great!

If you end up using something like wp_is_mobile() in your code, you know that it won’t work correctly when cached. This plugin will solve that issue because it will render each page and cache it individually for mobile and desktop.

The plugin is very well optimized and uses only PHP to do the job and you will be able to use it on a hosting service with low resources.

Cache Enabler – WordPress Cache

This plugin has a different approach when it comes to caching the pages. It will create HTML static files for your pages and store them on the server. When your visitor access the page the server will deliver the static HTML and avoid any backend process that will require extra resources.

One reason to use this plugin is for the integration with “Optimus”.

“Optimus” it’s a plugin that will allow you to deliver .webp images into your pages and “Cache Enabler” will allow you to cache those pages. It will create 2 HTML files for each page: one with the standard images that you have and one with all images replaced to .webp.

Why does it need to do that? Because some browser will not read your .webp files and people will not see any images on those pages. This way “Cache Enabler” will deliver the correct cached version based on the visitor’s browser.

 

There are a lot of other cache plugins, but these are the top 3 most used by us.

Like any other thing, you might need to test with multiple cache plugins until you find the right one.

2. Minify/Combine

You will want to minify the CSS and JS files but also combine them into as few files as possible to get rid off those requests.

Some cache plugins already have this option (like WP Fastest Cache does), but I prefer to use a dedicated plugin for that.

Autoptimize

This is my to go plugin when it comes to minify and combine.

Some of the features:

  • Optimize JS/CSS
  • Aggregate JS/CSS files
  • Exclude scripts/style files from Autoptimize. This is very useful because you’ll see that some functionalities might break and you want to remove those scripts from being combined. Same for style.
  • Inline and Defer CSS. This will allow you to add “above the fold CSS” until the main optimized CSS is loaded. Is a great way to remove all request and provide some styling for the site until the actual resources are loaded. The content will start to be displayed without having to wait for the actual style file.
  • Combine Google Fonts and load them asynchronously
  • Remove query strings

This plugin works with every other cache plugin that I worked with. Just make sure you don’t have to minify and combine enabled on the cache plugin. Same for Divi themes. Divi themes will enable minify and combine by default, check if you want that or not.

3. Image Optimization

Smush Image from WPMU DEV

Very easy to use and it visually it looks very pleasing.

It’s a very good plugin all around, just 2 things that you need to know for the free version:

  • it optimizes in batches of 50 files, so if you’re planning to optimize a lot of images you will need to click the button to continue the process after each 50 file.
  • it has a limit of 1MB per file
reSmush.it Image Optimizer

Works great and it has a limit of 5MB per file. You can run the process for all the images, no limit on the batch.

Optimus – WordPress Image Optimizer

Apart from the image optimization, this plugin will allow you to deliver WebP images into your page.

It will generate .webp files automatically and will replace those from your page. You need to use it with the “Cache Enabler” plugin that I mentioned above to offer support for old browsers also.

You will need the HQ (paid) version for WebP image conversion.

 

Another notable mention: EWWW Image Optimizer. I run into issues with it on different servers and I stopped using it.

4. CDN

If you still don’t know what a CDN is, Cloudflare has a is a very comprehensive explanation for you.

Cloudflare

First of all, it’s free.

You get:

  • SSL certificate. Note: This is a “Full” secure connection between your visitor and Cloudflare, and secure connection (but not authenticated) between Cloudflare and your web server. In order to have a “Full Strict”, you need an SSL certificate on your server also.
  • Firewall
  • Details about traffic and attacks
  • Stats about performance and how much bandwidth Clouflare saved you

Cloudflare also has some tools for Auto Minify and Rocket Loder that will combine and minify your CSS and JS. I don’t recommend using them if you’re already doing this on the server side.

In a recent update, they added a similar feature to the delegation. You can add multiple users to your account. In case you have another developer that needs to work and have access to clear the cache or put the whole thing in developer mode, you can do that without sharing your login credentials.

 

Conclusion

Alongside with Part 1, these 2 articles will help you get started on optimizing your website.

Some aspect might change in the months/years to come, but these are very core and basic things that you will need regardless of the new tweaks added by Google to the algorithm.

WordPress speed optimization tips 2019 – part 1: Test tools

Starting from mid-2018 Google takes into account your site speed when ranking in for mobile search results. This should be enough for you to get started on optimizing your existing website.

Besides that, having a fast website (with a very quick loading time) will guarantee you more traffic, sales, and better bounce rate.

I will go through some tools that we use to test the websites that we’re working on and I will also mention some of my favorite solutions to fix the most important issues in part 2.

Tools to test your site speed

1. Google PageSpeed Insight

This might be the number one tool used for testing website speed and there is a good reason for that: it’s made by Google. You will notice that from time to time, the facts that are taken into account by PageSpeed Insight will change/adjust.

For example, right now you can’t get a break from “Lazy image loading” and “Using next-gen image format” that appears in the test results. Lazy loading is great and I will talk about it in part 2, you need to use this if you’re not doing it already. I will also talk in there about next-gen image format, so make sure to give it a read.

I do find the PageSpeed Insight a bit too aggressive when it comes to the mobile score and recommendations. For some of them, I feel like you need to strip the site or find a lot of different ways to deliver files in a way that it will please Google.

It provides you with enough details on how to fix most of the issues and also points to specific assets that need attention.

2. Chrome Audit

Very useful and comes with your Chrome browser or other Chromium-based browsers.

Using CTRL+SHIFT+I you can access the Inspector and from there you have an Audit tab that will allow you to run tests on the page you’re on.

You will get results for Performance, Progressive Web App, Best practices and Accessibility, so it’s nice that you have some extra things in there and you can go over all the details in the Audit results.

One thing to take into account: the tests are run from your machine.

If you’re using Bitdefender as an antivirus you will notice that all the assets on the site are delivered via HTTP/1.1 instead of 2.0. This will cause the Audit report to show you an issue that you are not delivering files using HTTP/2. Just deactivate the antivirus when you do that and it will work correctly. Make sure that your PC will not slow down the test or have another 3rd party that does that.

3. GTMetrix

I really like GTMetrix because it provides you with more specific details on your test runs. You will get details like file names, correct sizes for images, it will even provide the images already optimized for you if you’re too lazy to do it on your own.

  • It shows you the score based on two tests: PageSpeed Score and YSlow
  • It keeps a record of your site tests
  • You get details if the score when up or down
  • A nice waterfall that shows the loading times of assets and status during the loading

In some cases, I use the GTMetrix tool more than the other 2 from above.

4. WebPageTest

This is another tool that will get you in-depth details about your site speed/loading times and the best thing is that you can select location and browser on this one.

GTMetrix has a similar feature but it’s in the PRO version they sell.

WebPageTest is maintained on Github with around 130 contributors, they do have recent updates so you can use it without worries.

It has a lot of customizations in the Advanced section: a number of tests to run, capture video, connection type, disable JS, stop the test when document complete, emulate for mobile, etc. I never messed with the settings, just left it as it is and selected the location that I wanted and it worked very well.

5. Pingdom

I moved it to the last place because I feel like the free version doesn’t provide you with a lot of details. You have a very nice waterfall and you get a lot of information on what assets are loaded, how are they loaded, status, etc. but not that much info on the other issues.

You get details like “Compress components with gzip” or “Add Expires headers” but you never get the actual files that have this issue. I feel like it’s very vague and you can’t do debugging or improvement based only on these suggestions.

They do have a paid plan and on that paid plan you get a lot more details. I assume this is the reason and the selling point for the product. It’s fair enough. If you don’t want to purchase a tool like this, you can easily use one of the others from above.

 

Conclusion

You can use any of the tools above to test your site loading time/speed. The main thing that I can recommend is not sticking just to one tool.

If you’re using PageSpeed Insight on your daily basis, try mixing things up by having also GTMetrix and WebPageSpeed as your tools. You will get a better understanding of what might be wrong and how you can improve it.

In the next part, we’ll talk about WordPress speed optimization tools that you can use to solve some of the most common issues.

How to choose the best WordPress theme for your project?

Choose the best WordPress theme

Is there a theme that is the best WordPress theme? One that you’ll choose and it will deliver everything you need?

If you’re looking to create a new WordPress site or re-do an old one you might want to try a premium WordPress theme.

You will be looking to purchasing a new theme that will go along well with what you have in mind. So, you’ll start browsing along and narrow it down to the one. Purchase it and get stuck because you find out that it’s the not the best WordPress theme for your project.

While working with WordPress sites and premium themes for a while I noticed some deal breakers. Continue reading “How to choose the best WordPress theme for your project?”