High-Speed Mobile Friendly Web Design Tutorial

Slow and Steady Wins the Race… sometimes.

But not when it comes to Mobile Friendly Web Design.

Mobile devices are slower than PCs. They tend to have less computing power, limiting the speed in which they can display information.  The average mobile page typically takes more than 7 agonizing SECONDS to load. Why is this important to web designers? In 2018, 52.2 percent of all website traffic worldwide comes from mobile phones. So our mobile visitors can no longer be ignored.

How do we speed up our websites for our mobile visitors?

First, Utilize Page Speed Tools

• GTMetrix –  This page analysis tool will help you develop a faster and more efficient website experience for your users.
• Google’s Page Speed Insights – This page speed tool measures the performance of a page for (1) mobile devices and (2) desktop devices, fetching the URL twice. The PageSpeed Score ranges from 0 to 100 points.
• Pingdom Website Speed Test  – This Website Speed Test will tell you your page’s load time and your page size, helping you establish a baseline for improvement.

The results of your page speed tests can be pretty discouraging at first. Try GTMetrix before you attempt to look at Google’s Page Speed Insights.

We can all improve our page speed scores.

First, let’s pay attention to the HTTP requests that are made to the web server when a visitor tries to load one of our web pages. The more HTTP requests made to the server plus the amount of time it takes for each element on a page to render, the slower a website will be.

Did you know that every image, CSS file, JavaScript file, CSS background image, etc. is called over the network and each one of these HTTP requests adds to the page load time?

Images

Images can be a huge factor in the speed of your site. It is important to consider every image that goes into your site.  Consider removing any images that are not essential to your design and make sure to always optimize them for the web. If you are working in Photoshop, this is as simple as selecting the  “save for web” option and adjusting your image settings to create the smallest file possible that is not also pixelated or blurry.

Another Image Optimizing Tool besides Photoshop

• Smush.it – Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files.

Javascript

Most browsers prevent the rest of the page from being loaded while a JavaScript file is being downloaded and parsed. Javascript that is located towards the top of an HTML document can block page rendering, slowing down a page tremendously. In order to defer parsing of Javascript, it is best to call these scripts at the end of an HTML document rather than at the beginning, if possible. But be sure to test your page each time you try to move a script to the bottom of the page. Above all, you want to be sure your page still works as expected.

Combine JavaScript files

Multiple JavaScript files can hurt a website’s load time. These scripts can often be combined. Doing this will drastically speed up page load time.

Combine CSS files

Loading multiple CSS files can also hurt a website’s load time. Combine as many stylesheets as you can into one file.

Minify HTML, CSS, and JavaScript

What is minification? Minification removes all the white space from the code before serving it to visitors. Servers and browsers don’t care about what the code looks like as long as it’s valid. HTML, CSS, and JavaScript can all be “minified” or compressed to speed up their loading time. There are a number of resources on the web that minify these types of files. Minifier is a great example. But be prepared, you will have trouble reading these files afterwards. So be sure to keep the originals on hand, in case you need to make some changes to the file later on.

A Note about WordPress

If you have a WordPress website, you are probably familiar with Plugins. You know how to install them and activate them. But did you know that WordPress pages can be slowed to a crawl by these Plugins?

Take a closer look and you will see that WordPress Plugins include at least one PHP file. They may also contain JavaScript files, CSS files, image files, language files, etc. Are you thinking what I’m thinking? Lots of HTTP requests! Wordpress and other CMS based websites that utilize Plugins and theme features can often have 10 or more JavaScript files and just as many Cascading Style Sheets.

Be sure to check your Plugins folder and see what Plugins you are not using. If you find some, you should deactivate them and remove them. Often times Plugins that have not been deactivated will still load on your page. Only use Plugins that you really need.

Optimizing WordPress by Moving JavaScript to the Footer

It is helpful to try to move CSS and Javascript files in your WordPress website to the footer. Don’t know how to do that? There are Plugins that will help. It sounds kind of hypocritical to use a Plugin to try to improve your website’s performance, but some really do work.  Autoptimize is a good example. It  will  optimize your blog’s HTML, JavaScript and CSS codes to make it leaner and faster. The plug-in is extremely simple to use, and provides just three configuration options – to optimize the HTML, JavaScript, and CSS.  Be sure to put your blog through a page speed test before and after using any WordPress Plugin to see how it affects your website’s performance.

In the classic tale of the Tortoise and the Hare, the Tortoise eventually wins the race through persistence and determination. He plods along step by step until he finally reaches the finish line. But your website visitors, though, sympathetic towards the underdog in any race, will not be so patient and understanding when it comes to visiting a website. A speedy website is likely to win against its competitors. In the mobile-friendly race, SPEED MATTERS.