how to make webpages work better?
Let's quickly get into and tackle some of the more common issues concerning page loading speed.
how to overcome website bloat?
The most significant contributor to slow page loading is its size. As for desktop versions, the typical size of a website approaches 2 Mb, and for mobile, it is nearly 1.8 Mb. Google says that .5 Mb is the ideal size for optimum loading, while the consensus of web developers is 1 Mb.
The irony is that almost most of the big-boys are considerably larger than this.
See the problem?
The advice is to have plenty of content, with a lot of illustrations, video, and artwork, yet keep the overall size down to make for quick load speeds.
It is a real paradox. It is impossible to have both.
beware of photo and video problems
One fundamental method is to optimize photos, videos, and illustrations. That means to be aware of the size and format of these graphic elements.
There are numerous file formats for images used on the web. The most widely used image file formats are the ".jpeg," ".png," and ".gif," with their appropriate file extension abbreviations.
For complex images that include a vast array of colors, jpeg's are best suited because they allow high compression. (JPEG stands for Joint Photographic Experts Group, and also uses the acronym JPG.)
For the Internet, JPEG images can usually compress to 5% of their original size, which works well when file size is critically more important than quality. It is also important to note that each time a JPEG becomes compressed, its image quality will degrade, so always keep an untouched original.
Just about every image editor and browser available supports the JPEG format. However, jpeg formatting does not suit image files that only have little color data. In that instance, PNG formatting is the preference.
Png's (Portable Network Graphics) are equally widespread in web development. This image format also can handle a vast range of colors. However, it is better suited when transitions from light foregrounds to dark backgrounds are the desired results, i.e., without losing clarity. A JPEG would have blurred edges with a significant amount of distortion in that instance; consequently, the PNG would be a better choice.
Also, if you require a transparent background, use PNG formatting. When constructing logos or icons, the transparency capability allows the superimposition of the image over any color environment, without having to fill or modify the background color.
So, when to JPEG versus PNG?
JPEG is well suited for photo images, which produce a smaller file size with little quality degradation. However, when compressed, the JPEG loses color data that is lost forever. Further, as JPEG's experience additional compression or editing in the processing, appreciably more color data degradation occurs.
JPEG is well suited for photo images, which produce a smaller file size with little quality degradation. However, when compressed, the JPEG loses color data that is lost forever. Further, as JPEG's experience additional compression or editing in the processing, appreciably more color data degradation occurs.
If the image is a line drawing, screenshot, or caricature, the PNG performs better regarding clarity and file size, with the ability for a transparent background.
PNG's can also can be edited, compressed, or saved repeatedly with relatively no loss in quality.
GIF (Graphics Interchange Format) use is for a more specific purpose, i.e., animation.
A GIF should only manage its way into a site when there is no other way to display an animation. That is because of the GIF's need for scores of frames to render the moving image, resulting in enormous file size, and being highly nonresponsive when considering page opening speeds.
Also, GIF formatting supports only 256 colors and transparency; therefore, a poor choice for elaborate images.
GIF's are compressible; however, the results are inferior quality images. Other file formats provide better results while not losing the image's visual appearance.
There are other ways to provide animation, such as CSS, which stands for Cascading Style Sheets. Typically, using CSS is not for the novice, and is beyond the scope of this presentation.
There are applications available to generate animation, which tout being shortcut methods to animate. However, many are limited to Mac only, still require coding knowledge, can be pricey, or do not support secondary applications and all browsers.
tools to format images properly
Not all images available to you, or that you may already have, are the ideal file format or size.
By changing the file type or structure of the image file, one can significantly modify it, resulting in faster loading times without losing quality.
Reformatting them is done using software or downloadable utilities that are available on the web, or by photo applications like those that already exist on your mobile phone.
There are online utilities that are free and will get the job done, like those available at the following web locations:
- picresize.com
- resizeimage.net
- nchsoftware.com
- imagecompressor.com
- kraken.io
Videos are one of the most prominent culprits in today's online bloat. There is no doubt about the visual impact of a video. However, videos account for 66% of today's average page size.
One way to get around this is by not self-hosting your videos. Numerous outlets will do it for you, and some will do it for free or a reasonable monthly fee.
Here are some of the places to look into:
- aws.amason.com
- google.com/drive
- twitch.tv
- vimeo.com
- youtube.com
reduce or limit your fonts
Besides keeping the webpage more attractive by limiting the number of different font types, multiple fonts can add time to loading.
Typographically, stick to one or two fonts. This approach will help set a thematic look to the site and will assist in creating your brand look.
Also, third-party typefaces need parsing, which adds processing time, delaying the opening and viewing of the site.
Images used as fonts also slow down page loading, and lose their effectiveness (read attractiveness) on a retina and high-resolution device.
The best solution is just to use a resident font, i.e., fonts that reside in your application or software.
what is proper page layout?
For the most part, webpage users do not read the pages. They scan them.
The more overloaded the page is, the more likely visitors are bound quickly to leave the page. Furthermore, the first link that they see that will satisfy their need is the first one that they will follow.
Proper page layout means making the homepage, or any page for that matter, uncluttered, easy to navigate, and answer more questions than it creates.
This illustration is not an example of that concept.
To expand on that thought, you should always strive to reduce the amount of understanding needed by the viewer. There should be a sense of being in the right place.
The viewer should see without question what direction is available to be taken, and with the feeling that it is a normal progression.
For example, our homepage starts with providing info on how to structure a website, then moves on to show tools that are available to make it better. And finally, how to promote to the online audience using the other two previously outlined.
Proper page layout should maintain the following fundamentals:
- uncomplicated layout
- individuality of style
- clarity in message
- prominence of meaningful content
The following nitty-gritty runs throughout this presentation and is here again only to reinforce their importance.
uncomplicated layouts are critical
The homepage, as with all webpages, must be uncomplicated. There should be no parts of the page that do not communicate to the viewer, i.e., elements that would disrupt the message.
individuality of style should be stressed
The homepage should stand out, i.e., be unique. Being distinctive takes creativity, but it does not mean going overboard just to be so.
Look to not only your competitors in your field but also some of the more individualistic examples on the Internet that have that certain quality making them stand out. And they do not have to be in your field. Then attempt to improve upon their style.
clarity in message
The page should flow so that there is no misconception as to what the message or information presented means.
If you are just marketing on the homepage and not informing, your viewer will immediately sense your intent. You are just saying that you are here to sell something or persuade the viewer to do what you want the viewer to do.
Clarity means that the homepage tells the visitor without ambiguity:
- what the site is about
- what can be gotten here
- why should I do it
In other words, everything presented here must stand on its own and must make sense.
That is clarity.
prominence of meaningful content
The most important information on the homepage needs immediate visibility and to be easily distinguishable. If it is not, you will lose the viewer's attention in the time it takes to click a mouse.
Essential subject material requires positioning at points where the eye hits the page, which means above the point where the screen breaks. In newsprint jargon, the term is "above the fold." For most desktops and laptops, it is about 600 px from the top of the webpage.
Unfortunately, the same is not accurate for audiences on mobile and small devices.
But the simple rule to follow is to have critical info where it is readily viewable.
how to use keywords?
Keywords are the phrases or words that an Internet user will type into the search bar of a browser to find the information for which they are looking.
The misconception is that you only need to pick words or phrases that have the highest volume of matches and work them into your content as much as possible.
We do not suggest this approach.
You do want relevant words and terms, but if the big boys monopolize these keywords, you may be totally out of luck.
Let's say you think that you should use a prevalent keyword phrase that garners 6 million in search volume for the month. What is the likelihood that if you use solely terms that are very high volume, you will get the desired results? The answer is slim.
What may be the answer to highly competitive search terms are keywords that relate to the relevant terms but draw less competition and place toward the middle or near the bottom of the rankings.
which keyword tools to use?
To see the popularity of specific search terms, we suggest using keyword tools like:
- wordstream.com/keywords
- neilpatel.com/ubersuggest
- semrush.com
- wordtracker.com
- moz.com
Some of the above are free, and some have free trial periods, but you can get an indication of what are the possibilities for search terms and how they rank.
what are keyword best practices?
Naturally, the less competitive terms have to make sense when used on the page; otherwise, it can result in having the negative effect of being penalized for spamming. The algorithms can pick up that type of frowned-upon SEO practice.
The search engines can also identify if the site is using keywords repetitively in an attempt to garner a higher ranking.
As an alternative to using single or two-word phrases (“short-tail keywords”), try what is called "long-tail keywords."
The long-tail varieties are longer phrases that are more descriptive than the abbreviated ones. An example would be "how to build website traffic with keywords," as opposed to "website keywords."
The number of site visits generated by the long-tail keywords could be considerably less than the shorter version. But the conversation rate often increases. Merge this type of keyword approach with your standard practice, in both text and headings, and you will find that your click rate can improve.
Keyword practices are essential to generate meaningful web traffic. Also, spending the time to do it organically is less expensive over time than shelling out for pay per click.
Remember, your goal is to use keywords in creating page content that will attract visitors.
how to call to action?
A call to action (CTA) is a prod that encourages a visitor to take or make a specific action. Typically, a link or button forms the CTA and has a phrase like "Buy Now" or "Try for Free."
Too often, we find that the CTA's position is poorly placed on the homepage. Even worse, they show up as a popup as the visitor enters, like this one. We wholeheartedly believe in asking for the sale, but even before the visitor knows the offer?
Premature requests to purchase or take action are not going to go over well. Particularly when the viewer does not know anything about what the offer is, even if it is free.
How many times have you entered a site for the first time, and out of nowhere immediately comes a popup asking you to sign up for something? More times than not, you feel rushed or forced to make a hurried decision, and click your way out of the page. And once they are gone, they will probably never return.
The CTA should be the last thing that you want your viewer to do, i.e., other things lead up to it that should make it happen.
Here are a few short guidelines for developing calls to action, without alienating your visitors:
- Give the viewer concise information about the subject.
- Identify the problem-solving solution offered.
- Define the benefits associated with it.
- Provide success stories relating to the topic.
- Make sure the CTA is visible, but not overpowering.
- Use action words telling the viewer what to do.
- Create a sense of scarcity or loss if not done.
- If possible, offer something of value for free, or a no-cost money-back guarantee.
- Assure users that you are not going to use their personal information nefariously.
- Test which CTA's work for you and which do not.
Creating the perfect CTA takes work, but the benefit outweighs the effort required. But always be aware that your call to action must be concise and that it answers the viewer's question when they click the CTA.
