What can Publii do to make your website better than ever?
Bob Mitro For years the Publii team have worked across multiple disciplines in the web development space, and in that time we've encountered a number of frequent issues that negatively impact the positioning of a website, as well as its general speed and loading. When we came together to create Publii one of our key aims was to eliminate these issues wherever possible, and we're constantly adding new features and refining existing ones to do so. In this article we'll take a look at the benefits Publii has to offer to make your website friendly for both internet users and their web browsers.
Responsive images
The incredible growth of smartphones worldwide forced websites to adapt their product to devices which had reduced productivity and screen size, yet could take advantage of massive leaps in available internet speeds. In most modern websites the majority of the final weight of a site is down to images, and with high-resolution cameras being commonplace the total size of said photos can be quite substantial.
Publii overcomes this issue by implementing a responsive images mechanism, which serves different versions of an image depending on the device being used to browse the site. For example, a user on a large 4K resolution screen will appreciate a heavy, high-resolution photo, but on a small, lower-resolution mobile phone screen such excess isn't necessary; instead, a much lighter version of the photo tailored to the small screen will be provided.
Refined themes
Publii offers a range of themes that utilize the latest website trends, providing attractive layouts that are just perfect for blogging about a range of subjects. And because Publii is at heart a blogging platform (though you can use it for a multitude of other types of website!), we implemented fluid typography that greatly improves readability. Unlike responsive typography that responds only to breakpoint settings, fluid typography flows with the screen size; even if a user resizes their browser window by just a tiny amount the text content will resize with it, keeping a consistent look and feel across screen and window sizes.
Such fluid movement may seem hard to manage, but by making use of vertical rhythm to maintain consistent vertical spaces between elements on the page your blog layout will be balanced and clear for your readers.
To maintain fast load speeds all themes are built using HTML5, with a small amount of CSS and Javascript code to keep things fresh and functional, allowing screen readers easy access to your content. In addition, Publii includes a lazy load feature, which allows some heavier or less important elements such as images or comments to be loaded on demand, only appearing when the user scrolls to the relevant part of the page where the comments or images appear. This means the initial load before users can see your page content is significantly reduced.
Optimized CSS code
Each Publii theme comes with a huge number of customization options, from simple changes such as switching through a range of layouts and colors, to more complex functionalities such as inserting custom CSS code, modifying .htaccess and robots.txt files, or adding HTML to the head, body or footer of the theme.
When changes to the theme settings are made, an additional piece of CSS code enabling the settings created and added to the main style.css file. Interestingly, only the fragments of the CSS file that are directly modified in the theme settings are overridden; this means that the resulting style.css file is always clear and lightweight. Additionally, the website load time is improved thanks to a built-in file compression option, that minimizes file sizes.
Issue-free CSS and Javascript cache files
One of the most cumbersome problems of browsing websites that are frequently updated or implement visual changes is the browser cache; outdated files might be left unchanged in the cache causing problems with layouts or images. To combat this, we've added a mechanism to Publii that adds a v=z parameter to each CSS/JS file. Then, if the file is modified, the value of the parameter will change and browsers will know to download the updated version of the file.
RSS and JSON feed
Publii supports both popular and well-known RSS format for providing content feeds, but also supports the new JSON feed format, which is supported in many modern content aggregators. With both these formats supported, your readers will be able to keep up with all the latest news from your website.
Refined SEO
Any user that wants to get their website noticed will need to invest time into SEO (search-engine optimization), especially as search engines are often the primary source for information for many internet users. In Publii, you can control not only the essentials such as meta descriptions of each of your subpages, but also how they are indexed (metatag robots, sitemap) and the content of the robots.txt file. Additionally, Publii generates JSON-LD files and canonical URLs for each subpage, and with refined, lightweight themes and additional options such as HTML and CSS compression, your site will score highly in speed test; a key metric for search engine ranking.
AMP site version
AMP (Accelerated Mobile Pages) is designed to offer a high-speed solution for mobile users to get access to content directly from their search results with very little delay. Publii includes the option to automatically generate an AMP version of your static website, which doesn't just help your mobile visitors; it can also be a factor in SEO rankings too!
Social media friendly websites
Getting clicks through social media sites is a great way to get new visitors to engage with your site, so when rendering your website's pages Publii automatically generates additional metatags for Twitter and Facebook. This means that when your articles are shared on social media they'll look more succinct and attractive, improving traffic and increasing your page views.
Summary
With all these features in Publii, and with most of them either starting automatically or just requiring a one-time run, we can see that we don't need much to make our website fast, user-friendly and well-positioned in the online space.