{"id":3944,"date":"2014-03-08T11:26:54","date_gmt":"2014-03-08T11:26:54","guid":{"rendered":"http:\/\/www.crimsondesigns.com\/blog\/?p=3944"},"modified":"2025-03-05T18:54:39","modified_gmt":"2025-03-05T18:54:39","slug":"high-speed-mobile-friendly-web-design-tutorial","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/high-speed-mobile-friendly-web-design-tutorial\/","title":{"rendered":"High-Speed Mobile Friendly Web Design Tutorial"},"content":{"rendered":"<h2>Slow and Steady Wins the Race\u2026 sometimes. <strong>But not when it comes to <a href=\"https:\/\/www.crimsondesigns.com\/blog\/what-makes-a-website-mobile-friendly\/\">Mobile Friendly<\/a> Web Design.<\/strong><\/h2>\n<p>Mobile devices are slower than PCs. They tend to have less computing power, limiting the speed in which they can display information.<\/p>\n<ul class=\"wp-block-list\">\n<li>On desktops, the average loading time is 2.5 seconds<\/li>\n<li>Mobile devices take 8.6 seconds to load on average.<\/li>\n<\/ul>\n<p>Why is this important to web designers? As of 2024, 60.67% of website traffic comes from Mobile Devices. <span style=\"font-size: revert;\">So our mobile visitors can no longer be ignored.<\/span><\/p>\n<p><!--more--><\/p>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/03\/tortoise-and-hare3.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3947 size-full\" style=\"line-height: 1.5em;\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/03\/tortoise-and-hare3.gif\" alt=\"In the mobile friendly race, speed matters.\" width=\"650\" height=\"230\" \/><\/a><\/p>\n<p><strong>How do we speed up our websites for our mobile visitors?<\/strong><\/p>\n<h4><b>First, Utilize Page Speed Tools<\/b><\/h4>\n<ul>\n<li><a style=\"font-size: 1em;\" href=\"http:\/\/gtmetrix.com\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>GTMetrix<\/strong><\/a><span style=\"font-size: 1em;\">\u00a0&#8211; \u00a0This page analysis tool will help you develop a faster and more efficient website experience for your users.<\/span><\/li>\n<li><strong><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google\u2019s Page Speed Insights<\/a><\/strong> &#8211; 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.<\/li>\n<li><strong><a href=\"http:\/\/tools.pingdom.com\" target=\"_blank\" rel=\"noopener noreferrer\">Pingdom Website Speed Test<\/a><\/strong>\u00a0 &#8211; This Website Speed Test will tell you your page&#8217;s <b>load time<\/b> and your <b>page size,<\/b> helping you establish a baseline for improvement.<\/li>\n<\/ul>\n<p>The results of your page speed tests can be pretty discouraging at first. Try <strong>GTMetrix<\/strong> before you attempt to look at Google&#8217;s Page Speed Insights.<\/p>\n<p><b>We can all improve our page speed scores.<\/b><\/p>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/03\/tortoise31.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-3952 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/03\/tortoise31.gif\" alt=\"The more HTTP requests made, the slower a website will be.\" width=\"325\" height=\"260\" \/><\/a>First, let&#8217;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.<\/p>\n<p>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?<\/p>\n<h3>Images<\/h3>\n<p>Images can be a huge factor in the speed of your site. It is important to consider every image that goes into your site. \u00a0Consider removing any images that are not essential to your design and\u00a0make sure to always <strong>optimize<\/strong> them for the web. If you are working in Photoshop, this is as simple as selecting the\u00a0 <strong>&#8220;save for web&#8221;<\/strong> option and adjusting your image settings to create the smallest file possible that is not also pixelated or blurry.<\/p>\n<h4>Another Image Optimizing Tool besides Photoshop<\/h4>\n<ul>\n<li><a href=\"http:\/\/www.imgopt.com\" target=\"_blank\" rel=\"noopener noreferrer\">Smush.it<\/a> &#8211; Smush.it\u00a0uses optimization techniques specific to image format to remove unnecessary bytes from image files.<\/li>\n<\/ul>\n<h3>Javascript<\/h3>\n<p>Most browsers prevent the rest of the page from being loaded while a <strong>JavaScript<\/strong> 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.<\/p>\n<p><b>Combine JavaScript files<\/b><\/p>\n<p>Multiple JavaScript files can hurt a website&#8217;s load time. These scripts can often be combined. Doing this will drastically speed up page load time.<\/p>\n<p><b>Combine CSS files<\/b><\/p>\n<p>Loading multiple CSS files can also hurt a website&#8217;s load time. Combine as many stylesheets as you can into one file.<\/p>\n<p><b>Minify HTML, CSS, and JavaScript<\/b><\/p>\n<p><b>What is minification?<\/b><b> <\/b><b>Minification\u00a0<\/b>removes<b>\u00a0<\/b>all the white space from the code before serving it to visitors.<i>\u00a0<\/i>Servers and browsers don&#8217;t care about what the code looks like as long as it&#8217;s valid. HTML, CSS, and JavaScript can all be &#8220;minified&#8221; or compressed to speed up their loading time. There are a number of resources on the web that minify these types of files.\u00a0But 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.<\/p>\n<p><b>A Note about WordPress<\/b><\/p>\n<p><b><\/b>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?<\/p>\n<p>Take a closer look and you will see that <strong>WordPress Plugins<\/strong> include at least one PHP file. They may also contain JavaScript files, CSS files, image files, language files, etc. Are you thinking what I&#8217;m thinking? Lots of HTTP requests!\u00a0Wordpress 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.<\/p>\n<p>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.<\/p>\n<p><b>Optimizing WordPress by Moving JavaScript to the Footer<\/b><\/p>\n<p>It is helpful to try to move CSS and Javascript files in your <strong>WordPress website<\/strong> to the footer. Don&#8217;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&#8217;s performance, but some really do work. \u00a0<a href=\"http:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener noreferrer\">Autoptimize<\/a> is a good example. It \u00a0will \u00a0optimize your blog&#8217;s HTML, JavaScript and CSS codes to make it leaner and faster.\u00a0The plug-in is extremely simple to use, and provides just three configuration options \u2013 to optimize the HTML, JavaScript, and CSS.\u00a0 Be sure to put your blog through a <strong>page speed test<\/strong> before and after using any <strong>WordPress Plugin<\/strong> to see how it affects your website&#8217;s performance.<\/p>\n<p><a href=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/03\/hare31.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3950 size-full\" src=\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/03\/hare31.gif\" alt=\"finish line\" width=\"578\" height=\"274\" \/><\/a><\/p>\n<p>In the classic tale of the <strong>Tortoise and the Hare,<\/strong> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the classic tale of the Tortoise and the Hare, the Tortoise eventually wins the race through persistence and determination. But your website visitors will not be so patient and understanding. A speedy website is likely to win against its competitors. Slow and steady wins the race\u2026 sometimes. But not when it comes to mobile friendly web design.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,10],"tags":[104,299,156,260],"class_list":{"0":"post-3944","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web-design","7":"category-wordpress","8":"tag-image-optimization","9":"tag-mobile-friendly","10":"tag-page-speed","11":"tag-wordpress-plugins","12":"cat-9-id","13":"cat-10-id"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3944"}],"version-history":[{"count":4,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3944\/revisions"}],"predecessor-version":[{"id":7759,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3944\/revisions\/7759"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}