With over 40 years of combined experience, xclntDesign has seen design trends come and go. But we are always on top of the latest ideas and styles, and we can put that information and our wealth of knowledge to work for you and your company. Don't take our word for it, you can see for yourself.
Google PageSpeed Insights: The Tech Stuff
PageSpeed Insights is a tool created by Google to measure how fast your site loads. How fast your site loads is one of the key factors on how well your site ranks in the organic search results. Search engines like Google and Bing want to deliver the best possible result to their users, and a site that loads quickly helps enhance the userâ€™s experience. Also, when indexing the pages on your site, search engines only allot a specific amount of time; if you have a page or several pages which load slowly, it may not be able to index other pages because it runs out of time.
The PageSpeed Insights grading system is much like school. 100 is an outstanding job, 50 means your failed. If you can get a C (between 70 and 75), youâ€™re doing an OK job. If you can get above an 85, you have a high performing site, which can lead to good things.
The only problem with PageSpeed Insights is that there is a lot of technical mumbo jumbo that a lot of website operators do not understand. Today I am going to cover just a few of the rules by which Google grades your page.
Letâ€™s break this statement down into 2 pieces:
CSS, or Cascading Style Sheets, are sets of instructions given to a browser to determine how a particular element looks. You can set such things as font size, background color and margin around an object on the page to make it look exactly how you wish.
Render-blocking refers to the fact that the page cannot be displayed as intended until the resources have been loaded. Even with fast internet connections, repeated trips to the server to retrieve files can be time consuming.
Visual fix: It is faster to go to the grocery store once to get milk, bread and eggs than it is to go to the store, buy milk, come home, go to the store, buy bread, come home, go to the store, buy eggs and come home.
This is an old newspaper term. If you look at a newspaper you pick up at the store, they put their most intriguing stories and headlines â€œabove the foldâ€, meaning the part you see without having to touch the newspaper.
For websites, above the fold refers to the part of your website that appears before a user scrolls. Just type in your URL into the address bar and load your page. What you see on the screen, before you do anything else, is â€œabove the fold.â€
Putting it all together
One of the key factors in your PageSpeed grade is how long it takes before the page will be properly displayed to the user so they can begin navigating your site. The less time it takes, the higher your score for this rule.
Minify HTML, JS and CSS
Browsers, however, donâ€™t need that. They read files, line by line, and when they have everything, then they decide what to do with it.
When viewing a web page, it helps to have an image that compliments your content so that the user can more easily visualize the topic of your content.
At one time or another, youâ€™ve been to a website, and seen a hole in the page, and wondered what belongs there. Then after a second or two, you see an image pop up.
On one of those trips to the store mentioned earlier, you picked up a fully assembled entertainment center and are now trying to bring it home in the trunk of your car. You have to drive a little slower.
Optimizing your images, by reducing the dimensions of the image to the largest needed size and by enabling compression, will turn that fully assembled entertainment center into a box of wood and screws that will be put together once it gets home (i.e. the browser).
Third party software and websites, such asÂ Kraken, will take your image files and reduce them even further, which reduces the overall size of a web page, thus increasing its load speed.
Size tap targets appropriately
While this has nothing to do with how fast your page loads, it does play a part in the user experience on a mobile device.
When creating a page for mobile visitors, you have to remember that a fingertip is not as precise as a mouse cursor. You need to leave a little room between links so that the user doesnâ€™t have to worry about accidentally clicking on the wrong link.
Add a little padding with CSS to each link, which will separate it from others around it.
Other PageSpeed rules
Other PageSpeed Insight rules, such as enabling compression and leveraging browser caching, require a higher degree of technical knowledge and should not be attempted by those unfamiliar with server software. An experienced web designer or developer should be able to help you with these items.
xclntDesign can help
If youâ€™re looking to get the most out of your web presence, thenÂ contact xclntDesign today. Our knowledge of web design and development, along with the various items that search engines love to see in websites, can vault you to the top of the list in your industry.
Curious how your website performs with Google PageSpeed Insights?Â Click here to check!
6 minutes, 14 seconds reading time