Website Page Speed – Why It’s Even More Important in 2021

by | Aug 24, 2020 | Design | 0 comments

Three factors figured heavily into your search engine positioning:

  • Technical SEO
  • Backlinks to your web pages
  • Website speed

Performance or Page Speed is a factor Google and other search engines use to deliver the best content to the end user. If a site takes a long time to load, it reflects poorly on the search engine. Page speeds comes from two elements: the download of the webpage content; and the how hard it is for your web browser to interpret the content and turn it into a sensible looking webpage.

These are some of the issues and ways to improve performance. Some are things that a website owner can directly affect. Some of topics best left up to the pros.

Image Issues

Images can be too big.a 72×72 pixel icon could actually use a 1400×800 image. Maybe, a plugin failed you and request an image that is too big to be optimal. The GTMetrix report will generate optimized images for you.

Image format choices. Know the difference between GIFs (or is that GIF?), JPEGs, PNGs, SVGs and bitmaps. Use the ideal image for the role in the presentation.

JavaScript Placement

The header is the best (except when it isn’t). When Javascript code goes into the header, that code executes first. It will block the display of content until the Javascript fully executes. This is called “render blocking.” From an end-user perspective, this is horrible. They will be left with a white screen for much long than is ideal.

Put some stuff into the Footer. Some code can always go into the footer: analytics code, helper code, code relevant to the lower sections of the page (eg. a dynamic footer).

Client side Caching

Make content cacheable. WordPress will put query strings onto the tail end of some URLs and change that string with each load to give you a new and fresh load of that image, script or styling. From an end user perspective, that takes a lot of time.

Change the Expiry date (it’s a meta data setting in the served assets) to push it days or even months into the future. That let’s a web browser shoulder some of the load and keep copies of those elements on their computer instead of downloading them new with each page load.

Third Party Assets

Easy to deploy third party code almost always kill performance. While it’s handy to drop in a snippet from Instagram, Facebook, Google, Click-to-chat, CRM tools, those can kill performance.

Pull as much as possible into your control. Download Google fonts and serve them from your site or your CDN.

Deliver the content from server side generated HTML, not Javascript delivered / built code.

Elect to leave out some of the third party assets on some pages. If performance is really important, be cautious of third party apps.

Compression

File downloads are a big time suck. Fewer files to request and smaller files are key.

Each plugin and theme is likely to introduce several CSS and JS files apiece. This can quickly add to up to 20+ CSS and 20+ Javascript file requests.

Plugins like AutoOptimize can consolidate the CSS into fewer files and it can do the same with JavaScript.

Almost every web server is capable of serving out files compressed with GZip. Almost every web browser is capable of decoding GZipped files.

Server Caching

Store static copies of complex output (eg. leaderboards, lists of recent posts, stats).

Optimize code on the server before it is shipped to the client.

Deploy a plugin like W3 Total Cache, WP Cache, etc.

Keep-Alive: Time is lost when some browsers reacquire the path to your server with each file request. By tweaking the server’s Keep Alive, you can keep that connection active.

Content Delivery Networks (CDNs):

Use a CDN to stow and deliver some of the content.
A CDN can take the pressure off of the server.
It can deliver content from a server closer to the end client.

Flush Your Output

Hang time is a killer when you’re waiting for a web page. By default, PHP can wait for a good length of time before delivery. It is possible to urge it to begin earlier than otherwise. That sends content back to your audience faster. I do this by putting the flush() call at the top of the page.tpl.php file. If you’re about to output the themed data, you’re ready to deliver content, so I say push it out as soon as you can, even starting the process before the page.tpl.php is populated and served. One thing to note: flushing content may not be a tactic that plays well with GZip.

Aggregate CSS and Javascript

You should collapse all of your Javascript and CSS into one file each (all CSS in one; all Javascript in the other). While Drupal does ask for a lot supporting files, it compensates by allowing for the aggregation of Javascript and CSS into collected files. In extreme cases, this knocks down the number of files from 30+ files down to two to four files. If you’re using a CMS make sure it can aggregate these supporting files. If you’re doing a manual web design, make sure you follow this rule as closely as possible.

CSS Sprites

CSS sprites use portions of a larger image to fulfill some graphical need on your web page. Spriting isn’t a new concept– I probably built my first sprite for a video game over 25 years ago. But its role in web design is comparatively new.In pursuit of fewer file downloads, you can lump multiple elements into a single image and then use CSS to slice that image for use. There is a lot of finesse to how you slice up an image with CSS. You need to pay attention to how the image will be used and you need to be comfortable using CSS backgrounds with cropping and the repeat concepts figured out.

Too Much?

If these performance tips are too much for you to implement, that’s okay. The good news: we deploy these techniques on every site we deploy. Web321 sites get all of the improvements possible to let the site out-perform the competition.

Porthole Solutions.com Acquired by Web321

We are proud to pick up the mantle of Porthole Solutions. Back in the day, they provided full service solutions. As they said it, back then: We provide full web services, including hosting and domain registration, and create custom designed websites that can be...

Indigenous Funding Options in BC

National Programs PacifiCan Jobs and Growth Fund  If you are working on a project for your business to transition to a green economy, foster an inclusive  recovery, become more competitive and create jobs for Canadians, you could get a contribution for up to 100% of...

Seven Ways To Set Up A Sponsored Website

Nonprofits that need a website have a dilemma: A website can be great for raising the profile of the organization, but a website built on a shoestring may fail to deliver its message nor get traction for the cause. 

Top 7 Signs A Website Is Abandoned

Websites need TLC. A garden and a website have a lot in common: They start in the dirt: for gardens, it’s literal soil; for websites, it’s dirt poor rankings and lack of discoverability.  The conditions need to be favourable to growth. Plant the seeds and give them...

Calligo Going Away And What You Can Do About Your Website

March 1st is coming up fast and Calligo (www.calligo.io) clients have to find somewhere for their sites to live. This from Calligo : Important notice about your website and mail service from Calligo (previously 3 Peaks / Pacific Online) From 1st March 2021, you will...

17 Ways To Win at Growth Hacking 

  Growth Hacking is a great option for anyone looking to grow their business fast! For anyone unfamiliar with the term, growth hacking refers to a series of techniques used to add social media followers rapidly and with minimum investment on your part. As growth...

Play Twenty Questions With Your Website Decisions

What is it that sets one site from another? In short, brand optimization: knowing what you want to present to your potential client and how you’re going to present it. To get there, and create the online performance your brand deserves, you need to consider some important questions.

The Web Design Monthly Subscription Plan:

More Than Just a Website Payment Plan   Picture this: you’re a small business owner looking to update your website to be functional, branded and search engine optimized. Right now, your cash flow is tight. These projects can cost you upward of $10,000. As a small...

Keeping Up With Google Algorithms

Google’s algorithm is known to have core changes every few months to improve the quality of search results – what does this mean for you and your website? With every change to the algorithm, if not detected immediately, can lead to severe impacts on your website...

Web Maintenance Checklist

If you own a site, whether it is for personal use as a blog or you use it for your business, the site must be maintained frequently. The system is constantly updated and if you do not take enough care of your site through proper web maintenance, you will not attract...

WordPress: How Popular Is It?

WordPress has become a global marvel and it has taken a long leap since its release in 2003. From the 1st version of WordPress in 2003, it has been growing considerably even today. Being the most superior CMS in this industry, WordPress stands above its rival brands...

Can Google Advertising Grants Help With Your Online Marketing?

Have you heard of Google grants? Google grants are another version of Google Adwords. However, this one is specifically for non-profit organizations. If you are a listed non-profit organization in Canada, then you can get $10,000 every month. In a year it becomes...

Web Presence Grant from the NASE Growth Grant in 2020

Web Presence Assistance provides a non-repayable contribution to Prince Edward Island businesses to assist them in establishing a presence on the Internet. The purpose of this assistance is to help Island companies increase business by creating a website to establish...