Core Editor Improvement: Need for (page/post) Speed

Thank you to @aristath who helped with this post.

In today’s world, speed matters whether you’re trying to write a post in the editor or load a page as a visitor. Over the last couple of months, a lot has changed around performance to improve both of these aspects, but the changes might have happened so fast you missed them! This post will focus solely on front end performance with a future post in the works that covers performance-related changes to the editor itself. For now, read on to learn just how speedy the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor makes your site and get excited because what’s discussed here is currently available in Gutenberg 10.1!

Updates to front end performance

As most developers know, you can think of front end performance as the type of performance that impacts SEO and the experience visitors have when they check out your site. Lots of things contribute to the performance of your site including various CSSCSS Cascading Style Sheets. styles, JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. files, and more. While your theme and plugins contribute to what needs to be loaded to create the magic of viewing a page or post, the core editor does as well! 

With the merging of this PR, CSS styles are only loaded for blocks used on a page, which cuts down the amount of CSS needed and increases performance dramatically. For context, in previous GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ releases, all styles for all blocks were enqueued in a single file causing extra page load. This means that now only what’s necessary is loaded when you’re viewing content! 

After the work was done to separate out block styles, an additional PR was merged for Gutenberg 10.1 to improve the performance of these blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. styles. Since most blocks have fairly small stylesheets, it didn’t make sense to send requests to the server for these bite-sized styles. To resolve this, the tiny stylesheets were inlined, further improving the performance by including everything the browser needs in a single request. Think of this as sending one text message covering a few topics, rather than writing a bunch of individual messages one after the other. 

Right now, both of the above changes are the default behavior in FSE, but they are opt-in for non-FSE templates to avoid backward-compatibility issues with CSS overrides in older themes. When FSE gets merged into Core, these improvements will be more widely available and make a big difference for all. 

Stay tuned for more

As with many performance enhancements, it’s easier to notice when things break compared to when they are running smoothly. Hopefully, this post gave you a behind-the-scenes look into the work that goes into keeping your sites speedy while using the Core Editor. While a lot of work is put into democratizing publishing in the WordPress project, this kind of work helps democratize delivery, allowing people to get the content they want to consume easier and faster. With changes coming to Google Search related to the speed of webpages, performance improvements for both the front end and in the editor have never been more timely. 

The work here is never done though so, if you’re interested in working on improving performance, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting Wednesday @ 14:00 UTC.

#core-editor, #core-editor-improvement

CSS Chat Agenda: March 4, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, March 4, at 10:00 PM UTC. This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, or if you have suggestions for discussion questions, please leave a comment below!

  • Housekeeping
    • Bug scrub leader for next week
  • Discussion: Compare ideas for naming custom properties for colors in a button.
    • We discussed creating a CodePen or similar to show how we would name colors for a button – see this message with details on the colors to include.
  • Project Updates
  • Open Floor + CSS Link Share

#agenda, #core-css

Core Editor Chat Notes 3 Mar., 2020

This post summarizes the latest weekly Editor meeting (agendaslack transcript). This meeting was held in the #core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel on Wednesday, Mar. 3, 2021, 9:00 AM EDT and was facilitated by @andraganescu.

WordPress 5.7 Upcoming Release 

WordPress 5.7 RC 2  is now available for testing.  If you are a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party author and/or a theme developer test your plugins and themes against WordPress 5.7 and update the Tested up to version in the readme file to 5.7. There will likely be a 5.7 RC3 later this week.

The WordPress 5.7 Field Guide is out! It contains a full breakdown of everything you need to know about WordPress 5.7.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ Version 10.1

Gutenberg 10.1 has been released! This release includes a number of nice enhancements and as usual many bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes. In addition Full Site Editing, Widgets and Navigation screens and Global Styles saw many improvements.I believe the many recent improvements to the different user flows related to Reusable blocks should be highlighted.

The most recent one is the enhanced creation flow, that also allows you to cancel the action. We now have better clarity on the Image toolbar and more blocks are going to follow. 🙂 Finally we now have spacing options for Social Links and Buttons that will help users achieve more elegant designs effortlessly.

Kudos to all for your help and contributions!

Monthly Priorities

March monthly plan will be released soon.

  • FSE – there is a focus on making the theme/template creation process more WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page..  Infrastructure and UI milestone progressed with Persistent List View and previews in the browsing sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. Almost all of the Semantic Template Parts tasks from the milestone have been completed. 
  • New blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based editors – the widgets editor now has  a preview of block support in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. while the navigation editor is quickly iterating on the UIUI User interface update it got recently. Help is always welcome in any shape to help with the long list of queued up issues.
  • Mobile apps – started global style support, work progressed on reusable blocks, Removing ability to switch to the Classic editor switch, dual-licensing Gutenberg, search block, adding search to the block inserter, embed block

Task Coordination

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

@annezazu

  • Amplifying the second FSE call for testing (working with marketing, reaching out to a few communities, etc)
  • Responding to the second FSE call for testing and filing issues. Thanks to all who have left feedback!
  • Some triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. mainly around older issues and testing FSE everyday.
  • Helped draft the proposal for dropping IE11 support.
  • Working on a Make CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. post about the role of the Gutenberg plugin.
  • Working on a Core Editor Improvement post about performance enhancements.

@aristath

  • This week I focused mostly on a hybrid-themes proof of concept to allow the use of both php templates and user-created templates: PR 29298This can allow users to manually create templates on any theme (even non-FSE themes) so they can have a regular theme, and create a completely custom frontpage. It would be great to have something like that in the FSE MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia, but the interaction part is still a bit unclear and it would need lots of feedback as to how some things can happen. The PR however shows that it’s definitely possible to have both 
  • For next week I plan to start tackling some of the items listed in Issue 22724 so we can get the FSE MVP across the finish line on time for 5.8

@paaljoachim

  • Made an issue to consolidate setup instructions for core and Gutenberg. Issue 29448
  • Added a video showing how to test a PR by downloading a special Gutenberg plugin. Issue comment
  • Triage and testing.

@joen

  • Still working on navigation block adjacent tasks, and would love eyes on this CSSCSS Cascading Style Sheets. refactor: PR 29465
  • Also took a stab at a frustrating embed issue that’s in the 5.7 must have categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. The PR works, but it needs a developer to bring it home: PR 29510

@itsjonq

  • Updates for the new Component System project: Integration is moving along. @sarayourfriend (she/her) and I (mostly Sara ) are continuing to move the new components into Gutenberg. We’re at around 23% integrated.
  • The main working issue is here:
  • The simple status page for this project is here.

@ntsekouras

  • Query Title block spinoff PR from my original one, that handles Archive Title for now as block variation(PR 29428)
  • Some fixes for Site Logo and Query blocks

Open Floor

@annezazu asked, and got some good support, if we could use a nudge in a dashboard widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. to get more user testing of upcoming features.

Some concern about the size and novelty of FSE was expressed and also an idea to split existing documentation in byte sized versions.

@Zeb brought up his PR that fixes a bug with the Table of Contents block, asking for some review help.

@itsjonq created an issue for the RTL bug thay affects the current WordPress 5.7 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2, mentioned earlier in the meeting by @swissspidy.

In the Gutenberg repository the branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". master is now renamed to trunk. The post describing the change is here and you can find the details on how to update your local on the repository’s home.

Discussion: Dropping support for IE11

After digging into data and reviewing previous decisions around browser support, this is a proposal to define a policy to stop supporting Internet Explorer 11 (IE11) now that usage has cumulatively fallen below ~1% across three metrics. 

Current state of IE11

As of February 25th 2021, IE11 usage has cumulatively fallen below ~1% according to three sources of metrics:

  • 0.71% from StatCounter’s GlobalStats.
  • 1.2% from W3 Counter.
  • 0.46% from WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/.

For comparison, the numbers above are very close to the data used to make a decision in 2017 to drop support for IE versions 8, 9, and 10. It’s important to keep in mind that when viewing these statistics in the context of WordPress, these percentages represent tens (if not hundreds) of thousands of users that could potentially be left behind if support for IE11 is dropped. 

In August 2020 Microsoft themselves announced that Microsoft 365 and Teams apps would stop supporting IE in the upcoming months. However, given that IE11 is a component bundled with Windows10, according to the IE Lifecycle it will still receive security updates as long as the Windows version it was shipped with continues to receive support. 

In terms of the current WordPress user experience, a flag was added to not recommend IE in BrowseHappy about 13 months ago, so by now, most WordPress users should be aware. Tied to this, the experience overall is not optimal in IE11 with a high cost of maintenance for developers.

Proposed Policy

The proposed policy for WordPress is to end Internet Explorer 11 support. This was discussed most recently in the February 24th Core Editor Chat and briefly during February 23rd JavaScript office hours in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. More context and discussion have been shared over time in this original Trac issue that seeks to determine clear guidelines around what absolutely can’t be broken in order to help identify development and testing needs. 

Benefits

Dropping support would result in smaller scripts, lower maintenance burden, and decrease build times. For instance, a recent exploration by @youknowriad demonstrated that not transpiling the scripts to IE11 immediately resulted in a net reduction of nearly 84kB in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. built files, representing a 7,78% total decrease in size; these scripts have seen a size contraction up to 60%, with an average reduction of 24%. This is a result of heavily relying on transpilers, further explained by Jason Miller, Web DevRel at Google. Moreover, dropping support would ultimately make WordPress’ currently included polyfill script obsolete, decreasing the enqueued scripts size up to 102kB more.

The smaller downloads would positively impact all users, especially those on slower networks, or computing devices. We expect a result of dropping IE11 support to improve performance for the vast majority of users. 

Potential Concerns/Blockers

TLDR: The concerns are for those who are unable to upgrade, like financial institutions and education sectors, and those who rely on IE11 for screen readers. 

There are major institutions like banking, government, and education that are unable to control when they can upgrade sometimes due to legal requirements, depending on the country. This further underscores the need to determine a policy that takes into consideration both a data-informed approach and the impacted user bases while weighing the potential benefits for the wider web. 

According to a September 2019 WebAIM survey, IE11 is still used as a browser among screen readers with 11.5% share. This is an older survey and IE11’s global share was 2.9% at the time the survey was done according to the sources linked above. It takes time for screen reader software to support newer browsers and the latest versions of popular screen reader NVDA have continued improving and adding support for the Edge browser. As a result, this post embraces an assumption that IE usage among screen reader users has declined since the survey as the software improves and overall usage of IE11 has declined. Please let us know if this assumption is or if there is better data available to refer to.

Keep in mind that there are ways to patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. gaps in functionality that’s determined critical to maintain for a time. This post does not seek to go into technical implementation details though.

Share your feedback about this proposed policy change to drop support by March 18th

This is a tough decision to make and we want to solicit feedback from as many voices across the community it may impact. Please note, this post is not meant to go over any technical fallbacks at this time but to purely discuss the policy of dropping support. 

Once we’ve gathered feedback, the next step will be to consolidate and decide the policy. The actual technical implementation of the policy is most practical to pursue across the numerous WordPress projects. 

Thank you to @mkaz, @annezazu, @youknowriad, @desrosj for help writing and reviewing this post. 

#accessibility, #browser-support, #performance