{"id":9335,"date":"2011-02-10T21:39:50","date_gmt":"2011-02-10T13:39:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=9335"},"modified":"2023-08-07T20:19:57","modified_gmt":"2023-08-07T12:19:57","slug":"how-to-measure-front-end-website-performance","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/","title":{"rendered":"How to Measure Front-end Website Performance"},"content":{"rendered":"<p>Speaking of, the optimization process is almost nonexistent among new-age web designers. Even many web designers who have been in business for a decade or longer do not fully understand the importance of <a href=\"https:\/\/www.hongkiat.com\/blog\/ultimate-guide-to-web-optimization-tips-best-practices\/\">site optimization<\/a>.<\/p>\n<p>After a prolonged period, a website will begin to bog down. The frontend files may contain exaggerated blocks of code or locked hidden bits. This is most commonly seen happening within JavaScript files or images.<\/p>\n<p>Well, it may be important to create a pleasing website for the <a href=\"https:\/\/www.hongkiat.com\/blog\/ux-and-ux-designers\/\">user experience<\/a>, but without an optimized website, the design may not even have the chance to load on impatient users fully.<\/p>\n<p>The tips below are for beginner-intermediate web developers interested in <strong>optimizing their pages<\/strong> to the fullest. Many techniques are available, and each one will behave differently depending on your website\u2019s issues. Try skimming a few areas and see if you can apply these techniques to your own marks.<\/p>\n<h3>HTTPS Requests<\/h3>\n<p>Each time your website loads, it sends an HTTPS request to a remote server. This type of data transfer is called a <strong>network protocol<\/strong> and is used specifically for distributing and storing plaintext files. These often include your basic frontend code such as HTML, CSS, and JavaScript.<\/p>\n<p>Once the request is sent, your browser will parse each page element. Depending on the parsing engine, each website will load differently, and elements will appear in varying order based on transfer speeds.<\/p>\n<p>For example, Microsoft Edge will render web pages differently than Chrome or Safari, and these run slightly different parsing engines than Firefox or Opera.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/http-mac-address.jpg\" alt=\"front-end-website-performance\" width=\"550\" height=\"250\"><\/figure>\n<p>What has to be considered is how long the request time for each file takes and if this trend holds consistently. Consider receiving upwards of 100k or 1 million visitors in a month. It is the browser\u2019s job to piece together each page element and load external files into memory.<\/p>\n<p>Often, the factors holding down a website\u2019s optimized speed reference clunky JavaScript, including large image files. With the popularization of Verizon FiOS, it\u2019s common for Internet speeds to hit 600kbps and keep climbing!<\/p>\n<p>Unfortunately, this isn\u2019t the norm, and even with high-speed connections, it\u2019s possible to experience optimization faults.<\/p>\n<h3>Remedies to Site Performance<\/h3>\n<p>We are not alone in web development and front-end optimization. Certain tools are required to handle the job for proper work to be completed.<\/p>\n<p>Google has released a project titled <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed?csw=1\">Page Speed<\/a> which was built to help developers optimize their websites and check for the best levels of performance. Originally the project started as an open-source Firebug add-on and is now accepted as a 3rd party reference for <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webpagetest.org\/\">website testing<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/server-room-long.jpg\" alt=\"front-end-website-performance\" width=\"550\" height=\"250\"><\/figure>\n<p>Another option for Firebug users is <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/yslow.org\/\">Yahoo!\u2019s YSlow add-on<\/a>. The script analyzes each web page request and suggests the most common performance improvement methods. These suggestions are based on the Yahoo! Developers resource for <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.yahoo.com\/performance\/rules.html\">best optimization practices<\/a> in web design.<\/p>\n<p>The program may be a little abrasive at first since it contains so much information. Just stick to the basics, and by following simple documentation, the process should be a piece of cake.<\/p>\n<p>Developers are always interested in jumping onto a project to break down code, so this should be a no-brainer. For a little help, you could check out the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/yslow.org\/user-guide\/\">YSlow help guide<\/a>.<\/p>\n<h3>Speed Techniques<\/h3>\n<p>You can apply some simple tricks to your website immediately to speed up performance. The first and easiest way is to separate your CSS and JavaScript files.<\/p>\n<p>CSS code belongs in the header of your document. This is useful because CSS properties need to be parsed while the DOM is loading. Once a web browser recognizes your CSS styles in the heading, it will wait to fully display the web page until all styles have been loaded. Also, any images used for icons or background designs will take time to load and should do so first.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/traffic-lights-speed.jpg\" alt=\"front-end-website-performance\" width=\"550\" height=\"250\"><\/figure>\n<p>On the flip side, moving all JavaScript files into your site footer may dramatically solve hangup times. Many browsers block parallel downloads, which means before rendering the page, a user\u2019s web browser may stop for 4 seconds to fully load external JS includes.<\/p>\n<p>This isn\u2019t always possible, nor is it always necessary for every website. Don\u2019t bother maneuvering any plays if your pages load the same with equal response times regardless of included file placements.<\/p>\n<p>Dynamic content cannot load until the entire DOM is completed, but sometimes this will return errors. Test out CSS\/JS, including seeing if you can return any optimization benefits.<\/p>\n<h2>File Size Compression<\/h2>\n<p>Compressing large files has become very popular. It can now even be utilized in web pages to reduce load times and keep file sizes very low. Much of the work has already been done and with tools like <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/yui.github.io\/yuicompressor\/\">YUI Compressor<\/a> mini-sized files are a no-energy process.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/motherboard-chips.jpg\" alt=\"front-end-website-performance\" width=\"550\" height=\"250\"><\/figure>\n<p>There are plenty of other free services on the web to help with this task as well. <strong>Minify CSS<\/strong> has an entire <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.minifycss.com\/css-compressor\/\">CSS compression interface<\/a> to make the process simple. The same website also has a custom <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/jscompress.com\/\">JavaScript compressor<\/a> which performs much of the same tasks but keeps the scripting organized.<\/p>\n<p>You may also consider compressing the largest images on your web pages. This can be done with any photo editings software such as Adobe Photoshop or GIMP by simply resampling the image at a lower resolution. PNG images will export much smaller on average than jpg or TIFF formats. There are also plenty of online tools such as <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.imageoptimizer.net\/Pages\/Home.aspx\">Image Optimizer<\/a> to aid in the compression process.<\/p>\n<h2>Source Checking and Metrics<\/h2>\n<p>This is a routine not often practiced by web developers, which can offer amazing results. By analyzing all of the page elements on your website, you can see which took the longest to load and the order in which each piece was loaded.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/exchange-server-2003.jpg\" alt=\"front-end-website-performance\" width=\"550\" height=\"350\"><\/figure>\n<p>The most popular tool <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/getfirebug.com\/\">Mozilla Firebug<\/a> is a plug-in for the Firefox browser. This app installs a small toolbar at the bottom of your browser to check each website\u2019s response times, header information, page elements, and scripts. The script has also been ported into <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/getfirebug.com\/index.html\">Firebug Lite<\/a> as an extension for Google Chrome.<\/p>\n<h2>Apache with mod_pagespeed<\/h2>\n<p>Not all setups will run an Apache web server, so this option isn\u2019t always available. This module is directly related to <strong>Google\u2019s Page Speed monitor<\/strong> mentioned earlier. The code for mod_pagespeed was originally based on many libraries from Google Code\u2019s databases.<\/p>\n<p>Apache allows server administrators to install small packages called modules to enhance the performance of their servers. <strong>mod_pagespeed<\/strong> is one of these modules which performs optimization techniques automatically at runtime.<\/p>\n<p>There are too many processes to list, although some main applications include on-the-fly HTML\/CSS\/JS compression and image caching.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/google-code-sign.jpg\" alt=\"front-end-website-performance\" width=\"550\" height=\"250\"><\/figure>\n<p>The project is currently <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/speed?csw=1\">housed at Google<\/a> and is open to developers. Google has been working with <a href=\"https:\/\/www.hongkiat.com\/blog\/go\/godaddy\" rel=\"nofollow noopener\" class=\"js-aw-brand-link\" data-feed=\"U8Z9tIslfQMrGZVaa1QtHX7k5LtErUWA\" target=\"_blank\">GoDaddy<\/a> to implement <code>mod_pagespeed<\/code> into all hosting accounts running Apache HTTP server.<\/p>\n<p>Although many other options are available, frontend development work is some of the most intense, especially considering pre-optimization for crucial web pages. Optimizing site headers and large images can be an extremely tedious yet rewarding task.<\/p>\n<p>Consider some of the techniques introduced in this article and see how these could be applied to your web projects. Often developers do not take enough time to appreciate their work and clean out old bits of code.<\/p>\n<p>If you\u2019re still hankering for some tips, you should read our <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/ultimate-guide-to-web-optimization-tips-best-practices\/\" rel=\"noopener noreferrer\">ultimate web optimization guide<\/a> for pointers on frontend maintenance and convenient performance enhancements.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to measure website performance with these front-end tools and techniques. Improve your website speed and user experience today.<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4655,4668,360],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Measure Front-end Website Performance - Hongkiat<\/title>\n<meta name=\"description\" content=\"Learn how to measure website performance with these front-end tools and techniques. Improve your website speed and user experience today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Measure Front-end Website Performance\" \/>\n<meta property=\"og:description\" content=\"Learn how to measure website performance with these front-end tools and techniques. Improve your website speed and user experience today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-02-10T13:39:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-07T12:19:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/http-mac-address.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"How to Measure Front-end Website Performance\",\"datePublished\":\"2011-02-10T13:39:50+00:00\",\"dateModified\":\"2023-08-07T12:19:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/\"},\"wordCount\":1243,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/measure-website-performance\\\/http-mac-address.jpg\",\"keywords\":[\"appwiki\",\"gc\",\"website\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/\",\"name\":\"How to Measure Front-end Website Performance - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/measure-website-performance\\\/http-mac-address.jpg\",\"datePublished\":\"2011-02-10T13:39:50+00:00\",\"dateModified\":\"2023-08-07T12:19:57+00:00\",\"description\":\"Learn how to measure website performance with these front-end tools and techniques. Improve your website speed and user experience today.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/measure-website-performance\\\/http-mac-address.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/measure-website-performance\\\/http-mac-address.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-measure-front-end-website-performance\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Measure Front-end Website Performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Measure Front-end Website Performance - Hongkiat","description":"Learn how to measure website performance with these front-end tools and techniques. Improve your website speed and user experience today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/","og_locale":"en_US","og_type":"article","og_title":"How to Measure Front-end Website Performance","og_description":"Learn how to measure website performance with these front-end tools and techniques. Improve your website speed and user experience today.","og_url":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-02-10T13:39:50+00:00","article_modified_time":"2023-08-07T12:19:57+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/http-mac-address.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"How to Measure Front-end Website Performance","datePublished":"2011-02-10T13:39:50+00:00","dateModified":"2023-08-07T12:19:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/"},"wordCount":1243,"commentCount":27,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/http-mac-address.jpg","keywords":["appwiki","gc","website"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/","url":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/","name":"How to Measure Front-end Website Performance - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/http-mac-address.jpg","datePublished":"2011-02-10T13:39:50+00:00","dateModified":"2023-08-07T12:19:57+00:00","description":"Learn how to measure website performance with these front-end tools and techniques. Improve your website speed and user experience today.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/http-mac-address.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/measure-website-performance\/http-mac-address.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Measure Front-end Website Performance"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2qz","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=9335"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9335\/revisions"}],"predecessor-version":[{"id":66273,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/9335\/revisions\/66273"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=9335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=9335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=9335"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=9335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}