Robert Lodi

For websites, faster is better. 

One client’s site was loading slowly on phones, and asked me to take a look and see what could be improved.

Sure, we all love high-res photos with glorious detail. And in some cases, that resolution is needed. But for thumbnail-sized images – 150x150pixels, for example, you don’t need all that resolution.

You do, of course, need to allow for mobile layouts where the images may get bigger. But even so. 1000×1000 pixels is still plenty big.

And remember, make your photographs JPG or webp format. (I’m old, I still like JPG.)

The screenshot below shows the same image folders, before and after shrinking them, and a file format change from PNG to JPG.

We went from 13,200kB to 253kb just by changing the area and file format. We took away more than 98% of the file sizes, and immediately saw an improvement in performance, according to Google PageSpeed. Not perfect, but better.

If your site is loading slowly – it’s worth taking a look at your image sizes. They could be unintentionally oversized. If you’re not sure if your images are the problem – we’re happy to take a look and help out.

Right?

No matter how you feel about Buffybot, we can agree that that line is confusing. (And yet I remember it years later… anyway…)

I mean, she may as well have said “edit your A record to point to the new IP address, bingo!”

What?

You may think you know what a website is. Or an A record. Or DKIM settings. Or when and why to use a PNG. But you could be wrong. I know I am, sometimes. But here are my definitions, covering terminology that often comes up when we’re talking about building and launching a website.

Basics

Website: a collection of web pages all living under one domain name. 

Web page: a single location existing as part of a larger website often containing information related to a single topic, or providing a directory or links to other pages.

Link: specifically coded words, images, or buttons that when clicked take you elsewhere when clicked or tapped – either a new URL, a larger image, a popup of a video, etc.

Forms: I often find myself asking new clients where their forms come from. Forms are areas on a web page where customers (or bots) can enter information and have it sent to you. Forms can be created with old-school code, a plugin like Gravity Forms, or a marketing tool like HubSpot or Marketo, and added to your pages.

Browser: a web browser is the piece of software you use to access websites. Common browsers include Chrome, Firefox, Edge, and Safari. There are many available, and they all work a little differently. But they all let you see and interact with websites.

Cache: Cache – pronounced like ‘cash’ – is a term for files stored locally on your computer that get used by any given website. Since they are stored locally, they do not need to download every time you visit the site, which in theory can make pages load faster. Cache can also be a problem when you are making many edits, as the local files will not always update so you won’t see the edits. Therefore – it is worth learning how to clear your cache in your chosen browser if you’re doing a lot of edits.

URL: URL stands for Uniform Resource Locator but in the real world it just means ‘the address of the web page’ – something like https://www.google.com, or, https://buffy.fandom.com/wiki/Buffybot would be considered a URL. 

CMS: A content management system (CMS) is a software application that enables users to create, edit, collaborate on, publish and store digital content in an online database. 

WordPress: WordPress is an open-source (free) content management system (CMS). WordPress uses a combination of information and content stored in a database combined with template files, images and code to display a website in a browser.

Hosting related

Hosting: Web Hosting is an online service that makes your website’s content accessible on the internet. When you purchase a hosting plan, you are renting space on a physical server to store all the website’s files and data and make it available online.

Database: A Database is an organized collection of structured information, or data, typically stored electronically in a computer system. Small databases (SMB or corporate website) can be stored on a shared file system, while larger databases are typically hosted on computer clusters or cloud storage (sites like Google, Amazon, etc.)

DNS: The Domain Name System (DNS) translates domain names into IP addresses, which browsers use to load internet pages. 

Domain name: A domain name is a string of text that maps to an IP address, used to access a website from your browser. In plain English, a domain name is the text that a user types into a browser window to reach a particular website. For instance, the domain name for Google is ‘google.com’.

IP address: IP address stands for internet protocol address; it is an identifying number that is associated with a specific computer to computer network. When online, the IP address allows the two devices to send and receive information, such as to your computer from a website.

A record: An A record maps a physical IP address of a computer hosting that domain. Internet traffic uses the A record to find the computer hosting your domain’s DNS settings. 

CNAME: A Canonical Name or CNAME record is a type of DNS record that maps an alias name to a true canonical domain name. CNAME records are typically used to map a subdomain such as www or mail to the domain hosting that subdomain’s content.

DKIM: DKIM, or DomainKeys Identified Mail, is an email authentication method that uses a digital signature to let the receiver of an email know that the message was sent and authorized by the owner of the domain. This helps prevent your sent email from ending up in spam filters.

SSL: An SSL (secure socket layer) certificate is a bit of code on your web server that provides security for online communications. When a web browser contacts your secured website, the SSL certificate enables an encrypted connection. 

FTP: FTP (File Transfer Protocol) is a standard network protocol used for the transfer of files from one host to another over a TCP-based network, such as the Internet. FTP works by opening two connections that link the computers trying to communicate with each other.

SFTP: SFTP, or Secure File Transfer Protocol, is a secure file transfer protocol that uses secure encryption to provide a high level of security for sending and receiving files to and from your site. 

Web Development

Web languages: A web development language, or a ‘programming language’, is a vocabulary and set of grammatical rules used in instructing a computing device to perform certain tasks. It is commonly referred to as ‘coding language’. There are many out there but most common sites use the obes below, one way or another.

HTML: HTML (Hypertext Markup Language) is a text-based approach to describing how content contained within an HTML file is structured. This markup tells a web browser how to display text, images and other forms of multimedia on a webpage.

CSS: CSS (Cascading Style Sheet) is the language for describing the presentation of web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. 

jQuery: jQuery is an open-sourced JavaScript library that simplifies creation of web applications. Specifically, jQuery simplifies HTML Document Object Model (DOM) manipulation, Asynchronous JavaScript and XML (Ajax) and event handling. In plain words, you can use the jQuery library as shortcuts for more complicated JavaScript operations.

PHP: PHP (Hypertext PreProcessor) is a general purpose scripting language and interpreter that is freely available and widely used for web development. WordPress (among others) uses PHP.

AJAX: AJAX (short for “Asynchronous JavaScript and XML”) is a set of web development techniques that uses various web technologies on the client-side (they happen in your browser, not on the server) to create web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. For example, a region of the page can refresh with search results or options chosen, without reloading the entire page.

Graphic and image formats:

JPG: A JPEG (Joint Photographic Experts Group) is a type of image format that is saved using a method of lossy compression. Lossy means that some pixels are lost, and are instead estimated based on surrounding pixels. The output image, as a result of compression, is a trade-off between storage size and image quality. Users can adjust the compression level to achieve the desired quality level while at the same time reduce the file size.

PNG: A PNG (Portable Network Graphic) file is a type of raster image file that is commonly used on the internet. PNG files are “lossless”. This means they have a fixed number of pixels, and do not lose any quality when they are compressed. This makes them ideal for storing images that need to be high quality, such as logos and illustrations. PNG images can also support transparency, which can be useful for creating web graphics with transparent backgrounds.

GIF: A GIF (Graphic Interchange Format) is a type of often low resolution color bitmap image that is saved using a method of lossless compression. In the early days of the web they were used for small images and logos. Later, GIF animation became popular, and is still popular today.

EPS: EPS (Encapsulated PostScript) is a file format created by Adobe in the late 1980s to serve the needs of designers and printers. Originally it was only compatible with Adobe Illustrator, but now there is a lot of free software to open documents with an EPS file extension, as well as to convert an EPS file into a different file type, or to view EPS files without Illustrator. EPS can be as small as a dot or as large as a billboard and not lose resolution. Very often logos exist in EPS format.

Webp: WebP is a modern image format that provides lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that may make your site load faster. Personally I have seen better results and compatibility from properly sizing and compressing JPG and PNG images, but your mileage may vary.

Other:

Buffybot: The Buffybot was a robotic replica of Buffy Summers (The Slayer) created by Warren Mears at the request of Spike for – well – Spike was evil. It was eventually reprogrammed by Willow and used as a Slayer decoy in battles, until its final destruction.

Just sit right back
And you’ll read a tale
A tale of an old web site,

That launched back in
Twenty-fourteen
With plugins full of plight.

The site was working fine one day
Until the plugins crashed.

The pages used to work ok,
But now the site is trashed,
Now the site is trashed.

The home page is a freakin’ mess,
The templates have gone bust.

If not for the stable WordPress back-end code
The website would be dust,
The website would be dust.

I got a call just after five,
Asking me to join a Zoom,
With marketing,
The sales team too,
The president,
And his wife,
The IT guy,
The interns and the HR folks,
All with faces full of gloom.

So this is the tale of an old web site,
It’s down for a long, long while.

We’ll have to hack our way through things
And make it work, new-style.

Our web team and developers
Will do their very best,
To bring this website back to life,
And get problems addressed.

No posts,
No links,
No SEO,
No functionality.
Like something from the 90s,
It’s primitive as can be.

So listen here and plan ahead,
If your site has special bytes,
If your plugins can’t 
Be updated,
It’s time to fix your site!

---

Your website needs to work in the real world, and for longer than a three hour tour.

If your site is older, wonky, or you see a lot of this:

or this:

and would like help making it work the way you need – contact RPS today.

All your links and passwords, too.

Guess how many clients don’t have access to their own websites?

More than you’d think.

And even if you never log in, this is important information for every website owner to have, because sometimes this happens:

Whether it’s a WordPress issue, a misplaced semicolon, a plugin incompatibility, or simply the phase of the moon, sometimes a website will cough up an error like that. 

If we have the logins – and we usually ask for them before starting any work, it can very often be fixed quickly and easily.

If we do not have access to those services – well – then – sometimes we can’t do anything. Then the client has to get involved, time passes, and the issue lingers, the site stays down, and usually someone (sometimes me, if you can believe it) gets annoyed.

This is why we recommend that you – the site owner – have this login information. 

You should have logins and access to your web hosting account and site administrator account. If only so you can easily share them with your developer team, instead of going back to the former developer, who has to send out to his contact somewhere, who has to contact his guy overseas, to get the server logins we need to do the job you hired us to do.

So – if you don’t have your logins, go get them right now from wherever they may be, and hang on to them just in case. That way my next post won’t be about you. 🙂

Maybe you can use a tip from some hawks.

For the last several years, we’ve had Red-Shouldered hawks around (see photos – these are the actual hawks living here this year.)

This year they are building a nest in our yard. We can see it from our living room – I can also see it from my desk – which means we can watch the hawks without annoying them.

In March they work on the nest most mornings. We can see them arrive with sticks and bits of green – pine branches or moss or something. Then they adjust the sticks. One day they had a big stick and they’d move one end and the other end would get out of line so they’d move it back. 

Hawk theater can be very entertaining.

They simply iterate and adjust things over time until they make the nest do what they need.

Which is one way to look at your SEO. (See, there is a point.)

When your site launched you may have gone in and added page titles and meta information. (At least I hope you did. If not, call me now.) If it’s been some time since you edited your info – are those terms and meta details still doing what you need? Is your company or product exactly the same? Or do you need to go move your SEO sticks around and adjust a few things to get better performance and traffic?

We can’t build you a nest, but we can help with your SEO. Let me know if we can give you a stick. Or a hand.

Heads up – Google Analytics is changing, and we all need to change with it.

If you are already using Google Analytics on your site, you may need to make some adjustments so your site keeps tracking after July 1, 2023. I have seen things that say if you didn’t do this in March 2023, they’d do it automatically. I have also still seen the “update to G4” message in Google Analytics today, so, it’s worth checking to make sure your account is updated and using the new G4.

This explains it further, but in Google-ese:

https://support.google.com/analytics/answer/9744165?sjid=13688988354405926353-NA#zippy=%2Cin-this-article

Basically – there is a setup wizard to run in Google Analytics that should create the new G4 “property” and activate it to start collecting data.

However – it will not – the new G4 property – will not show any historical data. Such as from a month or a year ago. That information will still be available for a while, they say. But – it may also make sense to export it so you don’t lose it. You can export reports in a variety of formats: https://support.google.com/analytics/answer/1038573?sjid=13688988354405926353-NA

As always, if you need help and want to make sure your Google Analytics is and will be still working come July – let me know.