Let's suppose you search for something on Google or Bing. You’d expect pages listed in the results to be relevant and load quickly. If not, you’d most likely leave that page and move on to the next result. A search engine’s goal is to provide you with the best user experience -- providing you with the desired information without any delay.
Search engines only read the code from a website. It’s not their job to enhance that code to make it more attractive to the searcher. So, the responsibility to make websites faster starts with the web developer.
Many factors influence a page's loading time. It’s a puzzle developers have to piece together in order to optimize page load speed. As a reward, search engines rank pages higher in search engine results. Here are some tactics a web developer can use to boost and improve website performance.
One strategy to decrease page load speed is to reduce the number of network requests or implement more simultaneous, parallel downloads. A modern website frontend is built with a combination of HTML, CSS, and JavaScript. Most websites organize CSS and JavaScript code in separate files. Those separate files require multiple requests to the server resulting in a slower page load speed.
You can bundle multiple Javascript or CSS files into a single file. This is where you include one or more Javascript files (or CSS files) into a master file and include that master file in the code.
Inlining JavaScript and CSS files into the HTML file is a solution, because it does reduce the number of network requests. However, it is heavily debated if the enhancements to website performance are worth injecting the files into an HTML file. Not only is proper inlining hard to do, but it can make it more difficult to minify your code. Minifying source code files is less debated and much easier, especially when your CMS has minification as a built-in feature.
Your goal is to get something painted on a page (a.k.a. first contentful paint or FCP) as soon as possible. Do this by prioritizing the content above the fold -- one valid use of inlining. Let’s say you’re about to develop a client website in which the banner takes up 100% of the above the fold content. You should prioritize the banner code and inline it in the HTML file. Then, when the page needs it (i.e. when the user scrolls to it) should the minified Javascript code for the rest of the page be retrieved.
Many websites use several small images per page. If a web page has 10 images then it will make 10 requests to the server. An image sprite is when you combine multiple smaller images into a single image. You’d then use CSS to shift the visible portion and show only one of those images at a time. One image file means only one server request. One server request means fewer lookups and a faster page load.
Note: With HTTP2, image sprites are becoming less important. HTTP2 makes concurrent requests possible, meaning multiple assets can be downloaded in parallel.
Generating a web page dynamically is costly, especially when done on a large scale. Take a website’s home page for example. The browser first loads the page’s template or layout code. Then, the browser loads all referenced objects like blog posts, banner images, menu items, etc. This means that a server has to multiple roundtrip network calls to finally generate an HTML response.
Caching an HTML response, after it’s first processed, can save many unnecessary lookups and a great deal of processing time, increasing response speeds by 5-10 times.
Reducing the amount of data being sent to the server is another effective way to decrease page load time. Discover some of the solutions to make that happen:
An average of 60% of the bytes needed to load a web page are for images. Images are typically heavier than our source code and can be a major reason for not getting ranked on Google’s first page. But, we can’t completely remove images from a web page because they make content more engaging.
Image compression and responsive images are the solution to make a web page faster while keeping the images.
Editors and developers can compress images using various online tools or plugins like Squoosh or TinyPNG. As a result, the image files will have a smaller file size which reduces bandwidth and increases page load speed without losing perceivable image quality.
Or, you could adopt a content management system that has image compression built-it, like Marketpath CMS. This means you don’t have to rely on a plugin or quickly fix a broken site after an update. Image compression with our CMS is automatic, and the settings (lossless, lossy, no compression) can be changed at any time by any user.
An editor can compress images all day long, but it’s up to you to properly size the images for the website. You should aim to never serve images that are larger than what is rendered on the visitor’s screen. Many content management systems have plugins to help create thumbnails and downsize images, but the majority leave the work to the content editor.
Marketpath CMS provides image presets that do the heavy lifting for you and the editor. As a developer, you can create unlimited presets, each with its own size & applied filters (e.g. black & white, cropping). Then, in your page or partial code, you set the image preset for any image used as part of that code. The editor doesn’t have to manually resize or select images in different sizes.
<div class=”blog-list”>
<div class=”blog-post”>
<img
srcset=”
{% img_url post.image preset: “blog-crop-lg” %} 3x,
{% img_url post.image preset: “blog-crop-med” %} 2x,
{% img_url post.image preset: “blog-crop-sm” %} 1x,
“
src=”{% img_url post.image preset: “blog-fallback” %}”
>
<h2>{{ post.title }}</h2>
</div>
</div>
Another piece of the image puzzle (as well as documents, Javascript files, and stylesheets) is having a content delivery network (CDN), which is a network of servers spread across the world. A CDN’s main purpose is to deliver files to the nearest request to make the response time even shorter.
Marketpath CMS uses Microsoft Azure’s CDN, which has two obvious benefits. A built-in (i.e., not a plugin) CDN that you or anyone in your agency doesn’t have to manage or pay for. And, because Azure’s CDN is so widely used, it's likely that a website visitor has already visited another site, or connected to Azure’s CDN, making the connection just a little faster.
There’s no sense in sending an entire page of assets when there’s a chance visitors won’t view it all. Enter lazy loading, which helps you defer the loading of heavy assets, like videos until the user engages or scrolls to the assets.
For example, instead of loading all the videos on a page, just load a thumbnail with a play icon. Then, if a visitor clicks the thumbnail just load the selected video and begin playing.
If you care about page performance, it is highly recommended to add lazy loading to your code. Here’s a sample for you to reference:
Minification is removing all the whitespace that makes it human-friendly into compact, browser-friendly code. By removing extraneous characters or shortening the code, you’re reducing the time the browser takes to move on to the next step in the waterfall.
Minification for Javascript also includes the rewriting of code using shorter naming conventions. For example, if I define and call a method named removeFormFieldHTMLCode(), the minification process might rename that to a(), removing 22 characters for every instance it’s called. Extrapolate this out to all methods and variables and you can begin to see the reductions in file size.
Marketpath CMS has the ability to bundle and minify both Javascript and CSS files. This can significantly reduce requests and data transfer.
Shared hosting is a great, economical option for most clients with a traditional marketing site. Most hosting providers of content management systems, like Marketpath CMS, run sites across multiple load-balanced servers. This balances traffic across each server and allows new servers to be easily added or removed depending on traffic demands.
Larger clients and websites can take advantage of virtual private servers or reserved instances. These setups are not shared with others and deliver capacity more consistently than shared servers. But they typically come at a much higher cost.
As a developer you may be passionate and exceptional at developing websites, but dread doing the heavy lifting and fine tuning for increased page performance. Tools and content management platforms, like Marketpath CMS, do exist to help you avoid the weeds. We let you focus on the fun development and handle much of the tedious page speed development for you.
Marketpath CMS is packed with features that automatically handles most of the speed optimization tactics above. Built-in page caching, bundling, minification, CDN, image compression, and image resizing.
Marketpath CMS helps you reduce development time and lets you speed up sites without a lot of work. This makes it easy for the client or marketers to keep sites fast.
