{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "guides",
    "type" : "single",
    "title" : "The smaller the better, when it comes to page resources! |Digital.gov",
    "description": "The smaller the better, when it comes to page resources!",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/optimize-minify-compression/index.json","item" : [
    {"title" :"The smaller the better, when it comes to page resources!","summary" : "Week six of our series covers making page resources smaller to improve page rendering.","date" : "2018-12-21T10:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","primary_image" : { "uid" : "guide-mobile-principles", "alt" :
  "Vector illustration of a mobile phone", "width" :
  "1200", "height" :
  "630", "credit" :
  "Irina_Strelnikova/iStock via Getty Images", "caption" :
  "", "format" :
  "png" },"branch" : "bc-archive-content-3",
      "filename" :"principles-optimize-minify-compression.md",
      
      "filepath" :"guides/mobile-principles/principles-optimize-minify-compression.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/guides/mobile-principles/principles-optimize-minify-compression.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/guides/mobile-principles/principles-optimize-minify-compression.md","slug" : "optimize-minify-compression","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/optimize-minify-compression/","aliases" : {"0" : "/resources/mobile/principles/optimize-minify-compression"},"content" :"\u003cp\u003eThis week we will talk about making page resources smaller to improve the rendering of the page.\u003c/p\u003e\n\u003cp\u003eThe incorrect sizing and placement of objects on a site may lead to longer page load times and mobile unfriendliness. Mobile devices are getting faster with every new release, however they still rely on the mobile network to get the information to the device and we have all been in locations where we have little to no bars of connectivity. If we can reduce the size of what is being sent over the network, the page will load faster. The following are 5 solutions to make your page content lighter:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eEnable Compression\u003c/li\u003e\n\u003cli\u003eMinify Resources\u003c/li\u003e\n\u003cli\u003eOptimize Images\u003c/li\u003e\n\u003cli\u003eOptimize CSS Delivery\u003c/li\u003e\n\u003cli\u003ePrioritize Visible Content\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"enable-compression\"\u003eEnable Compression\u003c/h2\u003e\n\u003ch3 id=\"issue-large-page-files-which-result-in-poor-rendering-performance\"\u003eIssue: Large page files, which result in poor rendering performance\u003c/h3\u003e\n\u003cp\u003eEnabling file compression typically saves around 50 to 70 percent of the file size, and may reduce the size of page resources by up to 90 percent. This will significantly reduce the time it takes to download the resource, and improve the time to first render the page. A good standard practice is to use gzip since all modern browsers support gzip compression for HTTP requests.\u003c/p\u003e\n\u003ch3 id=\"solution-use-gzip-on-compressible-resources\"\u003eSolution: Use gzip on compressible resources!\u003c/h3\u003e\n\u003cp\u003eYour web server has gzip compression enabled (but may be configured differently depending on the specific server). The following four examples, \u003ca href=\"https://varvy.com/pagespeed/enable-compression.html\"\u003eoutlined in a blog post on Varvy.com\u003c/a\u003e, are ways to enable gzip on some of the most common servers.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eGeneral .htaccess\u003c/strong\u003e — Enable the zip parameters in the \u003ccode\u003e.htaccess\u003c/code\u003e file. Below is an example:\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-.htaccess\" data-lang=\".htaccess\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003e\u0026lt;ifModule\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003emod_gzip.c\u003c/span\u003e\u003cspan style=\"color:#2838b0\"\u003e\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_on\u003c/span\u003e Yes\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_dechunk\u003c/span\u003e Yes\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_item_include\u003c/span\u003e file .(html?|txt|css|js|php|pl)$\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_item_include\u003c/span\u003e handler ^cgi-script$\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_item_include\u003c/span\u003e mime ^text/.*\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_item_include\u003c/span\u003e mime ^application/x-javascript.*\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_item_exclude\u003c/span\u003e mime ^image/.*\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003emod_gzip_item_exclude\u003c/span\u003e rspheader ^Content-Encoding:.*gzip.*\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003e\u0026lt;/ifModule\u0026gt;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003cstrong\u003eApache Server\u003c/strong\u003e — Enable the zip parameters in the \u003ccode\u003e.htaccess\u003c/code\u003e file. Below is an example:\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-.htaccess\" data-lang=\".htaccess\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE text/plain\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE text/html\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE text/xml\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE text/css\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE application/xml\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE application/xhtml+xml\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE application/rss+xml\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE application/javascript\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#388038\"\u003eAddOutputFilterByType\u003c/span\u003e DEFLATE application/x-javascript\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003cstrong\u003eNGINX Server\u003c/strong\u003e — Enable compression by adding the following code to your config file:\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\"\u003egzip\u003c/span\u003e \u003cspan style=\"color:#b85820\"\u003eon\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003egzip_comp_level\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e2\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003egzip_http_version\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e1\u003c/span\u003e\u003cspan style=\"color:#b83838\"\u003e.0\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003egzip_proxied\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003eany\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003egzip_min_length\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e1100\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003egzip_buffers\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e16\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e8k\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#2838b0\"\u003egzip_types\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003etext/plain\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003etext/html\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003etext/css\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003eapplication/x-javascript\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#b83838\"\u003etext/xml\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003eapplication/xml\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003eapplication/xml+rss\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003etext/javascript\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888;font-style:italic\"\u003e# Disable for IE \u0026amp;lt; 6 because there are some known problems\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888;font-style:italic\"\u003e\u003c/span\u003e\u003cspan style=\"color:#2838b0\"\u003egzip_disable\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003e\u0026#34;MSIE\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003e[1-6].(?!.*SV1)\u0026#34;\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888;font-style:italic\"\u003e# Add a vary header for downstream proxies to avoid sending cached\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888;font-style:italic\"\u003e\u003c/span\u003e\u003cspan style=\"color:#2838b0\"\u003egzipped\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003efiles\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003eto\u003c/span\u003e \u003cspan style=\"color:#b83838\"\u003eIE6\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#b83838\"\u003egzip_vary\u003c/span\u003e \u003cspan style=\"color:#b85820\"\u003eon\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003cstrong\u003eLitespeed Server\u003c/strong\u003e — Under the server\u0026rsquo;s configuration section, go to “Tuning” and make sure that “enable compression” is on.\u003c/p\u003e\n\u003cp\u003eYou can quickly a test with a gzip compression tool, such as \u003ca href=\"https://varvy.com/tools/gzip/\"\u003ehttps://varvy.com/tools/gzip/\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eOne final word of caution: proxy servers and anti-virus software may disable compression as files are downloaded to a client machine.\u003c/p\u003e\n\u003ch3 id=\"references\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eEnable Compression\u003c/strong\u003e | \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\u003e\u003cstrong\u003eEnable Gzip Compression\u003c/strong\u003e | \u003ca href=\"https://varvy.com/pagespeed/enable-compression.html\"\u003ehttps://varvy.com/pagespeed/enable-compression.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eHow to Fix PageSpeed Insights Enable Compression in WordPress\u003c/strong\u003e | \u003ca href=\"https://www.proteusthemes.com/help/fix-pagespeed-insights-enable-compression-wordpress/\"\u003ehttps://www.proteusthemes.com/help/fix-pagespeed-insights-enable-compression-wordpress/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"minify-resources\"\u003eMinify Resources\u003c/h2\u003e\n\u003ch3 id=\"issue-large-css-javascript-and-html-files-increase-download-speeds\"\u003eIssue: Large CSS, JavaScript, and HTML Files Increase Download Speeds\u003c/h3\u003e\n\u003cp\u003eTo improve performance CSS, JavaScript, and HTML files should be as lean as possible. Minification is the process of removing unnecessary or redundant data, unnecessary spaces, formatting and comments from the files, without affecting how the resource is processed by the browser - e.g., code comments and formatting, removing unused code, and using shorter variable and function names. This in turn reduces the file size and potentially increases the download speed of the file to the browser.\u003c/p\u003e\n\u003cp\u003eThe following is an example of how minification reduces a CSS file.\u003c/p\u003e\n\u003cp\u003eThe following is the CSS file text that has not been minimized:\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-css\" data-lang=\"css\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888;font-style:italic\"\u003e/* Slider Comment 1 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888\"\u003e#\u003c/span\u003e\u003cspan style=\"color:#289870\"\u003eslider\u003c/span\u003e \u003cspan style=\"color:#2838b0\"\u003eul\u003c/span\u003e \u003cspan style=\"color:#888\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003eposition\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444;font-style:italic\"\u003erelative\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003emargin\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e0\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003epadding\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e0\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003eheight\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e200\u003c/span\u003e\u003cspan style=\"color:#2838b0;font-style:italic\"\u003epx\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003elist-style\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444;font-style:italic\"\u003enone\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888\"\u003e}\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888;font-style:italic\"\u003e/* Slider Comment 2 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888\"\u003e#\u003c/span\u003e\u003cspan style=\"color:#289870\"\u003eslider\u003c/span\u003e \u003cspan style=\"color:#2838b0\"\u003eul\u003c/span\u003e \u003cspan style=\"color:#2838b0\"\u003eli\u003c/span\u003e \u003cspan style=\"color:#888\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003eposition\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444;font-style:italic\"\u003erelative\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003edisplay\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444;font-style:italic\"\u003eblock\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003efloat\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444;font-style:italic\"\u003eleft\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003emargin\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e0\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003epadding\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e0\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003ewidth\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e500\u003c/span\u003e\u003cspan style=\"color:#2838b0;font-style:italic\"\u003epx\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003eheight\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e300\u003c/span\u003e\u003cspan style=\"color:#2838b0;font-style:italic\"\u003epx\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003ebackground\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e#ccc\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003etext-align\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444;font-style:italic\"\u003ecenter\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#2838b0\"\u003eline-height\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e:\u003c/span\u003e \u003cspan style=\"color:#444\"\u003e300\u003c/span\u003e\u003cspan style=\"color:#2838b0;font-style:italic\"\u003epx\u003c/span\u003e\u003cspan style=\"color:#888\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#888\"\u003e}\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eThe following is the CSS file text minimized, notice the difference, no white space and everything on one line:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003e#slider ul {position:relative; margin:0; padding:0; height:200px; list-style:none;} #slider ul li {position:relative; display:block; float:left; margin:0; padding:0; width:500px; height:300px; background:#ccc; text-align:center; line-height:300px;} \u003c/code\u003e\u003c/p\u003e\n\u003ch3 id=\"solution-use-tools-to-minify-css-javascript-and-html-files\"\u003eSolution: Use tools to minify CSS, JavaScript, and HTML files!\u003c/h3\u003e\n\u003cp\u003eEach file type requires a different process to minimize the file, and there are many tools available to minify each file type. The following are some examples.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHTML\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003ehtml-minifier - \u003ca href=\"https://github.com/kangax/html-minifier\"\u003ehttps://github.com/kangax/html-minifier\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eHTML Minifier tool - \u003ca href=\"https://www.webnots.com/seo-tools/html-minifier\"\u003ehttps://www.webnots.com/seo-tools/html-minifier\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCSS\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003ecssnano - \u003ca href=\"https://github.com/cssnano/cssnano\"\u003ehttps://github.com/cssnano/cssnano\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003ecsso - \u003ca href=\"https://github.com/css/csso\"\u003ehttps://github.com/css/csso\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eCSS Minifier - \u003ca href=\"https://www.webnots.com/seo-tools/css-minifier\"\u003ehttps://www.webnots.com/seo-tools/css-minifier\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003eUglifyJS2 - \u003ca href=\"https://github.com/mishoo/UglifyJS2\"\u003ehttps://github.com/mishoo/UglifyJS2\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eJSMin - \u003ca href=\"http://crockford.com/javascript/jsmin\"\u003ehttp://crockford.com/javascript/jsmin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eYUI Compressor - \u003ca href=\"http://yui.github.io/yuicompressor/\"\u003ehttp://yui.github.io/yuicompressor/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eJS Minifier - \u003ca href=\"https://www.webnots.com/seo-tools/js-minifier\"\u003ehttps://www.webnots.com/seo-tools/js-minifier\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"references-1\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eMinify Resources (HTML, CSS, and JavaScript)\u003c/strong\u003e | \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\u003e\u003cstrong\u003eYSlow: Minify JavaScript and CSS\u003c/strong\u003e | \u003ca href=\"https://gtmetrix.com/minify-javascript-and-css.html\"\u003ehttps://gtmetrix.com/minify-javascript-and-css.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eWhat is Minification and How to Minify CSS, JS and HTML?\u003c/strong\u003e | \u003ca href=\"https://www.webnots.com/what-is-minification-of-css-javascript-and-html/\"\u003ehttps://www.webnots.com/what-is-minification-of-css-javascript-and-html/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"optimize-images\"\u003eOptimize Images\u003c/h2\u003e\n\u003ch3 id=\"issue-image-files-are-too-large-and-impact-performance\"\u003eIssue: Image files are too large and impact performance\u003c/h3\u003e\n\u003cp\u003eTo improve performance, images should be as lean as possible. We often create or save beautiful colorful images to our site not understanding that images often account for most of the downloaded bytes on a page. Images hold data other than simply the pixels we see on the screen; this data increases the size of the image file, which in turn leads to longer load times as the image downloads.\u003c/p\u003e\n\u003cp\u003eAdditionally, there are two forms of compression: Lossy and Lossless. The Lossless format retains all the information needed to produce the original image. So Lossless images carry a lot more data and in return are a much larger file size, while the Lossy formatted images will look slightly different than the original image when uncompressed. Keep in mind that this is noticeable. Lossy compression is good for web because images use a smaller amount of memory, but can look like the original image.\u003c/p\u003e\n\u003cp\u003eWe choose to optimize images because 90 percent of most websites are graphics-dependent and therefore have a lot of image files. Leaving these images uncompressed and in the wrong format can drastically slow down your page load times.\u003c/p\u003e\n\u003ch3 id=\"solution-use-tools-to-compress-image-files\"\u003eSolution: Use tools to compress image files!\u003c/h3\u003e\n\u003cp\u003eWhile image optimization is still more of an “art” than a science, the following are three key considerations when optimizing an image:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eUse Proper File Formats\u003c/strong\u003e – For graphics such as icons, bullets or other graphics that don\u0026rsquo;t use many colors, use a \u003ca href=\"https://en.wikipedia.org/wiki/GIF\"\u003eGIF file format\u003c/a\u003e and save the file with fewer colors. However, if your image has more detailed graphics and colors, use \u003ca href=\"https://en.wikipedia.org/wiki/JPEG\"\u003eJPEG file format\u003c/a\u003e to save your images and reduce the quality. The following are a few more file format recommendations:\n\u003cul\u003e\n\u003cli\u003eUse JPEG files for all high quality photographic images\u003c/li\u003e\n\u003cli\u003eUse GIF files for imagines that contain animation or very small or simple graphics. For example, images less than 10 x 10 pixels, or a color palette of fewer than 3 colors\u003c/li\u003e\n\u003cli\u003eNever use \u003ca href=\"https://en.wikipedia.org/wiki/BMP_file_format\"\u003eBMP\u003c/a\u003e or \u003ca href=\"https://en.wikipedia.org/wiki/TIFF\"\u003eTIFF\u003c/a\u003e image files\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSave the Image Using Proper Dimensions\u003c/strong\u003e - Save the image in the desired size to reduce the file size instead of using HTML or CSS to resize your images. This will improve the rendering time. There are many programs available to resize images—from the simple \u003ca href=\"https://www.gimp.org/\"\u003eGNU Image Manipulation Program\u003c/a\u003e (GIMP), to more advanced software programs such as Photoshop, Illustrator, or Fireworks.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eOptimize the Image\u003c/strong\u003e - Crop your images to remove any whitespace around the image, and use CSS to provide padding. Image optimization is done using one of many tools depending on the format. The following are some examples of image compression tools.\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eMultiple File Types\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003eImageMagick \u003ca href=\"https://www.imagemagick.org/script/convert.php\"\u003ehttps://www.imagemagick.org/script/convert.php\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eJPEG\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003eJPEE 9 \u003ca href=\"http://jpegclub.org/\"\u003ehttp://jpegclub.org/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003ejpegoptim \u003ca href=\"http://freshmeat.sourceforge.net/projects/jpegoptim/\"\u003ehttp://freshmeat.sourceforge.net/projects/jpegoptim/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePNG\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003eOptiPNG: Advanced PNG Optimizer \u003ca href=\"http://optipng.sourceforge.net/\"\u003ehttp://optipng.sourceforge.net/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003ePNGOUT \u003ca href=\"http://www.advsys.net/ken/util/pngout.htm\"\u003ehttp://www.advsys.net/ken/util/pngout.htm\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"references-2\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eOptimize Images\u003c/strong\u003e | \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\u003e\u003cstrong\u003ePageSpeed: Optimize Images\u003c/strong\u003e | \u003ca href=\"https://gtmetrix.com/optimize-images.html\"\u003ehttps://gtmetrix.com/optimize-images.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eImage Optimization 101 – Optimize Blog Post Images For SEO\u003c/strong\u003e | \u003ca href=\"https://www.bloggertipstricks.com/image-optimization-seo.html\"\u003ehttps://www.bloggertipstricks.com/image-optimization-seo.html\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"optimize-css-delivery\"\u003eOptimize CSS Delivery\u003c/h2\u003e\n\u003ch3 id=\"issue-render-blocking-style-sheets-results-in-slow-page-load-times\"\u003eIssue: Render-blocking style sheets results in slow page load times\u003c/h3\u003e\n\u003cp\u003eFor the browser to render a page it must first process all the style and layout information. However, the browser will block rendering until all external stylesheets are downloaded and processed, which may require multiple round trips and delay the time to first render.\u003c/p\u003e\n\u003cp\u003eIn a perfect and uncomplicated world, CSS setup might look something like this:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eA single external style sheet will be used and be smaller than 75 kb\u003c/li\u003e\n\u003cli\u003eFor content appearing above the fold, use inline CSS in the style attribute of HTML tags for quicker page rendering of the content that will be viewed first\u003c/li\u003e\n\u003cli\u003eNo \u003ca href=\"https://www.w3schools.com/cssref/pr_import_rule.asp\"\u003e@import calls\u003c/a\u003e being made to the CSS\u003c/li\u003e\n\u003cli\u003eNo CSS in HTML code such as divs or h1s below the fold, as this content can load slower than the code above the fold that is generally read first by the user.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eHowever, in practice, things are often more complicated, and each complication delays page rendering.\u003c/p\u003e\n\u003ch3 id=\"solution-streamline-your-css-files-to-make-them-more-efficient\"\u003eSolution: Streamline your CSS files to make them more efficient!\u003c/h3\u003e\n\u003cp\u003eThe following are some recommendations on how to streamline your CSS files to promote the fastest loading and rendering for the client:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eDon\u0026rsquo;t inline large data URLs\u003c/strong\u003e – A Data URL is a URI scheme that provides a way to inline data in an HTML document. While inlining small URIs in your CSS may be fine, inlining large data URIs can cause the size of the CSS to be much larger, which will slow down page render time. There are many data URL generators available online to assist in building URI schemas most efficiently.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eDo not inline CSS attributes in HTML elements\u003c/strong\u003e – Avoid using inline CSS on repeated HTML elements, such as the paragraph tag \u003ccode\u003e\u0026lt;p style=\u0026quot;___;\u0026quot;\u0026gt;\u003c/code\u003e where possible because this often leads to code duplication. Traditionally, we have included inline CSS styles in HTML elements, but this may cause browsers to respond slower. We should avoid using inline CSS on repeated HTML elements below the fold where possible (such as the paragraph tag \u003ccode\u003e\u0026lt;p style=\u0026quot;___;\u0026quot;\u0026gt;\u003c/code\u003e) because this often leads to code duplication. Additionally, including styles in our code is against the \u003ca href=\"https://frontend.18f.gov/security/content-security-policy/\"\u003eContent Security Policy\u003c/a\u003e of the World Wide Web Consortium (W3C) that will block any element levels styles by default. Additional guidance can be found the \u003ca href=\"https://www.w3.org/TR/CSP2/\"\u003eW3C 2016 Content Policy Level 2 Recommendation\u003c/a\u003e, or the \u003ca href=\"https://www.w3.org/TR/CSP3/\"\u003eW3C 2018 Content Security Policy Level 3 Working Draft\u003c/a\u003e.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eIf you have more than one CSS file, they should be combined into one file\u003c/strong\u003e – If using multiple external CSS files, consolidate them into a single file to improve the download time by decreasing the round trip fetching files.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eExternal CSS files\u003c/strong\u003e – The use of external CSS files is the main way that CSS is being used in web pages, with the CSS instructions in a separate file other than your HTML. The advantage of this is that the CSS file is being cached by the browser. However, the problem arises when there are several of these files.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eDo not use @import to call your CSS files\u003c/strong\u003e - The @import call is when external CSS files are called using the @import command rather than linking to it directly. This causes the CSS file to load slower than the link method as they can only be downloaded one at a time using this method. This decreases speed of rendering as it waits for downloading files.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eOnce you have your site and pages ready, run it against these two sites, which will help you assess the performance of your CSS sheets:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eCSS Delivery Tool \u003ca href=\"https://varvy.com/tools/css-delivery/\"\u003ehttps://varvy.com/tools/css-delivery/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eInline CSS Scripts \u003ca href=\"https://www.giftofspeed.com/inline-your-css-code/\"\u003ehttps://www.giftofspeed.com/inline-your-css-code/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"references-3\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eCSS Optimized Test\u003c/strong\u003e | \u003ca href=\"https://www.giftofspeed.com/css-delivery/\"\u003ehttps://www.giftofspeed.com/css-delivery/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eOptimize CSS Delivery\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery\"\u003ehttps://developers.google.com/speed/docs/insights/OptimizeCSSDelivery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\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\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"prioritize-visible-content\"\u003ePrioritize Visible Content\u003c/h2\u003e\n\u003ch3 id=\"issue-users-dont-need-the-entire-page-to-load-to-start-looking-at-the-above-the-fold-content\"\u003eIssue: Users don’t need the entire page to load to start looking at the above the fold content.\u003c/h3\u003e\n\u003cp\u003eVisible content—also referred to as, \u003cem\u003e\u003ca href=\"https://en.wikipedia.org/wiki/Above_the_fold\"\u003eabove the fold\u003c/a\u003e\u003c/em\u003e (a newspaper term)—is the part of the screen that the user sees first, before they do any scrolling. Often this is the title and/or navigation menu. Users want to see a page load quickly. However, many web pages are fairly large and no user wants to wait for an entire page to load before they see any visible content. The bigger the page, the more network round-trips are required to fetch and to render the above-the-fold content of the page. Loading the visible content before the other elements of a page creates a much better user experience.\u003c/p\u003e\n\u003ch3 id=\"solution-prioritize-and-limit-the-size-of-the-data-needed-to-render-the-visible-content-or-above-the-fold-content-of-your-page\"\u003eSolution: Prioritize and limit the size of the data needed to render the visible content or above the fold content of your page\u003c/h3\u003e\n\u003cp\u003eIn addition to the other performance recommendations above (such as enabling compression, minifying resources, optimizing images, and optimizing CSS delivery), below are some additional recommendations you can use to prioritize and limit the size of your page to improve the visual content experience:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eStructure HTML to load the visible or above-the-fold content first\u003c/strong\u003e – The simplest way to improve how a user perceives the load time of a web page is to load the HTML required for the above-the-fold content first by placing it at the top of the HTML file within the body tags. Since the browser reads HTML one line of code at a time, and in order, code for the visible content will be read and executed first. \u003cbr /\u003e\u003cbr /\u003eMoving a block of HTML code is easy, simply cut and paste the HTML block that contains the visible content above all the other elements. Yet, another option to speed up the loading of the visible content is to place all the CSS required to display the content within the HTML file instead of a separate file.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eLoad components in order of importance\u003c/strong\u003e – List your components and order them from most to least important and look for a way to load them in priority order. For example, if you have main content and a sidebar that includes a Google AdSense ad, a Twitter button, Facebook button, and a Google Plus button, it would be most advantageous to load the main page then the less important sidebar, then any footer content such as company location and contact information. Finally, try to leave any JavaScript processing until the end after the page load, to save some time. By loading things in priority order, the user can start reviewing the Visible Content or above-the-fold while the rest of the page loads and they will report a great loading page even if the entire page has not actually loaded.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"references-4\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eReduce the Size of the Above the fold Content\u003c/strong\u003e | \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\u003e\u003cstrong\u003ePrioritize Visible Content\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://varvy.com/pagespeed/prioritize-visible-content.html\"\u003ehttps://varvy.com/pagespeed/prioritize-visible-content.html\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://web-design-eastbourne.co.uk/blog/prioritize-visible-content/\"\u003ehttp://web-design-eastbourne.co.uk/blog/prioritize-visible-content/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003cp\u003e\u003cstrong\u003eDisclaimer\u003c/strong\u003e: All references to specific brands, products, 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"}
  ]
}