Page Source: Resources

Page Source: Resource | SEOSPIDRE

What’s the value of Page Source, and how do you find it?

What is a Page Source?

Page Source is a way to identify and see what key directories are being called in order to render a website. In order to render a website an index.php file is called that gives the website it’s structured. The index.php file tells the client to also pull the style.css and the key javascript files. These files are called through HTTP Response Codes, which are also revealed through the Page Source: Timelines.

Through Page Source, you can identify key HTML factors of your website which can significantly help you improve your SEO and user experience. Some information of the HTML is not revealed like password generators, security information, and such forth which is operated externally and uploaded to the website.

How do you open a Page Source?

For PC

Chrome: Ctrl + U

Internet Explorer: Ctrl + U or Right Click and select “View Source”

Firefox: Ctrl + U


Safari: Option + Command + U or Right Click and select “Show Page Source”

Firefox: Command + U

Chrome: Option + Command + U

What are HTML Resources?

Resources all the different aspects that are “called” to allow your website to display information and provide interactivity. Pictures, text, javascript, animations, don’t just exist they need to be called from a server in order to be interpreted by your Browser and displayed to a client. Each URI (Unique Resource Identifier) is called by a HTTP Response Code which allows it to be displayed by your web browser. A URI and a Resource are the same thing.

Resources come in three major forms:

  • HTML
  • Javascript (JS)
  • CSS

Other forms include:

  • PHP
  • API’s
  • Images
  • Videos

How do you read a Page Resource?

Page Source: Resources needs to be broken down into pieces.

There are 8 important factors that can be identified in the image above:

  • Total Payload
  • SEO Title
  • SEO Description
  • Opening Tag
  • Image Resources
  • JS Resources
  • CSS Resources

Opening Tag

Opening and closing tags are important for the basic structure of HTML, and identification of scripts, information and where they are on a page!

<head></head> tags mostly contain scripts that run in the back of the website. No information in the <head> tag is displayed directly on your website and is important for identifying meta information, and SEO tactics.

<body></body> tags contain all of the information that is displayed on the website from navigation, to links to text!

<footer></footer> tags are important for local SEO. <footer>’s mostly contain important links, key resources, and contact information. Putting in addresses, and other contact information could lead to rich snippets,

Total Payload

This refers to how much data is transferred to your client. The greater this is, the more your client has to load and therefore the longer your web load time becomes. This is also a good indicator if you have too many javascript plugins, images, or videos. Your total payload should not exceed 20mb or your SEO will be significantly impacted.

Page Source: Resource

There are 8 sources of information that can be found under Page Source.

  • Elements refers to the visible elements on screen
  • Network relates to the travel path of the data from server –> Client
  • Debugger displays the exception rules and parsing failures
  • Resources contains all of the resources called to display the website which are housed on servers
  • Timelines is the progression of the website loading from first request to final parsing
  • Storage contains both local storage, session storage, and cookies on the website
  • Canvas is a special context created by scripts or CSS
  • Console displays detailed information about errors or warnings that occur in the web-load.

SEO Title

The HTML <title> is what is displayed in the tab of the browser. This is also what’s displayed on a SERP (Search Engine Results Page) when your website comes up for a query. This is a super important indicator for Search Engines and users in determining which website to choose for a result. Make sure this is optimised for your keywords and your site function!

SEO Description

HTML <meta content> is important for what’s displayed under the SEO title in a Search Engine Results Page. This is most important for query matching! It’s best to configure this according to what your ideal customers would be searching. If they use specific keywords, or word structures, make sure to write your description in a way that matches that format.

CSS Resources

CSS are the design aspects of the website, Your HTML comes out as raw text, images, and grids that is then styled and correctly designed by your Cascading Style Sheets (CSS). Colours, fonts, box outlines, all of the design aspects are under here. Sometimes there are .tff (text files) that are called through CSS which have errors.

JS Resources

Javascript (JS) resources provide the interactivity and “fun” elements of your website. These include plugins, externally operated API’s and anything that requires implementation. Animations are included under Javascript Resources. Technical SEO often revolves around the optimisation of this.

Image Resources

Images are also located on servers the same way as all other resources are. Images are often a source of large payloads and data delivery. Here all images can be viewed along with their location in the overall directory. No information is presented on their file size as this can be found under Page Source: Timelines.


Technical SEO

Page sources can be difficult to interpret and optimise for SEO. At SEOSPIDRE we specialise in Technical SEO, involving the improvement of ranking and domain strength.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.