date: 2019-10-19, reading time 9 mins
In this article, we will go step by step how to think about creating a website from scratch. We start with webhosting, and follow with the website speed and the structure of the page. Next topic we touch is the content, cache control and more.
sources: Varvy:page speed, Google:page speed, Mozilla:developer, CSS-Tricks
I'm not an expert on webpage speed optimization. But I enjoy experimenting and learning. Each website is different and has different features and content requirements. Not every website runs on a fast server and therefore has a different starting position. Yet each site can be fast.
Website hosting is the physical place where your website is stored. Think about the right type of hosting. At which country and even the city the hosting company has its server. If you are creating a site for Los Angeles then hosting should be in the US and not in Europe. Unless you have other reasons. Your IP address and hosting tell Google what continent your website is physically on. This may be an advantage, but it is not a necessity. It is common for websites intended for European states to have hosting in America. It is easy to define for which country the website is intended. Or in which language the page is written. You can simply use hreflang information. Back to speed and hosting topic.
Resource requirements are based on the requirements of your website. Not every page must run on a cloud or server.
The first point to determine your starting position is the type of hosting. Shared hosting - if you share an IP address and resources with multiple users, your site may be slower. Still, speed can be sufficient. If you choose the right hosting company that knows its task and takes care of the users. Plus your site is not resource intensive.
Read webhosting companies reviews and consider the price. A difference of $ 3 a month is not much, it can make your work easier and ensure better service quality.
VPS, Dedicated server - if you are considering this option, you probably have a budget inmind. You know what site you're going to publish. If you are unsure, start with the basic type of hosting. With solid hosting companies, there is no problem switching to another type of hosting at any time. You always have the option to change to the more expensive type of hosting. That will give you more resources.
Cloud - future or already presence? As you know, you can back up data to the Cloud for free or for a fee. It is possible to have a website in the cloud, but this service is usually charged. You pay for the resources you reserve. And you pay for the time you use these resources, charged per minute or second. The benefit is that the cloud can automatically handle peak traffic. And automatically avoid overloading and crashing web pages. You can define and easily change resources. Another benefit is that major Cloud companies will offer you website placement anywhere in the world. Plus many other services. You propably will decide for the cloud when you anticipate the need to expand resources soon. And your requirements exceed the dedicated server capabilities.
I must not forget to mention the Google project to create its own backbone network. This is essential information. With this project, Google will link the data centers each other. Cloud and data centers are the future. Separate small hosting companies are also data centers. Although each company has different resources and capabilities corresponding to activities and revenue. We will see what the future brings.
Note: experiment, test, make changes and back up!
Page structure is a very important factor for website speed. In the case of hosting, we are talking about tenths of a second. In the case of inappropriate web page structure, we are talking about seconds or even rendering malfunctions. The information I recommend to start with - How does the browser work?.
I recommend asking these questions and reading a few articles : what does browser read first on the webpage ? How do browsers display web pages? How are web pages loaded and displayed?
If you are checking website speed seriously. Then study some landing page that is coded to be fast. Check some big name company or some Ahrefs, Moz page. You need to control where and what resources the browser will request on the page. Some free web page samples focus on graphics and features. But not on the page speed. Here you can start experimenting with the free website template Free Website Template.
Before we go step by step. Firstly, write down what features, what information you want to include on the website. How website desing should be. Write page by page. Then write down which resources are common to all pages. Check each page and decide when to include which resource on the page. When a resource will be requested by the browser. And then start. Here simple but incomplete instructions.
1/ to warm up, to feel good that you are starting in the right direction - take images and optimize them, decide whether to display one kind of image for all devices, or display different images for different screens, higher resolution images for desktop, mobile phones images with lower resolution-I recommend to choose one resolutionfor all -more about images here Image Optimization.
2/ Page Render Beginning. Do you want to show people a partially loaded page or a blurry / edited image first ? And later display a real web page when is fully loaded? There are more options. The choice is up to you. If you display an image first. The user will see something, but the question is do you want it ? In any case, you immediately display some content. This approach is suitable for very demanding sites. We encounter this approach when loading games, but also in other projects.
3/ Head - meta tags - listed at the top of the page. We define language, format, information for Google as description, title / but not analytics script / and so on. Do not include scripts and resources that the browser would have to start downloading immediately. This stops page rendering. Terms: build the DOM, build the CSSOM, build the Render Tree.
4/ A very important point is to clarify what format and features you want on your website. Which font you choose, layout, whether you display just text or video. Whether you create your own css style or download a website template. You can use available styles and layouts. For example, Bootstrap, Skeleton, Pure, Materialize and more. Each has advantages and disadvantages. But each template has one big advantage. It allows you to easily create and maintain website, plus make changes quickly and easily. When you combine more styles together, the web page may not render correctly in all browsers. Finding and correcting deviations from the template is time consuming. Typical example is nesting.
The rule is as few css files (ideally only one), plus to be as small as possible. Use inline css whe needed. Avoid external loaded properties / css /, rather save the element definition to your server. This also applies to fonts and scripts! Do not combine different definitions together. Choose a style and stick to it. You'll save a lot of time when maintaining.
Each page has its own meta description and title. This page information appears in search result and affects whether a user visits your page.
A hyphen (-) is a punctuation mark that’s used to join words or parts of words. Have you noticed ? Many page titles have the name write like this. For example "website-template".
If the browser encounters an element for which you will define certain properties. Then the browser stops rendering and search for what features this element has. This affects the first rendered content. After you write the page, check the loading sequence and / css resource requirements. Ideally think about what content and when to render. Check Watterfall infromation !
Note. When you have extra element with extra properties. You do not need to render the element immediately, place that element at the bottom of the page. You can define the position of the element in the properties. For example, look at social bar element in Free Website Template.
Policy: Back up !!!
Header and Footer - great helpers in website maintenance. The header and footer include information that is common to all pages of your site. Footer includes the information and resources we need on the page. But are not critical for rendering of the page. Just load them for the last time. Conversely, do not put in the footer resources you need immediately to read the page. For example, the footer includes social share widgets. You don't need a widget immediately, it may only appear last.
5/ Scripts - you can create a fully function page without scripts. But surely you need to load Google analytics script. Note, when you copy the code from Google analytics. You copy the sript with the definition to load file asynchronously. There are several ways to load scripts. Choose the most appropriate way - define when and how to load the script. Paste the script at the bottom of the page or where you need it. Again, the rule is that as few scripts as possible and as small as possible. Ideally without scripts from external sources. Postpone loading scripts from external sources during page renderinig is possible. But it is difficult and not always a reliable method.
6/ DNS prefetch, preload, prerender and more. You will use these commands if you know which source you need to connect, to render the page. Or when to upload what resource to cache. Example: if you want to display tweets. You will definitely enter the command to find Twitter address. You can load the address information earlier than the twitter post element. DNS data remains in the cache and is automatically used by the browser for other pages. Whenever the server needs the address. Another example is, when you know the user behavior. When and what page the user will visit. After the main page is rendered, the next page or source / image / can be loaded automatically, in advance. This will speed up the loading of the next page. The behavior of users can be predicted. Or later analyzed which pages and how often the users visit. This analysis can help you to identify users behavior. And help you propose the changes to the automatic load of resources.
7/ Htaccess file - gzip compression, cache expiration, redirect www / non www, https / http. HERE CAUTION - if you make a mistake in htaccess file, the web page may stop displaying! I recommend to think first how you want to display the page url. With or without www, and what resources you want to save automatically on the user's device. Cache control. This will ensure that the resources from your server do not download over and over again to users device. The cache expiration setting is necessary and essential for the speed of web page. Especially during repeated visits. The cache function works: if the browser sees that the resource is already stored by the users device. And that the source is valid. The cache is not expired, then the resource (for example, css) will not download again. The source already stored in the user's device is used. Therefore, it is important to follow point 4. The elements properties must be clear defined. When you add new page, css and layout source must be the same as for the existing web pages.
Note: If you are tired and have no energy, stop working and start doing something else.
8/ Minification - compression of pages, css and scripts. After debugging pages, use the tools to minimize each file. For example, HTML compressor.
9/ Test website and follow instructions from the testing tools, use multiple tools
10/ Don't try to keep the page fastest in the world. It's not necessary. People should visit your website because they want to read information from you. Information that only you provide. Readers will certainly wait for 0.5 second to load the page. Consider your time and how you will maintain your site. Look at the source code of large businesses and the structure of their site. This will help you identify the most commonly used rules. Big names use tools and templates to publish fast and easy.
first write the texts and clarify the content and design
the content is the essential factor, write as you speak, use words that your target audience use
try to be unique and come up with new content that people will be looking for
browser reads and renders web page according to rules
if the browser encounters an element for which does not know the properties, the browser stops and search for properties - check waterfall
as few css, js files as possible
smallest files and optimized images
no external files
the correct sequence of commands
find examples and learn from them
About & Contact Follow:
Copyright © 2019 SeoTools.la, Los Angeles, California