{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "resources",
    "type" : "single",
    "title" : "A Guide to Creating Mobile-Friendly Websites |Digital.gov",
    "description": "A Guide to Creating Mobile-Friendly Websites",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/resources/guide-create-mobile-friendly-websites/index.json","item" : [
    {"title" :"A Guide to Creating Mobile-Friendly Websites","deck" : "Five tactics for improving the performance of your website","summary" : "Based on a recent six-month study, this guide outlines the top five practices needed to improve the mobile-friendliness of federal websites: the optimization of JavaScript, CSS, and images, caching, and pop-ups.","date" : "2018-09-29T12:30:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","topics" : {
        
            "content-strategy" : "Content strategy",
            "mobile" : "Mobile"
            },"featured_image" : { "uid" :
  "army-mobile", "alt" :
  "" },"branch" : "bc-archive-content-3",
      "filename" :"guide-create-mobile-friendly-websites.md",
      
      "filepath" :"resources/guide-create-mobile-friendly-websites.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/resources/guide-create-mobile-friendly-websites.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/resources/guide-create-mobile-friendly-websites.md","slug" : "guide-create-mobile-friendly-websites","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/resources/guide-create-mobile-friendly-websites/","content" :"\u003cp\u003e\u003cem\u003eThis guide was created by \u003ca href=\"https://digital.gov/authors/david-fern/\"\u003eDavid Fern\u003c/a\u003e, Social Security Administration.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eJavaScript usage, CSS usage, image and resource sizing, caching/network usage, and pop-ups. These are the top practices that the most visited government websites should focus on in order to be more mobile-friendly. But how can you work on each of these areas to help ensure your website keeps mobile users delighted and coming back?\u003c/p\u003e\n\u003cp\u003eFor six months, from September 22, 2017 to March 22, 2018, the \u003ca href=\"https://digital.gov/services/mobile-application-testing-program/\"\u003eFederal Crowdsource Mobile Testing Program\u003c/a\u003e tested the 26 U.S. federal government websites that are most visited on mobile devices (smartphones and tablets) using seven mobile-friendly automated test tools. The results indicated that these were the common practices that make these sites not as mobile-friendly as a user might expect or want in a mobile experience. Most of these areas do not directly relate to usability issues, but instead, concern how the site is built (which can lead to poor performance). For more information on how we conducted the tests, see the Methodology section at the end.\u003c/p\u003e\n\u003cp\u003eThe information here outlines the top five practices we found across these sites:\u003c/p\u003e\n\u003col\u003e\n  \u003cli\u003e\u003cstrong\u003eOptimize JavaScript\u003c/strong\u003e \u003c/li\u003e\n    \u003cul\u003e\n      \u003cli\u003eJavaScript Placement \u003c/li\u003e\n      \u003cli\u003eJavaScript Minify \u003c/li\u003e\n      \u003cli\u003eDo Not Use Inline JavaScript \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003cli\u003e\u003cstrong\u003eOptimize CSS\u003c/strong\u003e \u003c/li\u003e\n    \u003cul\u003e\n      \u003cli\u003eAvoid Absolute Dimensions and Positions in CSS Directives \u003c/li\u003e\n      \u003cli\u003eUse External Stylesheets to Separate Caching of CSS from the Content \u003c/li\u003e\n      \u003cli\u003eCombine CSS Image Assets into Sprite Files \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003cli\u003e\u003cstrong\u003eOptimize Images\u003c/strong\u003e \u003c/li\u003e\n    \u003cul\u003e\n      \u003cli\u003eLimit Page Size and Weight \u003c/li\u003e\n      \u003cli\u003eEnable Resource Compression \u003c/li\u003e\n      \u003cli\u003eOptimize Images \u003c/li\u003e\n      \u003cli\u003eSpecify Image Dimensions \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003cli\u003e\u003cstrong\u003eUtilize Caching\u003c/strong\u003e \u003c/li\u003e\n    \u003cul\u003e\n      \u003cli\u003eLeverage Browser Caching \u003c/li\u003e\n      \u003cli\u003eCombine Multiple Files For Improved Performance \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003cli\u003e\u003cstrong\u003eAvoid Pop-ups\u003c/strong\u003e \u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eKeep in mind, if a website is developed using a content management system (CMS) or development framework, not all of these settings may be configurable. However, we suggest that developers research the capabilities of the system to determine if they can be. Some of these recommendations may occur in the web server layer, which may be separate from the program code.\u003c/p\u003e\n\n\n\n\n\n\n\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n        src=\"https://s3.amazonaws.com/digitalgov/army-mobile.jpg\"alt=\"A closeup on the hands of a person wearing Army camouflage, holding a cell phone with the Army website homepage on the screen.\"/\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"tactic-1-optimize-javascript\"\u003eTactic 1: Optimize JavaScript\u003c/h2\u003e\n\u003cp\u003eThe most common issue found is JavaScript use. JavaScript is used on many desktop and mobile applications because it extends the functionality of web pages, is a relatively easy language to learn and use, and it executes relatively quickly on the client side. However, if JavaScript is not placed and executed from an optimal place in the code, not minimized, nor used inline, it may negatively affect the application performance on mobile devices that traditionally have minimal resources.\u003c/p\u003e\n\u003ch3 id=\"javascript-placement\"\u003eJavaScript Placement\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Grouping JavaScript at the end of the page markup is optimal for page load. When the HTTP specification puts JavaScript elsewhere on the page (e.g. at the top), this may result in loading blocking while the JavaScript files are downloaded. Additionally, before the browser can render a page it has to build the DOM tree by parsing the HTML markup. Whenever the parser encounters a script, it stops and executes the script before it continues parsing. This slows the performance of the page load.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Put scripts in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag and use the \u003ccode\u003easync\u003c/code\u003e or \u003ccode\u003edefer\u003c/code\u003e attributes, which allows the scripts to be downloaded ASAP without blocking your browser.\u003c/p\u003e\n\u003cp\u003eScripts with the \u003ccode\u003easync\u003c/code\u003e attribute are executed asynchronously. This means the script is executed as soon as it is downloaded—without blocking the browser in the meantime—and that the second script can be downloaded and executed before the first script.\u003c/p\u003e\n\u003cp\u003eScripts with the \u003ccode\u003edefer\u003c/code\u003e attribute are executed in order (i.e., first script one, then script two). This also does not block the browser. Unlike \u003ccode\u003easync\u003c/code\u003e scripts, \u003ccode\u003edefer\u003c/code\u003e scripts are only executed after the entire document has been loaded.\u003c/p\u003e\n\u003ch4 id=\"references\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eFixit – JavaScript Placement | \u003ca href=\"https://mobiforge.com/design-development/fixit-javascript-placement\"\u003ehttps://mobiforge.com/design-development/fixit-javascript-placement\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eRemove Render Blocking JavaScript | \u003ca href=\"https://developers.google.com/speed/docs/insights/BlockingJS\"\u003ehttps://developers.google.com/speed/docs/insights/BlockingJS\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eReduce the size of the above the fold content | \u003ca href=\"https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent\"\u003ehttps://developers.google.com/speed/docs/insights/PrioritizeVisibleContent\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eWhere should I put \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e tags in HTML markup? | \u003ca href=\"http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup\"\u003ehttp://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"javascript-minify\"\u003eJavaScript Minify\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - JavaScript files should always be minimized to reduce transit time and help speed up page load.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Minification removes unnecessary or redundant data without affecting how the resource is processed by the browser. The Integrated Developer Environment (IDE) tool used to develop the site may include features that will minify the JavaScript during the build process. You can also do this with Google Closure tools, including the Closure Compiler, an optimizer that rewrites your code and minimizes the dead space to make it download quicker. It is typical to minify only in the production environment, as troubleshooting and debugging in the development environments will be easier with non-minified JavaScript.\u003c/p\u003e\n\u003ch4 id=\"references-1\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eMinify Resources (HTML, CSS, and JavaScript) | \u003ca href=\"https://developers.google.com/speed/docs/insights/MinifyResources\"\u003ehttps://developers.google.com/speed/docs/insights/MinifyResources\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eHow to Minify Your Websites CSS, HTML \u0026amp; JavaScript | \u003ca href=\"https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript\"\u003ehttps://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"do-not-use-inline-javascript\"\u003eDo Not Use Inline JavaScript\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Inline JavaScript code should not be used because it requires that the browser pass JavaScript code markup that slows processing.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Move all JavaScript code to a single minified file, which provides a clean separation of markup, style and code. This can also be accomplished by enabling the “Inline JavaScript” filter in Apache and Nginx web servers.\u003c/p\u003e\n\u003ch4 id=\"references-2\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eFixit – Inline JavaScript | \u003ca href=\"https://mobiforge.com/design-development/fixit-inline-javascript\"\u003ehttps://mobiforge.com/design-development/fixit-inline-javascript\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eInline JavaScript | \u003ca href=\"https://modpagespeed.com/doc/filter-js-inline\"\u003ehttps://modpagespeed.com/doc/filter-js-inline\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eWhy Inline CSS and JavaScript Code is Such a Bad Thing | \u003ca href=\"https://dzone.com/articles/why-inline-css-and-javascript-\"\u003ehttps://dzone.com/articles/why-inline-css-and-javascript-\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eResources\u003c/strong\u003e:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eJavaScript: Advantages and Disadvantages \u003ca href=\"http://www.jscripters.com/javascript-advantages-and-disadvantages/\"\u003ehttp://www.jscripters.com/javascript-advantages-and-disadvantages/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"tactic-2-optimize-css\"\u003eTactic 2: Optimize CSS\u003c/h2\u003e\n\u003cp\u003eCascading Style Sheets (CSS) describe how HTML elements are to be displayed on screen, can save a lot of work, and can control the layout of multiple web pages simultaneously.\u003c/p\u003e\n\u003cp\u003eHowever, CSS can increase application load time if absolute dimensions and positions in CSS directives are specified, external stylesheets are not used to separate caching of the CSS from the content, CSS image assets are not combined into Sprite files, and/or there is more than one \u003ccode\u003eH1\u003c/code\u003e tag per page.\u003c/p\u003e\n\u003ch3 id=\"avoid-absolute-dimensions-and-positions-in-css-directives\"\u003eAvoid Absolute Dimensions and Positions in CSS directives\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Pixel and absolute dimensions and positions in CSS directives should be avoided, as they may not allow the browser to adapt content to fit the display or render correctly on all device types. However, there are exceptions to this rule. For example, if you want images to be tailored to fit a particular display it makes more sense to specify the dimension in pixels. In addition, pixel measures may be appropriate for margins, borders, and padding.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e – Use relative measures such as \u003ccode\u003eem\u003c/code\u003e, \u003ccode\u003eex\u003c/code\u003e, \u003ccode\u003ebolder\u003c/code\u003e, \u003ccode\u003elarger\u003c/code\u003e, and \u003ccode\u003ethick\u003c/code\u003e where possible. For example, when specifying font, use \u003ccode\u003efont-size: 1.5em\u003c/code\u003e instead of \u003ccode\u003efont-size: 12px\u003c/code\u003e.\u003c/p\u003e\n\u003ch4 id=\"references-3\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eFixit - Measures | \u003ca href=\"https://mobiforge.com/design-development/fixit-measures\"\u003ehttps://mobiforge.com/design-development/fixit-measures\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"use-external-stylesheets-to-separate-caching-of-css-from-the-content\"\u003eUse External Stylesheets to Separate Caching of CSS from the Content\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e – External stylesheets should be used to separate the CSS instructions from the HTML. This CSS caching by a web browser avoids another trip to the server and speeds up page loading.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e – In the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section of the HTML, use language to call the CSS file externally, keeping the CSS instructions in a separate file from the HTML (see below).\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"background-color:#fff;-moz-tab-size:2;-o-tab-size:2;tab-size:2;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888\"\u003e\u0026lt;\u003c/span\u003e\u003cspan style=\"color:#2838b0\"\u003elink\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003erel\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;stylesheet\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003etype\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;text/css\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003ehref\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;https://mysite.com/main.css\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003emedia\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;screen\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003etitle\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;style (screen)\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#888\"\u003e/\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003cstrong\u003eCaveat\u003c/strong\u003e: Using many external CSS stylesheets can adversely affect performance, so they should be combined into a single external CSS.\u003c/p\u003e\n\u003ch4 id=\"references-4\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eInternal vs External CSS | \u003ca href=\"http://infoheap.com/internal-vs-external-css/\"\u003ehttp://infoheap.com/internal-vs-external-css/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eOptimize CSS Delivery | \u003ca href=\"https://varvy.com/pagespeed/optimize-css-delivery.html\"\u003ehttps://varvy.com/pagespeed/optimize-css-delivery.html\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"combine-css-image-assets-into-sprite-files\"\u003eCombine CSS Image Assets into Sprite Files\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - When many images are used independently, it requires several network requests to download each one. CSS Sprites combine multiple images into a single image file for use on a website to speed up delivery and load time. The file can then be cut up using CSS.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - You can find many tools to create sprite sheets, including Compass, Lemonade, SpriteMe, Fireworks CS6, and TexturePacker.\u003c/p\u003e\n\u003ch4 id=\"references-5\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eFixit – Image Sprints | \u003ca href=\"https://mobiforge.com/design-development/fixit-image-sprites\"\u003ehttps://mobiforge.com/design-development/fixit-image-sprites\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eCSS Sprites: What They are, Why They’re Cool, and How to Use Them | \u003ca href=\"https://css-tricks.com/css-sprites/\"\u003ehttps://css-tricks.com/css-sprites/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eCSS Sprite Sheets: Best Practices, Tools and Helpful Applications | \u003ca href=\"https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340\"\u003ehttps://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications\u0026ndash;webdesign-8340\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"resources\"\u003eResources\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eWhat is CSS? | \u003ca href=\"https://www.w3schools.com/css/css_intro.asp\"\u003ehttps://www.w3schools.com/css/css_intro.asp\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"tactic-3-optimize-images\"\u003eTactic 3: Optimize Images\u003c/h2\u003e\n\u003cp\u003ePage weight, also known as \u0026ldquo;the gravity of the web,\u0026rdquo; decreases your application performance by increasing load time and reducing network data usage. Understanding page weight, resource compression, optimization of images, and image dimensions is critical to a successful web strategy.\u003c/p\u003e\n\u003ch3 id=\"limit-page-size-and-weight\"\u003eLimit Page Size and Weight\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - The total file size of the page including dependent files will affect the load time and the amount of time it takes a mobile crawler to evaluate. Clean and light pages are best for mobile SEO; mobile search engines will prefer to rank these pages. Strive to keep the file size of all mobile pages below 25 kilobytes. This is the maximum file size that the iPhone will cache for any element that is downloaded.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - There are many ways to reduce page weight including image optimization, gzip compression, Minification, Caching, JavaScript, and CSS consolidation. Other solutions include avoiding the following: embeds and includes, JavaScript and CSS frameworks, custom fonts, and unnecessary page clutter. The best solution depends on the specifics of your site.\u003c/p\u003e\n\u003ch4 id=\"references-6\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eFixit – Page Size Limit | \u003ca href=\"https://mobiforge.com/design-development/fixit-page-size-limit\"\u003ehttps://mobiforge.com/design-development/fixit-page-size-limit\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eUnderstanding Page Weight | \u003ca href=\"https://mobiforge.com/research-analysis/understanding-web-page-weight\"\u003ehttps://mobiforge.com/research-analysis/understanding-web-page-weight\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eReducing Page Weight | \u003ca href=\"https://mobiforge.com/design-development/reducing-page-weight\"\u003ehttps://mobiforge.com/design-development/reducing-page-weight\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"enable-resource-compression\"\u003eEnable Resource Compression\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Compressing resources with gzip or Deflate can reduce the number of bytes sent over the network.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Most servers can be configured to use gzip compression. For example, you can enable gzip compression on an Apache server using the \u003ccode\u003e.htaccess\u003c/code\u003e configuration file. You can also use mod_gzip to enable gzip compression, and mod_deflate to compress the output from your server before sending it to your visitor. If your site is hosted on a Windows server, you can enable compression for both static and dynamic files by selecting “enable static compression” in the IIS (Internet Information Services) manager.\u003c/p\u003e\n\u003ch4 id=\"references-7\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eEnable Compression | \u003ca href=\"https://developers.google.com/speed/docs/insights/EnableCompression\"\u003ehttps://developers.google.com/speed/docs/insights/EnableCompression\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eEnable gzip Compression | \u003ca href=\"https://varvy.com/pagespeed/enable-compression.html\"\u003ehttps://varvy.com/pagespeed/enable-compression.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eHow to Enable gzip Compression | \u003ca href=\"https://www.giftofspeed.com/enable-gzip-compression/\"\u003ehttps://www.giftofspeed.com/enable-gzip-compression/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"optimize-images\"\u003eOptimize Images\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Images on the page should be optimized to reduce their file size without significantly affecting their visual quality. Formatting and compressing images can save many bytes of data.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Use image compression apps to easily reduce the file size of images. These tools remove hidden data in the image file, like additional color profiles and metadata (e.g., geolocation of where the photograph was taken), that aren’t needed. They provide a quick and easy way to reduce files size without losing any image quality. Image compression tools include TinyJPG, Compressor.io, Kraken, ImageOptimizer, ImageOptim, Crush Pics, and Minifier (Shopify Apps).\u003c/p\u003e\n\u003ch4 id=\"references-8\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eOptimize Images | \u003ca href=\"https://developers.google.com/speed/docs/insights/OptimizeImages\"\u003ehttps://developers.google.com/speed/docs/insights/OptimizeImages\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eFixit – Image Crunch | \u003ca href=\"https://mobiforge.com/design-development/fixit-image-crunch\"\u003ehttps://mobiforge.com/design-development/fixit-image-crunch\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eOptimizing Images for Web: A practical Guide | \u003ca href=\"https://www.abetterlemonadestand.com/optimizing-images-for-web/\"\u003ehttps://www.abetterlemonadestand.com/optimizing-images-for-web/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eHow to Optimize Images for Your WordPress Website | \u003ca href=\"https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website\"\u003ehttps://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"specify-image-dimensions\"\u003eSpecify Image Dimensions\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Image dimensions should always be included and images should not be resampled at run-time, as this will slow the rendering of the page. When images are referenced from within your markup, you should list their display dimensions for the browser. Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Specify image width and height by including the \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003eheight\u003c/code\u003e attributes when you use the \u003ccode\u003eimg\u003c/code\u003e element (see below).\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"background-color:#fff;-moz-tab-size:2;-o-tab-size:2;tab-size:2;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888\"\u003e\u0026lt;\u003c/span\u003e\u003cspan style=\"color:#2838b0\"\u003eimg\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003esrc\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;images/clown.jpg\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003ewidth\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;50\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#388038\"\u003eheight\u003c/span\u003e\u003cspan style=\"color:#666\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e\u0026#34;50\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#888\"\u003e/\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eIf no dimensions are specified in the containing document, or if the dimensions specified do not match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images either in the HTML \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e tag or in CSS.\u003c/p\u003e\n\u003ch4 id=\"references-9\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eFixit – Specify Image Sizes | \u003ca href=\"https://mobiforge.com/design-development/fixit-specify-image-sizes\"\u003ehttps://mobiforge.com/design-development/fixit-specify-image-sizes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eSpecify Image Dimensions | \u003ca href=\"https://gtmetrix.com/specify-image-dimensions.html\"\u003ehttps://gtmetrix.com/specify-image-dimensions.html\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"tactic-4-utilize-caching\"\u003eTactic 4: Utilize Caching\u003c/h2\u003e\n\u003cp\u003eReducing the number of times your application requests and processes resources will improve your load time and reduce network data usage. You can do this in two ways: local caching or minimizing the use of external scripts and objects.\u003c/p\u003e\n\u003ch3 id=\"leverage-browser-caching\"\u003eLeverage Browser Caching\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Fetching resources over the network is both slow and expensive and the download may require multiple round-trips between the client and server, which delays processing and may block rendering of page content. This can also incur data costs for the visitor. All server responses should specify a caching policy to help the client determine if and when they can reuse a previously fetched response.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Leverage browser caching by changing the request headers of your resources to use caching. You can either add some code to the \u003ccode\u003e.htaccess\u003c/code\u003e configuration file on the web host/server or use the basic \u003ccode\u003eCache-Control\u003c/code\u003e HTTP header (see below).\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"background-color:#fff;-moz-tab-size:2;-o-tab-size:2;tab-size:2;\"\u003e\u003ccode class=\"language-nginx\" data-lang=\"nginx\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003eCache-Control:\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003emax-age=2592000,\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003epublic\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch4 id=\"references-10\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eLeverage Browser Caching | \u003ca href=\"https://developers.google.com/speed/docs/insights/LeverageBrowserCaching\"\u003ehttps://developers.google.com/speed/docs/insights/LeverageBrowserCaching\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eFixit - Caching | \u003ca href=\"https://mobiforge.com/design-development/fixit-caching\"\u003ehttps://mobiforge.com/design-development/fixit-caching\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eLeverage Browser Caching | \u003ca href=\"https://varvy.com/pagespeed/leverage-browser-caching.html\"\u003ehttps://varvy.com/pagespeed/leverage-browser-caching.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eWhat is .htaccess? | \u003ca href=\"http://www.htaccess-guide.com/\"\u003ehttp://www.htaccess-guide.com/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eCache-Control | \u003ca href=\"https://varvy.com/pagespeed/cache-control.html\"\u003ehttps://varvy.com/pagespeed/cache-control.html\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"combine-multiple-files-for-improved-performance\"\u003eCombine Multiple Files For Improved Performance\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Every external object downloaded on a page requires a separate domain name server (DNS) request. This is not a big problem on a traditional computer with a fast connection, but on slower mobile networks it can cause latency. This will hurt application performance and load time.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - Reduce the number and size of resources required for the site. However, if that is not possible, combine all external CSS files into a single style sheet or all JavaScript files into one big file to reduce the number of calls to the browser.\u003c/p\u003e\n\u003ch4 id=\"references-11\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eMobile Web Application Best Practices – Minimize External Resources | \u003ca href=\"https://www.w3.org/TR/mwabp/#bp-conserve-ext-files\"\u003ehttps://varvy.com/pagespeed/cache-control.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eHow to Reduce HTTP requests to Speed Up Your WordPress Site | \u003ca href=\"https://yoast.com/reduce-http-requests-wordpress/\"\u003ehttps://yoast.com/reduce-http-requests-wordpress/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eEasy Steps to Improve Page Load Times | \u003ca href=\"http://www.peachpit.com/articles/article.aspx?p=1431494\u0026amp;seqNum=5\"\u003ehttp://www.peachpit.com/articles/article.aspx?p=1431494\u0026amp;seqNum=5\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"tactic-5-avoid-pop-ups\"\u003eTactic 5: Avoid Pop-ups\u003c/h2\u003e\n\u003cp\u003eThe use of pop-ups is not necessarily bad on a desktop application. However, if the application uses responsive design or is used on a mobile application, pop-ups often obstruct and hurt the user experience. They draw the user\u0026rsquo;s attention away from the page to the pop-up, and the novice user quickly becomes confused and frustrated.\u003c/p\u003e\n\u003ch3 id=\"pop-ups\"\u003ePop-ups\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eIssue\u003c/strong\u003e - Pop-up windows are not supported on many mobile devices and using them can have unpredictable results\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSolution\u003c/strong\u003e - There are many alternatives to pop-ups that are visible without taking up the entire window, such as lightboxes, inline expansion, and stationary banner ads.\u003c/p\u003e\n\u003ch4 id=\"references-12\"\u003eReferences\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eFixit – Pop-up Windows | \u003ca href=\"https://mobiforge.com/design-development/fixit-pop-windows\"\u003ehttps://mobiforge.com/design-development/fixit-pop-windows\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eThe Death of Mobile Pop-Ups and What You Can Do Instead | \u003ca href=\"http://searchengineland.com/death-mobile-pop-ups-can-instead-263390\"\u003ehttp://searchengineland.com/death-mobile-pop-ups-can-instead-263390\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eGoogle is Cracking Down on Intrusive Mobile Pop-Ups: Here\u0026rsquo;s What Marketers Need to Know | \u003ca href=\"https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf\"\u003ehttps://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eWhich is the Best Alternative to a Pop-up? | \u003ca href=\"https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up\"\u003ehttps://www.quora.com/Which-is-the-best-alternative-to-a-pop-up\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e5 Essential UX Rules for Dialog Design | \u003ca href=\"https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116\"\u003ehttps://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e9 Not So Intrusive Alternatives to Hover Pop-up Ads | \u003ca href=\"https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius\"\u003ehttps://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"our-methodology-for-this-study\"\u003eOur Methodology for This Study\u003c/h2\u003e\n\u003cp\u003eWe used the following steps to conduct this study:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eUsing \u003ca href=\"https://digital.gov/dap/\"\u003eDigital Analytics Program\u003c/a\u003e (DAP) statistics, we pulled the names of the top 26 U.S. federal government websites accessed by mobile devices.\u003c/li\u003e\n\u003cli\u003eWe tested each site using seven mobile-friendly automated test tools:\n\u003cul\u003e\n\u003cli\u003eGoogle Mobile-Friendly Test | \u003ca href=\"https://www.google.com/webmasters/tools/mobile-friendly/\"\u003ehttps://www.google.com/webmasters/tools/mobile-friendly/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMobile Moxie | \u003ca href=\"https://www.mobilemoxie.com/tools/site_analysis/\"\u003ehttps://www.mobilemoxie.com/tools/site_analysis/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eMobi Ready | \u003ca href=\"http://ready.mobi/\"\u003ehttp://ready.mobi/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003ePage Insights | \u003ca href=\"https://developers.google.com/speed/pagespeed/insights/\"\u003ehttps://developers.google.com/speed/pagespeed/insights/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eW3C MobileOK Checker | \u003ca href=\"https://validator.w3.org/mobile/\"\u003ehttps://validator.w3.org/mobile/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eVarvy SEO tool | \u003ca href=\"https://varvy.com/\"\u003ehttps://varvy.com/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eGtmetrix - \u003ca href=\"https://gtmetrix.com/\"\u003ehttps://gtmetrix.com/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eAfter looking at the failed criteria reported by each tool, we compiled the results into a single Microsoft Excel spreadsheet.\u003c/li\u003e\n\u003cli\u003eWe grouped the issues that we found on 15 or more sites into the five categories covered in this guide, which are listed in order of most occurrences (JavaScript) to least occurrences (pop-ups).\u003c/li\u003e\n\u003c/ol\u003e\n\u003chr\u003e\n\u003cp\u003e\u003cstrong\u003eDisclaimer\u003c/strong\u003e: All references to specific brands and/or companies are used only for illustrative purposes and do not imply endorsement by the U.S. federal government or any federal government agency.\u003c/p\u003e\n"}
  ]
}